add support for (accessible) footnotes

.eleventy.js

@@ -8,6 +8,7 @@ const related = require("eleventy-plugin-related");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 const sass = require("sass");
+const footnotes = require('eleventy-plugin-footnotes');
 
 const figure = require('./src/_includes/components/figure.js');
 const bounce = require('./src/_includes/components/bounce.js');
@@ -37,6 +38,10 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addPlugin(timeToRead);
   eleventyConfig.addPlugin(safeLinks);
+  eleventyConfig.addPlugin(footnotes, {
+    "title": "footnotes",
+    "baseClass": "footnotes"
+  });
 
   eleventyConfig.addShortcode('figure', figure(md));
   eleventyConfig.addShortcode('bounce', bounce);

package-lock.json

@@ -12,6 +12,7 @@
                 "@11ty/eleventy-plugin-rss": "^1.2.0",
                 "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
                 "@sardine/eleventy-plugin-external-links": "^1.4.0",
+                "eleventy-plugin-footnotes": "^0.11.0",
                 "eleventy-plugin-related": "^1.0.6",
                 "eleventy-plugin-time-to-read": "^1.3.0",
                 "markdown-it": "^13.0.2",
@@ -583,6 +584,14 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/clsx": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+            "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -788,6 +797,14 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/eleventy-plugin-footnotes": {
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/eleventy-plugin-footnotes/-/eleventy-plugin-footnotes-0.11.0.tgz",
+            "integrity": "sha512-NQd6jNPekxIhESIIWPKUv2XXoYYknfDG8KjCdftSMGquncu1u9StVIDPmBinPChl4l68d8qTgmMXyM7kRxwGsg==",
+            "dependencies": {
+                "clsx": "^1.1.1"
+            }
+        },
         "node_modules/eleventy-plugin-related": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/eleventy-plugin-related/-/eleventy-plugin-related-1.0.6.tgz",

package.json

@@ -12,6 +12,7 @@
         "@11ty/eleventy-plugin-rss": "^1.2.0",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@sardine/eleventy-plugin-external-links": "^1.4.0",
+        "eleventy-plugin-footnotes": "^0.11.0",
         "eleventy-plugin-related": "^1.0.6",
         "eleventy-plugin-time-to-read": "^1.3.0",
         "markdown-it": "^13.0.2",

src/_includes/layouts/post.njk

@@ -40,6 +40,7 @@ subhead: blog
             </div>
         {% endif %}
         {{ content | safe }}
+        {% footnotes %}
         <a class="banner-link" href="https://ko-fi.com/nyancrimew">
             <div class="kofi-banner">
                 if you enjoyed this or any of my other work feel free to support me on my <span class="like-a">ko-fi</span>. this is my only real source of income so anything goes a long way,

src/css/style.scss

@@ -72,6 +72,7 @@ footer,
   margin-right: auto;
   padding-top: 2em;
   padding-bottom: 2em;
+  counter-reset: footnotes;
 }
 
 table {
@@ -292,4 +293,48 @@ blockquote.greentext::after {
 .sleepy-zone-webring-next-site a::after {
   content: "→";
   margin-inline-start: 1ch;
+}
+
+/**
+ * Inline footnotes references
+ * 1. Increment the counter at each new reference
+ * 2. Reset link styles to make it appear like regular text
+ */
+a[aria-describedby="footnotes-label"] {
+  counter-increment: footnotes; /* 1 */
+  text-decoration: none; /* 2 */
+  color: inherit; /* 2 */
+  cursor: default; /* 2 */
+  outline: none; /* 2 */
+}
+
+/**
+ * Actual numbered references
+ * 1. Display the current state of the counter (e.g. `[1]`)
+ * 2. Align text as superscript
+ * 3. Make the number smaller (since it's superscript)
+ * 4. Slightly offset the number from the text
+ * 5. Reset link styles on the number to show it's usable
+ */
+a[aria-describedby="footnotes-label"]::after {
+  content: '[' counter(footnotes) ']'; /* 1 */
+  vertical-align: super; /* 2 */
+  font-size: 0.85em; /* 3 */
+  margin-left: 2px; /* 4 */
+  color: $accent; /* 5 */
+  text-decoration: underline; /* 5 */
+  cursor: pointer; /* 5 */
+}
+
+/**
+ * Resetting the default focused styles on the number
+ */
+a[aria-describedby="footnotes-label"]:focus::after {
+  outline: thin dotted;
+  outline-offset: 2px;
+}
+
+.footnotes {
+  text-align: unset;
+  padding-top: initial;
 }