Inline projects page into index.html

.posthtmlrc

@@ -1,9 +1,9 @@
 {
   "plugins": {
+    "posthtml-include": {},
     "posthtml-component": {
       "root": "./src/components"
     },
-    "posthtml-include": {},
     "posthtml-markdownit": {}
   }
 }

src/components/project.html

@@ -12,14 +12,9 @@
 <div class="project">
   <div class="project-title" style="{{titlestyle}}">
     <a href="{{href}}" target="_blank">
-      <if condition="img != ''">
-        <img class="figure" src="{{img}}">
-      </if>
-      <if condition="svg != ''">
-        <div class="figure">
-          <include src="{{svg}}"></include>
-        </div>
-      </if>
+      <div class="figure">
+        <slot:img></slot:img>
+      </div>
       <if condition="text != ''">
         <p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
       </if>

src/index.html

@@ -131,7 +131,9 @@
       <center>
         <img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
       </center>
-      <div id="tabs" hx-get="/projects.html" hx-trigger="load delay:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
+      <div id="tabs" hx-target="#tabs" hx-swap="innerHTML">
+        <include src="src/projects.html"></include>
+      </div>
     </div>
     <div style="background-color: #484848;">
       <p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>

src/projects.html

@@ -4,7 +4,10 @@
       Wow, such professionalism! What are these guys working on now?
     </x-blockquote>
   </x-section-head>
-  <x-project img="/assets/tysoncloud.svg" href="https://github.com/timmyjinks/TYSONCLOUD">
+  <x-project href="https://github.com/timmyjinks/TYSONCLOUD">
+    <fill:img>
+      <img src="/assets/tysoncloud.svg">
+    </fill:img>
     <fill:title># TYSONCLOUD</fill:title>
     <fill:subtitle>## When she compute your serve 'till you edge</fill:subtitle>
     <fill:description>
@@ -17,8 +20,11 @@
       </markdown>
     </fill:description>
   </x-project>
-  <x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
-    class="project-alt" titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
+  <x-project href="https://github.com/richgrov/simulo" onclick="spaghetti()" class="project-alt"
+    titlestyle="font-family: 'Apex Mk2'" headerstyle="font-family: 'Apex Mk2'">
+    <fill:img>
+      <img src="/assets/simulo.svg">
+    </fill:img>
     <fill:title># Simulo</fill:title>
     <fill:subtitle>
       ## Roblox for the real world!
@@ -39,7 +45,10 @@
       </div>
     </fill:description>
   </x-project>
-  <x-project svg="assets/c0re.svg" href="https://c0re.com">
+  <x-project href="https://c0re.com">
+    <fill:img>
+      <include src="assets/c0re.svg"></include>
+    </fill:img>
     <fill:title>
       # c0re
       #### So shiny!
@@ -83,8 +92,11 @@
   <x-blockquote cite="The Washington Post">
     Please stop sending your projects to the review department
   </x-blockquote>
-  <x-project svg="assets/braindance.svg" href="https://braindance.live" class="project-alt"
+  <x-project href="https://braindance.live" class="project-alt"
     titlestyle="background-image: linear-gradient(to right, oklch(0.714 0.203 305.504) 0px, oklch(0.718 0.202 349.761) 100%); background-clip: text; color: transparent">
+    <fill:img>
+      <img src="/assets/braindance.svg">
+    </fill:img>
     <fill:title># Braindance</fill:title>
     <fill:subtitle>## Bringing the Coachella to you!</fill:subtitle>
     <fill:description>

src/style.css

@@ -108,8 +108,7 @@ html {
   border-bottom: solid 6px #eee;
 }
 
-img.figure,
-.figure>svg {
+.figure>* {
   width: 80%;
 }