From 8439f366c829130aa8314b19834cc19595199453 Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Sun, 3 Dec 2023 13:11:01 -0500
Subject: [PATCH] Add footnotes plugin

---
 _config.ts                 |   2 ++
 _includes/layouts/post.tsx |  12 +++++++++++-
 _includes/styles/base.scss |  32 ++++++++++++++++++++++++++++++++
 deno.lock                  | Bin 190961 -> 191239 bytes
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/_config.ts b/_config.ts
index e2328bb..163eaad 100644
--- a/_config.ts
+++ b/_config.ts
@@ -5,6 +5,7 @@ import sass from "lume/plugins/sass.ts";
 import feed from "lume/plugins/feed.ts";
 import code_highlight from "lume/plugins/code_highlight.ts";
 import toc from "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts";
+import footnotes from "https://deno.land/x/lume_markdown_plugins@v0.6.0/footnotes.ts";
 
 import lang_typescript from "npm:highlight.js/lib/languages/typescript";
 import lang_javascript from "npm:highlight.js/lib/languages/javascript";
@@ -56,5 +57,6 @@ site.use(toc({
     lowercase: true,
   },
 }));
+site.use(footnotes());
 
 export default site;
diff --git a/_includes/layouts/post.tsx b/_includes/layouts/post.tsx
index 3556ead..9c4aad2 100644
--- a/_includes/layouts/post.tsx
+++ b/_includes/layouts/post.tsx
@@ -1,6 +1,6 @@
 export const layout = "./base.tsx";
 
-export default function({ children, toc }) {
+export default function({ children, toc, footnotes }) {
   return (
     <>
       { toc.length > 0 &&
@@ -27,6 +27,16 @@ export default function({ children, toc }) {
       <article>
         { children }
       </article>
+      { footnotes.length > 0 &&
+        <ol className="footnotes">
+          {footnotes.map(note => (
+            <li id={note.id}>
+              <span dangerouslySetInnerHTML={{ __html: note.content }} className="footnote-content"/>
+              <a href={`#${note.refId}`} className="footnote-backref">&#x21A9;</a>
+            </li>
+          ))}
+        </ol>
+      }
     </>
   );
 }
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 43cbc01..d2e9fbc 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -61,6 +61,20 @@ p {
 
 a {
   color: var(--color-links);
+  &.footnote-ref {
+    text-decoration: none;
+  }
+  &.footnote-ref:hover {
+    text-decoration: underline;
+  }
+  &.footnote-ref::before {
+    content: "[";
+  }
+  &.footnote-ref::after {
+    content: "]";
+  }
+  &.footnote-backref {
+  }
 }
 
 img {
@@ -303,3 +317,21 @@ nav.toc {
     padding-left: 1rem;
   }
 }
+
+ol.footnotes {
+  margin-top: 3rem;
+  margin-bottom: 0;
+  padding: 1rem;
+  border-top: 1px solid var(--color-black);
+  font-family: var(--font--sans-serif-alt);
+  line-height: normal;
+  li {
+    font-size: 0.95rem;
+    p {
+      display: inline-block;
+    }
+  }
+  a.footnote-backref {
+    margin-left: 0.3rem;
+  }
+}
diff --git a/deno.lock b/deno.lock
index 3a4420945d15319047e7c393447c2dfdc1fd2e28..bf8a338a8e5444f1025063691c0c36bb09db4cd1 100644
GIT binary patch
delta 197
zcmX}kJq`g;5CGuVRw7aA*aI*#?`PjrsMH#T`t7`#jxFo~6cVL!4??1L28qTg+<-!S
z2l(EP{^{929DCPd^IB=sw7aI2{j}Ye^KqHPfm9wHT8<g50{cLL$$+zr6hz2^#5w^4
zg~S>uvbdTcpmxJ^QFe=0F<SrQ*|y2QTrr!(Oio38P^mQmRgBJqLm+P)qRGNhqYtKL
W6O&+4Tcw!2<nF#KCb#c?8GHa_s6CAU

delta 19
bcmZp_#{Ka!cS8%~7N+pq+jH+Q&Ef+9U6TmU