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

deno.lock

@@ -1678,6 +1678,8 @@
     "https://deno.land/x/lume@v1.19.4/plugins/url.ts": "43d3d47896a7322a8dd34572dedb4baa6f73a382594a2ff7c34a3a064dcc6c9e",
     "https://deno.land/x/lume@v1.19.4/plugins/utils.ts": "6435d164539d9e408e7e818b080cc1a96ff76ed3c376160577a7df751b57fa07",
     "https://deno.land/x/lume@v1.19.4/plugins/yaml.ts": "df24aac4098dba258f1ac331a3b16ba488a336eb63c51afed8f59201228d583c",
+    "https://deno.land/x/lume_markdown_plugins@v0.6.0/footnotes.ts": "ae50e761514c9d14f0c6828c23054c128ee240e9ba008f0acf929ce5b2081fd6",
+    "https://deno.land/x/lume_markdown_plugins@v0.6.0/footnotes/mod.ts": "f1d3acc25fef68febfa027c15605102635113dec9f9683bc39ae1af47a9d6ed1",
     "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts": "2f1a336fd8faea717d830b53b1b9e6990173ff056fb6e2e979c8b1ac22a5bac9",
     "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/anchors.ts": "8a4a1c6b2c63156622695ceba57fa7100a6e5f109c9a383a1dcaf755233c8184",
     "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/mod.ts": "8c7aa6e1dcfabda4264503495a3875388108cd9a5a94b54853b45a8e8cba9f78",