site: footers

site.ts

@@ -89,7 +89,7 @@ site.process([".html"], (pages) => {
         let counter = 1;
 
         while (document.getElementById(textUnique)) {
-          counter++;
+          counter += 1;
           textUnique = `${textNormalized}-${counter}`;
         }
 
@@ -101,6 +101,60 @@ site.process([".html"], (pages) => {
         header.parentNode!.insertBefore(link, header);
         link.appendChild(header);
       });
+
+    const footnotes = document.querySelector("#footnotes");
+    if (footnotes) {
+      let counter = 0;
+
+      document.querySelectorAll("p").forEach((paragraph) => {
+        const matches = paragraph.innerHTML.match(/\[\^([^\]]*)\]/g);
+        if (!matches) return;
+
+        let newHTML = paragraph.innerHTML;
+
+        matches.forEach((match) => {
+          const footnoteText = match.slice(2, -1);
+
+          let number;
+          let addFooter;
+
+          if (footnoteText.match(/^[1-9]+$/g)) {
+            number = parseInt(footnoteText);
+            addFooter = false;
+          } else {
+            counter += 1;
+            number = counter;
+            addFooter = true;
+          }
+
+          const anchorId = `ref:${counter}`;
+          const footnoteId = `fn:${counter}`;
+
+          const link =
+            `<sup><a id="${anchorId}" href="#${footnoteId}">^${number}</a></sup>`;
+          newHTML = newHTML.replace(match, link);
+
+          if (addFooter) {
+            const hr = document.createElement("hr");
+            hr.classList.add("my-1.5");
+
+            const li = document.createElement("li");
+            li.id = footnoteId;
+            li.innerHTML =
+              `${footnoteText}<sub><a href="#${anchorId}">..?</a></sub>`;
+
+            footnotes.appendChild(hr);
+            footnotes.appendChild(li);
+          }
+        });
+
+        paragraph.innerHTML = newHTML;
+      });
+
+      if (counter === 0) {
+        footnotes.remove();
+      }
+    }
   });
 });
 

site/_includes/text.vto

@@ -31,6 +31,8 @@ layout: default.vto
 {{> const padding = 4 }}
 <div class="text-content text-xl p-{{ padding }} pt-{{ padding + 13.5 }}">
   {{ content }}
+
+  <ol id="footnotes"></ol>
 </div>
 
 <footer class="flex justify-center text-sm wrap-anywhere mt-auto p-1.5 pb-2 border-t-4 border-x-4">

site/assets/css/default.css

@@ -246,15 +246,27 @@ html, body {
       dark:bg-[#111];
   }
 
+  ol {
+    & li {
+      counter-increment: item;
+    }
+
+    & li::before {
+      @apply pr-1;
+
+      content: "[" counter(item) "]";
+    }
+  }
+
   li {
     @apply relative pl-4;
 
-    &::before {
+    ul &::before {
       @apply content-[""] absolute left-0 size-2 top-1/2 -translate-y-1/3
         rotate-45 border-t-2 border-r-2 border-black dark:border-white;
     }
 
-    &:hover {
+    ul &:hover {
       &::before {
         @apply size-4 -translate-x-2/3 border-[red] dark:border-[yellow];
       }

site/blog.vto

@@ -171,7 +171,7 @@ Blog Articles
           }
 
           let { y: yCopy } = strip;
-          for (let i = 0; i < 20; i++) {
+          for (let i = 0; i < 20; i += 1) {
             switch (true) {
               case i < 1:  context.fillStyle = "#cefbe4"; break;
               case i < 2:  context.fillStyle = "#81ec72"; break;

site/blog/test.md

@@ -7,7 +7,7 @@ draft: true
 
 # Test
 
-I randomly test CSS styles here. That means nothing to see.
+I randomly test CSS styles here. That means nothing to see.[^footer nr 1][^11]
 
 | pid   | ppid  | name                                                                                                                       | status   | cpu                | mem      | virtual  |
 | ----- | ----- | -------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------ | -------- | -------- |