Add fourth page

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "audiomotion-analyzer": "^4.5.1",
-    "htmx.org": "^1.9.12"
+    "htmx.org": "^2.0.6"
   },
   "packageManager": "pnpm@10.11.0"
 }

pnpm-lock.yaml

@@ -12,8 +12,8 @@ importers:
         specifier: ^4.5.1
         version: 4.5.1
       htmx.org:
-        specifier: ^1.9.12
-        version: 1.9.12
+        specifier: ^2.0.6
+        version: 2.0.6
     devDependencies:
       '@parcel/compressor-brotli':
         specifier: ^2.15.4
@@ -704,8 +704,8 @@ packages:
   htmlparser2@9.1.0:
     resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==}
 
-  htmx.org@1.9.12:
-    resolution: {integrity: sha512-VZAohXyF7xPGS52IM8d1T1283y+X4D+Owf3qY1NZ9RuBypyu9l8cGsxUMAG5fEAb/DhT7rDoJ9Hpu5/HxFD3cw==}
+  htmx.org@2.0.6:
+    resolution: {integrity: sha512-7ythjYneGSk3yCHgtCnQeaoF+D+o7U2LF37WU3O0JYv3gTZSicdEFiI/Ai/NJyC5ZpYJWMpUb11OC5Lr6AfAqA==}
 
   inline-style-parser@0.2.4:
     resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
@@ -1862,7 +1862,7 @@ snapshots:
       domutils: 3.2.2
       entities: 4.5.0
 
-  htmx.org@1.9.12: {}
+  htmx.org@2.0.6: {}
 
   inline-style-parser@0.2.4: {}
 

src/components/section-head.html

@@ -5,7 +5,7 @@
 </script>
 <div class="section-header">
   <div>
-    <h1>{{header}}</h1>
+    <markdown># {{header}}</markdown>
   </div>
   <div>
     <yield></yield>

src/components/tab-content.html

@@ -13,6 +13,9 @@
   <button hx-get="/partials/interests.html" hx-push-url="/interests.html"
     class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
     aria-controls="tab-content">Our Interests</button>
+  <button hx-get="/partials/page_four.html" hx-push-url="/page_four.html"
+    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
+    aria-controls="tab-content">Page Four</button>
 </nav>
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">

src/page_four.html

@@ -0,0 +1,3 @@
+<x-head>
+  <include src="src/partials/page_four.html"></include>
+</x-head>

src/partials/page_four.html

@@ -0,0 +1,12 @@
+<x-tab-content selected="3">
+  <x-section-head header="Page four">
+    <x-blockquote cite="Josh Arbon (CEO of Mystery Project)">
+      Who is this guy?
+    </x-blockquote>
+  </x-section-head>
+  <x-project text="?">
+    <fill:title># Coming soon to theaters</fill:title>
+    <fill:subtitle>## This website is under construction</fill:subtitle>
+    <fill:description>We'll get to it, trust</fill:description>
+  </x-project>
+</x-tab-content>

src/style.css

@@ -162,6 +162,10 @@ p {
   text-align: left;
 }
 
+sup {
+  font-size: 12pt;
+}
+
 ol {
   padding: 0;
 }