Add footnotes plugin

_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;

_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>
+      }
     </>
   );
 }

_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;
+  }
+}