From 8df28666e324f9253acd0166826478d3a100e575 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Wed, 9 Jul 2025 14:22:16 -0600
Subject: [PATCH] Inline projects page into index.html

---
 .posthtmlrc                 |  2 +-
 src/components/project.html | 11 +++--------
 src/index.html              |  4 +++-
 src/projects.html           | 22 +++++++++++++++++-----
 src/style.css               |  3 +--
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/.posthtmlrc b/.posthtmlrc
index 94aec39..cb99e2e 100644
--- a/.posthtmlrc
+++ b/.posthtmlrc
@@ -1,9 +1,9 @@
 {
   "plugins": {
+    "posthtml-include": {},
     "posthtml-component": {
       "root": "./src/components"
     },
-    "posthtml-include": {},
     "posthtml-markdownit": {}
   }
 }
diff --git a/src/components/project.html b/src/components/project.html
index 64e3d71..3bb706f 100644
--- a/src/components/project.html
+++ b/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>
diff --git a/src/index.html b/src/index.html
index c3a72be..b128e38 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/projects.html b/src/projects.html
index 2514a01..f389e26 100644
--- a/src/projects.html
+++ b/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>
diff --git a/src/style.css b/src/style.css
index 5518ad7..396160c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -108,8 +108,7 @@ html {
   border-bottom: solid 6px #eee;
 }
 
-img.figure,
-.figure>svg {
+.figure>* {
   width: 80%;
 }