Add footnotes to pages

.posthtmlrc

@@ -4,6 +4,13 @@
     "posthtml-component": {
       "root": "./src/components"
     },
-    "posthtml-markdownit": {}
+    "posthtml-markdownit": {
+      plugins: [
+        {
+          "plugin": "markdown-it-sup",
+          "options": {}
+        }
+      ]
+    }
   }
 }

package.json

@@ -15,6 +15,7 @@
     "@parcel/compressor-brotli": "^2.15.4",
     "@parcel/compressor-gzip": "^2.15.4",
     "@parcel/config-default": "^2.15.4",
+    "markdown-it-sup": "^2.0.0",
     "parcel": "^2.15.4",
     "posthtml": "^0.16.6",
     "posthtml-component": "^2.2.0",

pnpm-lock.yaml

@@ -24,6 +24,9 @@ importers:
       '@parcel/config-default':
         specifier: ^2.15.4
         version: 2.15.4(@parcel/core@2.15.4(@swc/helpers@0.5.17))(@swc/helpers@0.5.17)
+      markdown-it-sup:
+        specifier: ^2.0.0
+        version: 2.0.0
       parcel:
         specifier: ^2.15.4
         version: 2.15.4(@swc/helpers@0.5.17)
@@ -801,6 +804,9 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  markdown-it-sup@2.0.0:
+    resolution: {integrity: sha512-5VgmdKlkBd8sgXuoDoxMpiU+BiEt3I49GItBzzw7Mxq9CxvnhE/k09HFli09zgfFDRixDQDfDxi0mgBCXtaTvA==}
+
   markdown-it@14.1.0:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
@@ -1938,6 +1944,8 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  markdown-it-sup@2.0.0: {}
+
   markdown-it@14.1.0:
     dependencies:
       argparse: 2.0.1

src/components/head.html

@@ -133,9 +133,6 @@
         <yield></yield>
       </div>
     </div>
-    <div style="background-color: #484848;">
-      <p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
-    </div>
   </center>
 
   <style>

src/components/tab-content.html

@@ -17,4 +17,11 @@
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">
   <yield></yield>
+</div>
+<div id="footer">
+  <hr class="footnotes-sep">
+  <section class="footnotes">
+    <slot:footer></slot:footer>
+    <p>Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
+  </section>
 </div>

src/partials/interests.html

@@ -1,6 +1,6 @@
 <x-tab-content selected="2">
   <x-section-head header="Shoutouts to cool things!">
-    <x-blockquote cite="Tyson Jenkins (CEO of Tysoncloud)">
+    <x-blockquote cite="Tyson Jenkins (CEO of TYSONCLOUD)">
       That's crazy
     </x-blockquote>
   </x-section-head>

src/partials/projects.html

@@ -16,7 +16,7 @@
         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!
+        cloud, with **TYSONCLOUD**. Just input a docker container, and hit go!^1^
       </markdown>
     </fill:description>
   </x-project>
@@ -39,8 +39,7 @@
           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.
+          Simulo is the most accessible game engine by a longshot^2^! Anyone can use Simulo, try it out today!.
         </markdown>
       </div>
     </fill:description>
@@ -65,6 +64,8 @@
         // Set the date we're counting down to
         var countDownDate = new Date("March 7, 2025").getTime();
 
+        // Update the count down every 1 second
+        var x = setInterval(countup, 1000);
         function countup() {
           // Get today's date and time
           var now = new Date().getTime();
@@ -82,13 +83,11 @@
           if (countup != null) {
             countup.innerHTML = days + "d " + hours + "h "
               + minutes + "m " + seconds + "s ";
+          } else {
+            clearInterval(x)
           }
-
-
         }
         countup();
-        // Update the count down every 1 second
-        var x = setInterval(countup, 1000);
       </script>
     </fill:description>
   </x-project>
@@ -105,10 +104,7 @@
     <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).
+        you can with Braindance! No better way exists to transmit concert vibes directly into your home^3^
       </markdown>
     </fill:description>
   </x-project>
@@ -143,4 +139,24 @@
       <div id="speculation-result"></div>
     </fill:description>
   </x-project>
+  <fill:footer>
+    <ol class="footnotes-list">
+      <li class="footnote-item">TYSONCLOUD™ just works as long as the docker containers you deploy also just work
+        and
+        deploy as an HTTP service. If it doesn't deploy to TYSONCLOUD, it probably isn't worth your time, or you
+        just
+        have a skill issue. For more information about diagnosing skill issues, please cry me a river at +1 (385)
+        429-0198</li>
+      <li class="footnote-item">Simulo™ requires a $600 laser projector and a
+        MacBook to get started. You could also use a Linux machine, but... come on, you're not going to do that. Simulo™
+        also may not be accessible to those with photosensitive epilepsy, or scaccariaphobia.</li>
+      <li class="footnote-item">Braindance™ is not responsible for destruction of property due to moshpits
+        materializing in your home. Braindance™ is also not responsible for the erasure of all alcoholic beverages
+        within a 5 mile radius due to the usage of Braindance™, the vibes consume all, and this is not the
+        fault of Braindance™. Want a break from the ads? If you tap now to watch a short video, you'll receive 30
+        minutes of ad-free music. Yes, really! If you tap now to watch a short video, you'll receive 30 minutes of
+        <i>ad-free</i> music.
+      </li>
+    </ol>
+  </fill:footer>
 </x-tab-content>

src/style.css

@@ -78,6 +78,19 @@ html {
   z-index: 1;
 }
 
+#footer {
+  background-color: #484848;
+}
+
+#footer p,
+#footer li {
+  font-size: 8pt;
+}
+
+.footnotes {
+  padding: 0 40;
+}
+
 .project {
   background-color: #484848;
   padding: 16px 24px;
@@ -149,6 +162,10 @@ p {
   text-align: left;
 }
 
+ol {
+  padding: 0;
+}
+
 form {
   text-align: left;
 }