Add Markdown footnotes

lib/markdown.ts

@@ -1,4 +1,5 @@
 import MarkdownIt from "markdown-it";
+import MarkdownItFootnote from "markdown-it-footnote";
 import slugify from "@sindresorhus/slugify";
 import * as util from "./util";
 
@@ -8,6 +9,8 @@ const md = new MarkdownIt({
 	typographer: true
 });
 
+md.use(MarkdownItFootnote);
+
 // Inserts heading anchors
 // Based on https://github.com/valeriangalliat/markdown-it-anchor
 md.core.ruler.push("anchor", (state) => {

package-lock.json

@@ -1467,6 +1467,11 @@
         "uc.micro": "^1.0.5"
       }
     },
+    "markdown-it-footnote": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.2.tgz",
+      "integrity": "sha512-JVW6fCmZWjvMdDQSbOT3nnOQtd9iAXmw7hTSh26+v42BnvXeVyGMDBm5b/EZocMed2MbCAHiTX632vY0FyGB8A=="
+    },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",

package.json

@@ -26,6 +26,7 @@
 		"express": "^4.16.4",
 		"highlight.js": "^9.13.1",
 		"markdown-it": "^8.4.2",
+		"markdown-it-footnote": "^3.0.2",
 		"morgan": "^1.9.1",
 		"node-sass": "^4.12.0",
 		"pg": "^7.11.0",

site/css/main.scss

@@ -101,6 +101,13 @@ article {
 		h1 { font-size: 1.8rem; }
 		h2 { font-size: 1.6rem; }
 
+		hr.footnotes-sep {
+			border: none;
+			height: 1px;
+			background: var(--accent-color);
+		}
+
+		// Markdown decorations
 		@media (min-width: 768px) {
 			a::before { content: "["; }
 			a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
@@ -110,6 +117,11 @@ article {
 				font-size: 14px;
 			}
 			a { text-decoration: none; }
+			sup.footnote-ref > a::before,
+			sup.footnote-ref > a::after,
+			a.footnote-backref::before, a.footnote-backref::after {
+				content: "";
+			}
 		}
 		code::before, code::after {
 			content: "`";