Install @zachleat/details-utils package

eleventy.config.js

@@ -14,6 +14,9 @@ export default function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("./src/assets/");
     eleventyConfig.addWatchTarget("./src/assets/");
     eleventyConfig.addPassthroughCopy("CNAME");
+    eleventyConfig.addPassthroughCopy({
+        "node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
+    });
 
     // Custom plugins
     eleventyConfig.addPlugin(imagePlugin);

package.json

@@ -17,6 +17,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
     "@uncenter/eleventy-plugin-toc": "^1.0.3",
+    "@zachleat/details-utils": "^2.0.2",
     "bun": "^1.1.20",
     "eleventy-plugin-embed-everything": "^1.18.2",
     "eleventy-plugin-metagen": "^1.8.3",

src/_includes/global/base.njk

@@ -31,6 +31,9 @@
 
         {# JavaScript #}
         <script src="{% getBundleFileUrl 'js' %}" defer></script>
+    {% if toc %}
+        <script src="{{'/assets/js/details-utils.js'}}" defer></script>
+    {% endif %}
 
         <title>{% if title %} {{ title }} | {% endif %} {{ sitemeta.siteName }}</title>
     </head>

src/statements/colophon.md

@@ -22,6 +22,7 @@ How this website is built.
 * Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
 * Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
 * Eleventy's official [Syntax Highlighting](https://www.11ty.dev/docs/plugins/syntaxhighlight/) plugin
+* [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
 
 ### Eleventy Community Plugins
 * [Emoji Read Time Eleventy Plugin](https://11ty.rocks/#plugin-emoji-read-time)