Install @uncenter/eleventy-plugin-toc plugin

eleventy.config.md.js

@@ -1,6 +1,6 @@
 /* CONFIGURATION FOR MARKDOWN TEMPLATES */
-
 // Installed plugins
+import pluginTOC from '@uncenter/eleventy-plugin-toc';
 import embedEverything from "eleventy-plugin-embed-everything";
 
 // Configure slug filter
@@ -14,6 +14,12 @@ import markdownItBracketedSpans from "markdown-it-bracketed-spans";
 
 export default function(eleventyConfig) {
     // Installed plugins
+    eleventyConfig.addPlugin(pluginTOC, {
+        tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
+        wrapper: function (toc) {
+            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
+        },
+    });
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
 
     // Configure slug filter

package.json

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

src/_includes/global/content.njk

@@ -24,6 +24,10 @@ layout: global/base
 </header>
 
 <content-wrapper>
+    {% if toc %}
+        {% include "global/toc.njk" %}
+    {% endif %}
+
     {% set contentEl = "article" if isArticle else "div" %}
     <{{contentEl}} class="prose">
         {{ content | safe }}

src/_includes/global/toc.njk

@@ -0,0 +1,54 @@
+<aside class="left-sidebar" aria-label="Left sidebar">
+    <details-utils force-open="(min-width: 60rem)" force-restore>
+        <details class="toc__wrapper sidebar--sticky">
+            <summary class="toc__heading" id="toc-heading">
+                Table of Contents
+            </summary>
+            {{ content | toc | safe }}
+        </details>
+    </details-utils>
+</aside>
+
+{%- css %}
+    .toc__wrapper {
+        max-height: 89vh;
+        overflow-x: auto;
+        padding: 0.3em 1.3rem;
+    }
+
+    .toc__heading {
+        font-size: 1.3rem;
+        font-weight: 700;
+        cursor: pointer;
+    }
+
+    .toc ol,
+    .toc ol ol {
+        display: grid;
+        gap: 0.7em;
+    }
+
+    .toc ol {
+        border-top: 0.1em solid var(--clr-txt-default);
+        padding-left: 1.3em;
+        padding-top: 1em;
+    }
+
+    .toc ol ol {
+        border-top: none;
+        list-style-type: disc;
+        padding-left: 1em;
+        padding-top: 0.5em;
+        margin: 0;
+    }
+
+    .toc ol a {
+        font-size: 1.1rem;
+        padding-left: 0.3em;
+    }
+
+    .toc ol ol a {
+        padding: 0;
+        font-size: 1rem;
+    }
+{% endcss %}

src/assets/css/general.css

@@ -28,10 +28,14 @@ h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
 h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
 
 img, picture { height: auto; }
+:focus { outline: 0.15em solid currentColor; }
+
+code {
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    word-break: break-word;
+}
 
-code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
 :not(pre) > code { padding: 0.125em 0.25em; }
-
 :not(pre) > code,
 pre { background-color: var(--clr-code-bg); }
 
@@ -82,4 +86,6 @@ ul:not([class]), ol:not([class]) {
 ul:not([class]) ul, ol:not([class]) ol,
 ul:not([class]) ol, ol:not([class]) ul { margin-top: var(--sz-list-gap); }
 
-button:hover { cursor: pointer; }
+button:hover { cursor: pointer; }
+details:focus { outline-offset: 0.2em; }
+summary { cursor: pointer; }

src/blog/posts/2024-07-19-eleventy-3-0-upgrade.md

@@ -4,6 +4,7 @@ description: My developer portfolio and blog website has been officially upgrade
 date: 2024-07-19
 templateEngineOverride: md
 categories: ["about this website", "eleventy", "javascript"]
+toc: true
 ---
 
 On 9 April 2024, I [rebuilt this developer portfolio and blog website of mine](/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/) with Eleventy 2.0.1. Three months after using Eleventy and loving it, now I have upgraded Eleventy to 3.0! 🥳
@@ -46,7 +47,7 @@ This happens when I run the Eleventy commands with either `npm` or `bun`.
 
 With problems with my `package.json` script solved, I could finally begin my process to transform my website to an Eleventy 3.0 site, by starting with bundling my component-specific CSS and JavaScript.
 
-I followed the instructions from [Eleventy bundle plugin's GitHub repository](https://github.com/11ty/eleventy-plugin-bundle), by adding `eleventyConfig.addBundle("css")` and `eleventyConfig.addBundle("js")` to my Eleventy configuration file.
+I followed the instructions from [Eleventy bundle plugin's GitHub repository](https://github.com/11ty/eleventy-plugin-bundle), by adding `addBundle("css")` and `addBundle("js")` to my Eleventy configuration file.
 
 I want to write my bundled JavaScript into files with the `getBundleFileUrl` shortcode, so I can add the `defer` HTML attribute to the `<script>` tags that load the bundled file. For this purpose, I use the `toFileDirectory` to configure my JavaScript bundle to write the bundled JavaScript files into the output's assets folder and its JavaScript subfolder, so the setup to bundle my CSS and JavaScript in my Eleventy configuration file becomes this:
 

src/statements/colophon.md

@@ -27,6 +27,7 @@ How this website is built.
 * [Emoji Read Time Eleventy Plugin](https://11ty.rocks/#plugin-emoji-read-time)
 * [eleventy-plugin-metagen](https://www.npmjs.com/package/eleventy-plugin-metagen)
 * [eleventy-plugin-embed-everything](https://www.npmjs.com/package/eleventy-plugin-embed-everything)
+* [@uncenter/eleventy-plugin-toc](https://www.npmjs.com/package/@uncenter/eleventy-plugin-toc)
 
 ### markdown-it Plugins
 Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/markdown-it) built in to render Markdown to HTML.