From 1a6877e91d1117daf974df0022d3651031f3cce2 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Wed, 9 Jul 2025 17:14:32 -0600
Subject: [PATCH] Implement routing

---
 package.json                             |   2 +-
 src/{index.html => components/head.html} |   2 +-
 src/components/tab-content.html          |  14 ++-
 src/interests.html                       |  15 +--
 src/partials/interests.html              |  12 ++
 src/partials/projects.html               | 143 ++++++++++++++++++++++
 src/partials/who_we_are.html             |  12 ++
 src/projects.html                        | 146 +----------------------
 src/who_we_are.html                      |  15 +--
 9 files changed, 186 insertions(+), 175 deletions(-)
 rename src/{index.html => components/head.html} (99%)
 create mode 100644 src/partials/interests.html
 create mode 100644 src/partials/projects.html
 create mode 100644 src/partials/who_we_are.html

diff --git a/package.json b/package.json
index bb737f1..37c8f37 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "thesandwich",
   "private": true,
   "version": "0.0.0",
-  "source": "src/*.html",
+  "source": ["src/*.html", "src/partials/*.html"],
   "scripts": {
     "start": "parcel",
     "build": "parcel build"
diff --git a/src/index.html b/src/components/head.html
similarity index 99%
rename from src/index.html
rename to src/components/head.html
index fc9f907..120af14 100644
--- a/src/index.html
+++ b/src/components/head.html
@@ -132,7 +132,7 @@
         <img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
       </center>
       <div id="tabs" hx-target="#tabs" hx-swap="innerHTML">
-        <include src="src/projects.html"></include>
+        <yield></yield>
       </div>
     </div>
     <div style="background-color: #484848;">
diff --git a/src/components/tab-content.html b/src/components/tab-content.html
index 8ed595d..4b23372 100644
--- a/src/components/tab-content.html
+++ b/src/components/tab-content.html
@@ -4,13 +4,15 @@
   }
 </script>
 <nav class="tab-list" role="tablist" hx-indicator="#indicator">
-  <button hx-get="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
-    aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
+  <button hx-get="/partials/projects.html" hx-push-url="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}"
+    role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
     Projects</button>
-  <button hx-get="/who_we_are.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
-    aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Who we are</button>
-  <button hx-get="/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/who_we_are.html" hx-push-url="/who_we_are.html"
+    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
+    aria-controls="tab-content">Who we are</button>
+  <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>
 </nav>
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">
diff --git a/src/interests.html b/src/interests.html
index ff5d517..df0a091 100644
--- a/src/interests.html
+++ b/src/interests.html
@@ -1,12 +1,3 @@
-<x-tab-content selected="2">
-  <x-section-head header="Shoutouts to cool things!">
-    <x-blockquote cite="Tyson Jenkins (CEO of Tysoncloud)">
-      That's crazy
-    </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>
\ No newline at end of file
+<x-head>
+  <include src="src/partials/interests.html"></include>
+</x-head>
\ No newline at end of file
diff --git a/src/partials/interests.html b/src/partials/interests.html
new file mode 100644
index 0000000..ff5d517
--- /dev/null
+++ b/src/partials/interests.html
@@ -0,0 +1,12 @@
+<x-tab-content selected="2">
+  <x-section-head header="Shoutouts to cool things!">
+    <x-blockquote cite="Tyson Jenkins (CEO of Tysoncloud)">
+      That's crazy
+    </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>
\ No newline at end of file
diff --git a/src/partials/projects.html b/src/partials/projects.html
new file mode 100644
index 0000000..f389e26
--- /dev/null
+++ b/src/partials/projects.html
@@ -0,0 +1,143 @@
+<x-tab-content selected="0">
+  <x-section-head header="Our projects">
+    <x-blockquote cite="You, just now">
+      Wow, such professionalism! What are these guys working on now?
+    </x-blockquote>
+  </x-section-head>
+  <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>
+      <markdown>
+        Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
+        AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
+
+        No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
+        cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!
+      </markdown>
+    </fill:description>
+  </x-project>
+  <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!
+      #### (what could go wrong?)
+    </fill:subtitle>
+    <fill:description>
+      <div style="font-family: monospace;">
+        <markdown>
+          Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? Bring your IRL game ideas to
+          life
+          with **Simulo**! It's like using the *Earth* as your game engine! You
+          don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
+          come to life!
+
+          Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
+          MacBook or Linux machine! Anyone can use Simulo.
+        </markdown>
+      </div>
+    </fill:description>
+  </x-project>
+  <x-project href="https://c0re.com">
+    <fill:img>
+      <include src="assets/c0re.svg"></include>
+    </fill:img>
+    <fill:title>
+      # c0re
+      #### So shiny!
+    </fill:title>
+    <fill:subtitle>## Git gud scrub!</fill:subtitle>
+    <fill:description>
+      <markdown>
+        Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
+        peers in every possible area and become objectively and quantifiably the _best_ person.
+      </markdown>
+      <p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
+      <script>
+        // Code from https://www.w3schools.com/howto/howto_js_countdown.asp
+        // Set the date we're counting down to
+        var countDownDate = new Date("March 7, 2025").getTime();
+
+        function countup() {
+          // Get today's date and time
+          var now = new Date().getTime();
+
+          // Find the distance between now and the count down date
+          var distance = now - countDownDate;
+
+          // Time calculations for days, hours, minutes and seconds
+          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+          var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+          document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
+            + minutes + "m " + seconds + "s ";
+
+
+        }
+        countup();
+        // Update the count down every 1 second
+        var x = setInterval(countup, 1000);
+      </script>
+    </fill:description>
+  </x-project>
+  <x-blockquote cite="The Washington Post">
+    Please stop sending your projects to the review department
+  </x-blockquote>
+  <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>
+      <markdown>
+        Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
+        you can with Braindance! No better way exists to transmit concert vibes directly into your home
+
+        (Braindance
+        is not responsible for destruction of property due to moshpits materializing in your home).
+      </markdown>
+    </fill:description>
+  </x-project>
+  <x-project text="e" href="https://github.com/StratusFearMe21/grezi-next">
+    <fill:title># Grezi</fill:title>
+    <fill:subtitle>## When the power is point</fill:subtitle>
+    <fill:description>
+      <markdown>
+        Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
+        presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
+        markup
+        language!
+
+        Instead of dragging elements around on your slides, you can open your notepad and make silly
+        text move
+        on the screen with plain text. What an incredible innovation!
+      </markdown>
+    </fill:description>
+  </x-project>
+  <x-project text="?" class="project-alt">
+    <fill:title># Mystery</fill:title>
+    <fill:subtitle>## _Oooooooo_</fill:subtitle>
+    <fill:description>
+      <markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
+      <form hx-post="/api/speculate" hx-target="#speculation-result">
+        <label for="speculation">
+          Speculate about the <i>secret</i> project below:
+        </label><br>
+        <textarea name="speculation" id="speculation"></textarea>
+        <input type="submit" value="Speculate!">
+      </form>
+      <div id="speculation-result"></div>
+    </fill:description>
+  </x-project>
+</x-tab-content>
\ No newline at end of file
diff --git a/src/partials/who_we_are.html b/src/partials/who_we_are.html
new file mode 100644
index 0000000..c8f8068
--- /dev/null
+++ b/src/partials/who_we_are.html
@@ -0,0 +1,12 @@
+<x-tab-content selected="1">
+  <x-section-head header="Who are these guys?">
+    <x-blockquote cite="Your mom, last night">
+      OMG these projects are so skibidi! I must know the rizzlers behind them!
+    </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>
\ No newline at end of file
diff --git a/src/projects.html b/src/projects.html
index f389e26..993b11b 100644
--- a/src/projects.html
+++ b/src/projects.html
@@ -1,143 +1,3 @@
-<x-tab-content selected="0">
-  <x-section-head header="Our projects">
-    <x-blockquote cite="You, just now">
-      Wow, such professionalism! What are these guys working on now?
-    </x-blockquote>
-  </x-section-head>
-  <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>
-      <markdown>
-        Have you ever just gone to a cloud service interface like Google Cloud Console, Microsoft Azure Portal, or
-        AWS Console, and just gone "...what? What am I even looking at? *Huh*?"
-
-        No more will you have to scrunkle your brain in these confusing interfaces to get access to fast, reliable
-        cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!
-      </markdown>
-    </fill:description>
-  </x-project>
-  <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!
-      #### (what could go wrong?)
-    </fill:subtitle>
-    <fill:description>
-      <div style="font-family: monospace;">
-        <markdown>
-          Are you a hot sweaty gamer looking to get hot and sweaty but in a good way? Bring your IRL game ideas to
-          life
-          with **Simulo**! It's like using the *Earth* as your game engine! You
-          don't even need to learn Lua to get started, instead, just describe your game to the engine and watch it
-          come to life!
-
-          Simulo is the most accessible game engine by a longshot, you just need a $600 laser projector and a
-          MacBook or Linux machine! Anyone can use Simulo.
-        </markdown>
-      </div>
-    </fill:description>
-  </x-project>
-  <x-project href="https://c0re.com">
-    <fill:img>
-      <include src="assets/c0re.svg"></include>
-    </fill:img>
-    <fill:title>
-      # c0re
-      #### So shiny!
-    </fill:title>
-    <fill:subtitle>## Git gud scrub!</fill:subtitle>
-    <fill:description>
-      <markdown>
-        Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
-        peers in every possible area and become objectively and quantifiably the _best_ person.
-      </markdown>
-      <p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
-      <script>
-        // Code from https://www.w3schools.com/howto/howto_js_countdown.asp
-        // Set the date we're counting down to
-        var countDownDate = new Date("March 7, 2025").getTime();
-
-        function countup() {
-          // Get today's date and time
-          var now = new Date().getTime();
-
-          // Find the distance between now and the count down date
-          var distance = now - countDownDate;
-
-          // Time calculations for days, hours, minutes and seconds
-          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
-          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-          var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-          document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
-            + minutes + "m " + seconds + "s ";
-
-
-        }
-        countup();
-        // Update the count down every 1 second
-        var x = setInterval(countup, 1000);
-      </script>
-    </fill:description>
-  </x-project>
-  <x-blockquote cite="The Washington Post">
-    Please stop sending your projects to the review department
-  </x-blockquote>
-  <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>
-      <markdown>
-        Ever wanted to vibe to some skibidicore with the boys, but without actually being *with* the boys? Now
-        you can with Braindance! No better way exists to transmit concert vibes directly into your home
-
-        (Braindance
-        is not responsible for destruction of property due to moshpits materializing in your home).
-      </markdown>
-    </fill:description>
-  </x-project>
-  <x-project text="e" href="https://github.com/StratusFearMe21/grezi-next">
-    <fill:title># Grezi</fill:title>
-    <fill:subtitle>## When the power is point</fill:subtitle>
-    <fill:description>
-      <markdown>
-        Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
-        presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a bespoke
-        markup
-        language!
-
-        Instead of dragging elements around on your slides, you can open your notepad and make silly
-        text move
-        on the screen with plain text. What an incredible innovation!
-      </markdown>
-    </fill:description>
-  </x-project>
-  <x-project text="?" class="project-alt">
-    <fill:title># Mystery</fill:title>
-    <fill:subtitle>## _Oooooooo_</fill:subtitle>
-    <fill:description>
-      <markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
-      <form hx-post="/api/speculate" hx-target="#speculation-result">
-        <label for="speculation">
-          Speculate about the <i>secret</i> project below:
-        </label><br>
-        <textarea name="speculation" id="speculation"></textarea>
-        <input type="submit" value="Speculate!">
-      </form>
-      <div id="speculation-result"></div>
-    </fill:description>
-  </x-project>
-</x-tab-content>
\ No newline at end of file
+<x-head>
+  <include src="src/partials/projects.html"></include>
+</x-head>
\ No newline at end of file
diff --git a/src/who_we_are.html b/src/who_we_are.html
index c8f8068..8beed5d 100644
--- a/src/who_we_are.html
+++ b/src/who_we_are.html
@@ -1,12 +1,3 @@
-<x-tab-content selected="1">
-  <x-section-head header="Who are these guys?">
-    <x-blockquote cite="Your mom, last night">
-      OMG these projects are so skibidi! I must know the rizzlers behind them!
-    </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>
\ No newline at end of file
+<x-head>
+  <include src="src/partials/who_we_are.html"></include>
+</x-head>
\ No newline at end of file