big ol toc update

_includes/layouts/post-with-toc.njk

@@ -0,0 +1,13 @@
+---
+layout: post.njk
+---
+{% css %}{% include "css/post-toc.css" %}{% endcss %}
+
+<aside id="toc">
+  <details>
+    <summary><h2>table of contents</h2></summary>
+    {{ content | toc | safe }}
+  </details>
+</aside>
+
+{{ content | safe }}

css/main.css

@@ -9,6 +9,8 @@
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
+	/* if you change the header font, go to post-toc.css and fuck about with the width
+		of the table of contents */
 	--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
 	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
 
@@ -67,7 +69,6 @@
 }
 
 /* Base */
-
 * {
 	box-sizing: border-box;
 	margin: 0;

css/post-toc.css

@@ -0,0 +1,73 @@
+#toc {
+	float: right;
+	margin: 1rem 0 1.5rem 1.5rem;
+	width: min(calc(100% - 1.5rem), 23rem);
+		/* 23rem is the width of the words 'table of contents' in my header font */
+		/* yes, it's a bit hacky */
+}
+
+@media (max-width: 850px) {
+	#toc {
+		float: unset;
+		margin-top: 2rem;
+		margin-left: .5rem;
+		width: calc(100% - .5rem);
+	}
+}
+
+#toc details {
+	border: thick solid var(--color-pink);
+	border-radius: 1rem;
+	margin-top: 1rem;
+}
+
+#toc summary {
+	position: relative;
+	top: -1.5rem;
+	left: -.75rem;
+	width: fit-content;
+	background: var(--color-bg);
+	border-radius: .5rem;
+}
+
+#toc summary:focus-visible {
+	outline: .15rem solid var(--color-teal);
+}
+
+#toc summary::marker {
+	font-size: 2.35rem;
+}
+
+#toc h2 {
+	margin-top: 0;
+	display: inline;
+	line-height: normal;
+}
+
+#toc nav {
+	position: relative;
+	top: -1.25rem;
+}
+
+#toc li {
+	margin-block: .45rem 0;
+}
+
+@media (max-width: 650px) {
+	#toc nav > ol {
+		margin-left: .5rem;
+	}
+}
+
+/* basically we want to style this `ol` as a `ul` */
+#toc ol > li {
+	list-style: disc;
+}
+
+#toc ol > li > ol > li {
+	list-style: circle;
+}
+
+#toc ol > li > ol > li > ol > li {
+	list-style: square;
+}

eleventy.config.js

@@ -1,11 +1,13 @@
-import { IdAttributePlugin } from "@11ty/eleventy";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import { feedPlugin } from "@11ty/eleventy-plugin-rss";
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 
+import toc from "eleventy-plugin-nesting-toc";
+
 import { attrs } from "@mdit/plugin-attrs";
 import { markdownitLinkAttributes } from 'markdown-it-link-attributes';
+import markdownitIdAttributes from "markdown-it-anchor";
 
 import path from "node:path";
 import { execSync } from 'child_process';
@@ -18,7 +20,7 @@ export default async function(eleventyConfig) {
 	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(attrs));
 
 	/* Markdown apply target="_blank" to all external links */
-	const milaOptions = {
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, {
     matcher(href) {
       return href.match(/^https?:\/\//);
     },
@@ -26,8 +28,13 @@ export default async function(eleventyConfig) {
       target: "_blank",
       rel: "external",
     },
-  };
+  }));
-	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, milaOptions));
+
+	/* Markdown apply ID attributes to headers */
+	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitIdAttributes, {
+		level: [2, 3, 4],
+		tabIndex: false,
+	}));
 
 	/* Bundles */
 	/* CSS */
@@ -128,12 +135,12 @@ export default async function(eleventyConfig) {
 	/* Navigation */
 	eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
-	/* `id` attributes */
-	eleventyConfig.addPlugin(IdAttributePlugin);
-
 	/* Syntax highlighting */
 	eleventyConfig.addPlugin(syntaxHighlight);
 
+	/* Table of contents */
+	eleventyConfig.addPlugin(toc);
+
 	/* Draft handling */
 	eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
 		if (data.draft) {

package-lock.json

@@ -17,8 +17,11 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
         "@mdit/plugin-attrs": "^0.24.2",
         "@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
+        "cheerio": "^1.2.0",
+        "eleventy-plugin-nesting-toc": "^1.3.0",
         "lodash-es": "^4.17.23",
         "luxon": "^3.7.2",
+        "markdown-it-anchor": "^10.0.0",
         "markdown-it-link-attributes": "https://github.com/lee0c/markdown-it-link-attributes/tarball/main",
         "pagefind": "^1.5.2"
       }
@@ -1108,6 +1111,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.21",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz",
@@ -1145,6 +1155,201 @@
         "node": ">= 10.16.0"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.2.0.tgz",
+      "integrity": "sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "encoding-sniffer": "^0.2.1",
+        "htmlparser2": "^10.1.0",
+        "parse5": "^7.3.0",
+        "parse5-htmlparser2-tree-adapter": "^7.1.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^7.19.0",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1232,6 +1437,95 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/css-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/css-select/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/css-select/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1362,6 +1656,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/eleventy-plugin-nesting-toc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-nesting-toc/-/eleventy-plugin-nesting-toc-1.3.0.tgz",
+      "integrity": "sha512-WZzVkz28nw3A0DpJFQWXZzQxniyjvOZKxVix5x7WVAS0H1OD1hYJbR0go/Lr1kK2SrmxfbsUHUlekR+mQPvqMA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cheerio": "^1.0.0-rc.3"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -1372,6 +1676,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -1708,6 +2026,19 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/image-size": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
@@ -1994,6 +2325,17 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/markdown-it-anchor": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-10.0.0.tgz",
+      "integrity": "sha512-Q8g7Z6OBdH3eXF0lujFqukIxUvgCDZcjzCrJxmD6QiEzU1HWR9fVN+Bf6gxmM+0yrPFs+jUw8gNjLmUQqt6Eew==",
+      "dev": true,
+      "license": "Unlicense",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
     "node_modules/markdown-it-link-attributes": {
       "version": "4.0.1",
       "resolved": "https://github.com/lee0c/markdown-it-link-attributes/tarball/main",
@@ -2153,6 +2495,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nunjucks": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
@@ -2268,6 +2623,62 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -2427,6 +2838,13 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -2660,6 +3078,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.1.tgz",
+      "integrity": "sha512-RYONW2MeafgYlkVOKYKkA/Ag7BmXqgIWCa8t1m0JcxrQg9pI9lEqRhAOruOBCbAohOa/gkCF+iPi9hrgvTzu6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -2677,6 +3105,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ws": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",

package.json

@@ -19,8 +19,11 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "@mdit/plugin-attrs": "^0.24.2",
     "@zachleat/heading-anchors": "https://github.com/lee0c/heading-anchors/tarball/main",
+    "cheerio": "^1.2.0",
+    "eleventy-plugin-nesting-toc": "^1.3.0",
     "lodash-es": "^4.17.23",
     "luxon": "^3.7.2",
+    "markdown-it-anchor": "^10.0.0",
     "markdown-it-link-attributes": "https://github.com/lee0c/markdown-it-link-attributes/tarball/main",
     "pagefind": "^1.5.2"
   }

src/posts/2023/2023-02-13-butch-hands.md

@@ -1,5 +1,6 @@
 ---
 title: butch hands pattern
+layout: post-with-toc.njk
 image:
   src: 2023/butch-hands.jpg
   alt: "Hands wearing a pair of pink and grey gloves with convertable mitten tops."

src/posts/2023/2023-05-12-backend-accessibility.md

@@ -1,5 +1,6 @@
 ---
 title: backend accessibility
+layout: post-with-toc.njk
 image:
   src: 2023/camelCase-print.jpg
   alt: "A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font."
@@ -8,7 +9,7 @@ tags:
   - software
 ---
 
-> These notes are from a talk I gave at work. If you think something is missing or incorrect, please let me know!
+These notes are from a talk I gave at work. If you think something is missing or incorrect, please let me know!
 
 Backend developers still have users: other developers. We're all human, with human limitations and differences. Design for those limitations and you'll find you improve the end result for everyone.
 

src/posts/2023/2023-06-15-printing-press.md

@@ -3,6 +3,8 @@ title: printing press notes
 image:
   src: 2023/printing-press.jpg
   alt: "An open Speedball Model B printing press, which uses a lever handle to put even pressure on a 6 by 8 inch top plate."
+tags:
+  - reference
 ---
 
 ## specs

src/posts/2023/2023-10-08-leatherworking.md

@@ -1,5 +1,6 @@
 ---
 title: leatherworking favorites
+layout: post-with-toc.njk
 image:
   src: 2023/leather-harness-wip.jpg
   alt: "two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black."

src/posts/2023/2023-11-07-domain-and-site-setup.md

@@ -1,5 +1,6 @@
 ---
 title: domain and site setup
+layout: post-with-toc.njk
 image:
   src: 2023/crinkly-mushrooms.jpg
   alt: "Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass."

src/posts/2023/2023-12-22-pronouns.md

@@ -1,5 +1,6 @@
 ---
 title: on pronouns
+layout: post-with-toc.njk
 image:
   src: 2023/starling.jpg
   alt: Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.
@@ -8,7 +9,7 @@ tags:
   - gender
 ---
 
-Created in cooperation with [Julia Pinedo](https://www.linkedin.com/in/julia-pinedo-094162117/).
+Created in cooperation with [Jonah Pinedo](https://www.linkedin.com/in/jonahpinedo/).
 
 Adapted from a workplace session on pronouns and gender identity.
 

src/posts/2024/2024-02-28-gender-as-a-proxy-variable.md

@@ -1,5 +1,6 @@
 ---
 title: gender as a proxy variable
+layout: post-with-toc.njk
 image:
   src: 2024/gender-zine-cover.png
   alt: "Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding."

src/posts/2024/2024-08-08-no-politics.md

@@ -1,5 +1,6 @@
 ---
 title: no politics (wip)
+layout: post-with-toc.njk
 image:
   src: 2024/mushroom-on-fence.jpg
   alt: "Picture unrelated to post. A small orange mushroom grows from the center of a fence post."

src/posts/2024/2024-08-10-rescue-trans-rescue.md

@@ -7,10 +7,6 @@ tags:
   - reference
 ---
 
-Updated 13 Aug 2024
-
 The content previously found on this page is now hosted on a standalone site.
 
-[Visit the site](https://rescue-trans-rescue.glitch.me).
+[Visit rescue-trans-rescue.quest](https://rescue-trans-rescue.quest).
-
-(Site down? Not loading? [Check for issues with Glitch, our hosting provider](https://status.glitch.com/).)

src/posts/2024/2024-09-01-handedness-toggle.md

@@ -1,5 +1,6 @@
 ---
 title: handedness toggle
+layout: post-with-toc.njk
 image:
   src: 2024/handedness-toggle-0.png
   alt: "A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left."

src/posts/2025/2025-05-14-azure-locations.md

@@ -1,5 +1,6 @@
 ---
 title: azure locations and file crawling
+layout: post-with-toc.njk
 image:
   src: 2025/azure-locations.jpg
   alt: "A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy."

src/posts/2025/2025-05-26-art-shows.md

@@ -11,11 +11,12 @@ Listed by recency.
 
 ## 2026
 
-- [Imbolc Celebration & Market at Beall Greenhouses](https://beall-greenhouses-market.pages.dev/events/2026-imbolc) (vendor, web marketing)
+- [Beltane Market at Beall Greenhouses](https://beall-greenhouses.com/events/2027-beltane) (vendor, web marketing)
+- [Imbolc Celebration & Market at Beall Greenhouses](https://beall-greenhouses.com/events/2026-imbolc) (vendor, web marketing)
 
 ## 2025
 
-- [Solstice Market at Beall Greenhouses](https://beall-greenhouses-market.pages.dev/events/2025-solstice) (vendor, web and print marketing)
+- [Solstice Market at Beall Greenhouses](https://beall-greenhouses.com/events/2025-solstice) (vendor, web and print marketing)
 - [Seattle Zine Fest](https://www.instagram.com/seattle.zine.fest) (vendor)
 - [VIVA Spring Tour](https://vivartists.com/viva/events/spring-tour-2025/) (vendor)
 - [Seattle Erotic Art Festival](https://www.seaf.art) (displayed artist)

src/posts/2025/2025-11-23-favorite-git-flag.md

@@ -1,5 +1,6 @@
 ---
 title: my favorite git flag
+layout: post-with-toc.njk
 image:
   src: 2025/shelf-mushrooms.jpg
   alt: "Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk."
@@ -20,7 +21,7 @@ also, [TIL](https://xkcd.com/1053/): this command is a shortcut to the `patch` s
 
 a classic scenario: you've realized your uncommitted work doesn't just encapsulate one change, and it's not so easily split as to be separable per-file. `git add -p` instead lets you choose to stage changes chunk-by-chunk, or, as `git` terms it, hunk-by-hunk.
 
-### hunks
+### hunks...
 
 ...are not perfect. you can split hunks, but only so much, and there's going to be cases where your changes are *so* mixed in as to be inseparable.
 

src/posts/2025/2025-12-02-siblinghood.md

@@ -1,5 +1,6 @@
 ---
 title: siblinghood of the traveling greeting card
+layout: post-with-toc.njk
 image:
   src: 2025/rockery.jpg
   alt: "Image unrelated to post. A surprisingly neat pile of rounded beach rocks, mainly speckly grey-white-bluish ones, with trees in the background."
@@ -12,25 +13,6 @@ welcome to the siblinghood of the traveling greeting card. it now has a home at
 
 originated on the fediverse - see the [#siblinghoodOfTheTravelingGreetingCard hashtag](https://flipping.rocks/tags/siblinghoodOfTheTravelingGreetingCard) - with original idea thanks to [noctiluca@scholar.social](https://scholar.social/@noctiluca)
 
-## table of contents
-
-- [objective](#objective)
-- [outline](#outline)
-  - [timeline](#timeline)
-  - [participants](#participants)
-  - [on randomization](#on-randomization)
-  - [card guidelines](#card-guidelines)
-  - [address privacy](#address-privacy)
-- [what I'll need from participants](#what-ill-need-from-participants)
-  - [signing the card](#signing-the-card)
-  - [mailing it back out](#mailing-it-back-out)
-  - [status checks](#status-checks)
-- [what I'll send participants](#what-ill-send-participants)
-  - [guidelines](#guidelines)
-  - [recipient and loop order assignment](#recipient-and-loop-order-assignment)
-  - [reminders](#reminders)
-- [I want in!](#i-want-in)
-
 ## objective
 
 send a greeting card around the world. maybe more than one. we'll see.

src/posts/2026/2026-01-05-moving-images.md

@@ -1,5 +1,6 @@
 ---
 title: moving images
+layout: post-with-toc.njk
 image:
   src: 2026/cormorant.jpg
   alt: "Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats."
@@ -10,7 +11,7 @@ tags:
 
 ## problem statement
 
-today I decided to finally clean up the `assets/img` directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery images where I have a tendency to [use](/stationery-exchange) [lots](/favorite-git-flag) [of](/trans-networks) [mushroom](/no-politics) [images](/domain-and-site-setup).
+today I decided to finally clean up the `assets/img` directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery posts where I have a tendency to [use](/stationery-exchange) [lots](/my-favorite-git-flag) [of](/networks-of-trans-care) [mushroom](/no-politics-wip) [images](/domain-and-site-setup).
 
 so it's time to move them into year-based folders. Let's talk about how I did that. `bash` away!
 

src/posts/2026/2026-01-07-intro-to-git.md

@@ -1,5 +1,6 @@
 ---
 title: an intro to git
+layout: post-with-toc.njk
 image:
   src: 2026/goldeneye-tail.jpg
   alt: "Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash."
@@ -10,54 +11,6 @@ tags:
 
 alrighty, this one's a real doozy. Strap in.
 
----
-
-<!-- TOC -->
-
-- [versioning](#versioning)
-- [problem statement](#problem-statement)
-- [what is git?](#what-is-git)
-	- [where can I use git?](#where-can-i-use-git)
-		- [what is a CLI?](#what-is-a-cli)
-	- [where can I use the git CLI?](#where-can-i-use-the-git-cli)
-		- [git for Windows](#git-for-windows)
-		- [WSL](#wsl)
-		- [a few terminal operations](#a-few-terminal-operations)
-		- [edit files](#edit-files)
-- [git version](#git-version)
-	- [a few handy settings](#a-few-handy-settings)
-- [git going](#git-going)
-	- [git init](#git-init)
-	- [git clone](#git-clone)
-- [git status](#git-status)
-	- [branch main](#branch-main)
-	- [no commits / nothing to commit](#no-commits--nothing-to-commit)
-- [commits and history](#commits-and-history)
-	- [git log](#git-log)
-	- [creating a commit](#creating-a-commit)
-- [the staging area](#the-staging-area)
-	- [git add](#git-add)
-- [git commit](#git-commit)
-	- [checking our work](#checking-our-work)
-- [changes to existing files](#changes-to-existing-files)
-	- [git restore](#git-restore)
-- [git revert](#git-revert)
-- [git remote](#git-remote)
-	- [git fetch and git pull](#git-fetch-and-git-pull)
-	- [git push, take one](#git-push-take-one)
-	- [authentication](#authentication)
-	- [SSH keys](#ssh-keys)
-		- [creation](#creation)
-		- [an alias...](#an-alias)
-		- [and a function](#and-a-function)
-		- [SSH keys and the remote](#ssh-keys-and-the-remote)
-	- [git push, take two](#git-push-take-two)
-- [summary](#summary)
-
-<!-- /TOC -->
-
----
-
 ## versioning
 
 have you ever tried to revert to a previous version of a document in MS Office or Google Docs and found that your revision history is cluttered with small changes that by all rights should be grouped into one set of edits, but they aren't, and it's tedious to pick through all the versions?

src/posts/2026/2026-01-08-comparing-text-editors.md

@@ -1,5 +1,6 @@
 ---
 title: comparing text editors
+layout: post-with-toc.njk
 image:
   src: 2026/horsetail.jpg
   alt: "Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint."

src/posts/2026/2026-02-06-screen-reader-optimizations.md

@@ -1,5 +1,6 @@
 ---
 title: screen reader optimizations
+layout: post-with-toc.njk
 image:
   src: 2026/crow.jpg
   alt: "Image unrelated to post. A crow poses on driftwood against a whitish sky."

src/posts/2026/2026-02-19-eleventy-lessons.md

@@ -1,5 +1,6 @@
 ---
 title: eleventy lessons
+layout: post-with-toc.njk
 image:
   src: 2026/hellebore.jpg
   alt: Image unrelated to post. Close up on a pale green hellebore flower.

src/posts/2026/2026-03-22-accessible-image-modals.md

@@ -1,5 +1,6 @@
 ---
 title: accessible image modals
+layout: post-with-toc.njk
 image:
   src: 2026/snacking-seagull.jpg
   alt: Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth.
@@ -10,7 +11,7 @@ tags:
 
 Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.
 
-> Fair warning: This solution is likely imperfect.
+> Fair warning: this solution is likely imperfect.
 
 ## the `dialog` element
 

src/posts/2026/2026-06-30-core-css.md

@@ -1,5 +1,6 @@
 ---
 title: core CSS
+layout: post-with-toc.njk
 image:
   src: 2026/core-css.png
   alt: "A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley."

src/posts/2026/2026-08-05-visual-site-builders-accessibility.md

@@ -1,5 +1,6 @@
 ---
 title: visual site builders and accessibility
+layout: post-with-toc.njk
 image:
   src: 2026/roses.jpg
   alt: Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.

src/posts/2026/2026-08-28-leatherworking-zine.md

@@ -1,5 +1,6 @@
 ---
 title: leatherworking zine
+layout: post-with-toc.njk
 image:
   src: 2026/leatherworking-zine.jpg
   alt: "3 copies of the same zine with different colored cardstock covers. The cover reads 'Leatherworking Tools' and lists myself as the author. Surrounding the text are many small icons of tools and explanatory diagrams. The text is dark teal and the icons are dark pink."

src/posts/2026/2026-09-08-framer-accessibility.md

@@ -1,5 +1,6 @@
 ---
 title: framer accessibility
+layout: post-with-toc.njk
 image:
   src: 2026/framer.png
   alt: "A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features."