feat: ✨ add table of contents to posts

eleventy.config.js

@@ -2,7 +2,6 @@ import fs from 'node:fs';
 import { env } from 'node:process';
 import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';
 import { feedPlugin } from '@11ty/eleventy-plugin-rss';
-import { IdAttributePlugin } from '@11ty/eleventy';
 import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse';
 import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything';
 import eleventyPluginLucideIcons from '@grimlink/eleventy-plugin-lucide-icons';
@@ -12,7 +11,9 @@ import eleventyPluginOgImage from 'eleventy-plugin-og-image';
 import eleventyPluginReadingTime from '@myxotod/eleventy-plugin-readingtime';
 import eleventyPluginRobotsTxt from 'eleventy-plugin-robotstxt';
 import eleventyPluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
+import eleventyPluginTOC from '@thedigitalman/eleventy-plugin-toc-a11y';
 import markdownItAbbr from 'markdown-it-abbr';
+import markdownItAnchor from 'markdown-it-anchor'
 import markdownItCallouts from 'markdown-it-obsidian-callouts';
 import markdownItCollapsible from 'markdown-it-collapsible';
 import markdownItFootnote from 'markdown-it-footnote';
@@ -31,13 +32,13 @@ export default async function (eleventyConfig) {
     return collection.getFilteredByGlob('./src/posts/*.md');
   });
 
-  eleventyConfig.addPlugin(IdAttributePlugin);
   eleventyConfig.addPlugin(eleventyPluginCiu);
   eleventyConfig.addPlugin(eleventyPluginEmbedEverything);
   eleventyConfig.addPlugin(eleventyPluginLucideIcons);
   eleventyConfig.addPlugin(eleventyPluginMetagen);
   eleventyConfig.addPlugin(eleventyPluginNavigation);
   eleventyConfig.addPlugin(eleventyPluginReadingTime);
+  eleventyConfig.addPlugin(eleventyPluginTOC);
   eleventyConfig.addPlugin(eleventyPluginRobotsTxt, {
     sitemapURL: 'https://blog.sebin-nyshkim.net/sitemap.xml',
     shouldBlockAIRobots: true,
@@ -94,6 +95,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCollapsible));
   eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCallouts));
   eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItFootnote));
+  eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItAnchor));
 
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
 

package-lock.json

@@ -19,12 +19,14 @@
         "@myxotod/eleventy-plugin-readingtime": "^2.0.0",
         "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
         "@tailwindcss/typography": "^0.5.15",
+        "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0",
         "eleventy-google-fonts": "^0.1.0",
         "eleventy-plugin-embed-everything": "^1.19.0",
         "eleventy-plugin-metagen": "^1.8.3",
         "eleventy-plugin-og-image": "^4.0.0",
         "eleventy-plugin-robotstxt": "^1.0.0",
         "markdown-it-abbr": "^2.0.0",
+        "markdown-it-anchor": "^9.2.0",
         "markdown-it-collapsible": "^2.0.2",
         "markdown-it-footnote": "^4.0.0",
         "markdown-it-obsidian-callouts": "^0.3.0",
@@ -1303,6 +1305,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/@thedigitalman/eleventy-plugin-toc-a11y": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@thedigitalman/eleventy-plugin-toc-a11y/-/eleventy-plugin-toc-a11y-2.1.0.tgz",
+      "integrity": "sha512-vbLulpUjH+AIPFxmmLxtiTnQqfaSyCBWSLXzrrPL9Nq7//OhLBX+r28XKMi1ZX3eEnPfG7ZU0Nrny7FFoQlZDQ==",
+      "dependencies": {
+        "cheerio": "1.0.0-rc.10"
+      }
+    },
     "node_modules/@types/babel-types": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.15.tgz",
@@ -1333,6 +1343,28 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "peer": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "peer": true
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -1703,6 +1735,11 @@
         "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=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2122,6 +2159,67 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
       "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ=="
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dependencies": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.6.0.tgz",
+      "integrity": "sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==",
+      "dependencies": {
+        "css-select": "^4.3.0",
+        "css-what": "^6.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2502,6 +2600,21 @@
         "node": ">=16"
       }
     },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -2513,6 +2626,17 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5145,6 +5269,15 @@
       "integrity": "sha512-of7C8pXSjXjDojW4neNP+jD7inUYH/DO0Ca+K/4FUEccg0oHAEX/nfscw0jfz66PJbYWOAT9U8mjO21X5p6aAw==",
       "license": "MIT"
     },
+    "node_modules/markdown-it-anchor": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
+      "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
     "node_modules/markdown-it-collapsible": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/markdown-it-collapsible/-/markdown-it-collapsible-2.0.2.tgz",
@@ -5474,6 +5607,17 @@
         "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==",
+      "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",
@@ -5663,6 +5807,19 @@
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
       "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
     },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -7518,8 +7675,7 @@
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "optional": true
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/ua-parser-js": {
       "version": "1.0.39",

package.json

@@ -26,12 +26,14 @@
     "@myxotod/eleventy-plugin-readingtime": "^2.0.0",
     "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
     "@tailwindcss/typography": "^0.5.15",
+    "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0",
     "eleventy-google-fonts": "^0.1.0",
     "eleventy-plugin-embed-everything": "^1.19.0",
     "eleventy-plugin-metagen": "^1.8.3",
     "eleventy-plugin-og-image": "^4.0.0",
     "eleventy-plugin-robotstxt": "^1.0.0",
     "markdown-it-abbr": "^2.0.0",
+    "markdown-it-anchor": "^9.2.0",
     "markdown-it-collapsible": "^2.0.2",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-obsidian-callouts": "^0.3.0",

src/css/style.css

@@ -35,7 +35,11 @@ a:not(.nav-link, .read-more-button) {
 }
 
 .blogpost {
-  @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl;
+  @apply prose prose-slate md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl;
+}
+
+.nav-toc {
+  @apply sticky top-0 right-0 prose prose-sm;
 }
 
 .footnote-item:target p {

src/layouts/blogpost.njk

@@ -2,40 +2,48 @@
 layout: base.njk
 ---
 
-<article class="blogpost">
-  <h1 class="text-4xl">{{ title }}</h1>
-  <aside class="not-prose space-y-4 text-base">
-    <ul class="postmeta">
-      <li>
-        {% lucide "calendar", {"size": "20"} %}
-        <time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
-          {{ page.date | readableDate }}
-        </time>
-      </li>
-      <li>
-        {% lucide "user", {"size": "20"} %}
-        <a href="{{ author.href }}">{{ author.name }}</a>
-      </li>
-      <li>
-        {% lucide "glasses", {"size": "20"} %}
-        {{ content | readingtime }}
-      </li>
-    </ul>
-    {% if tags.length > 0 %}
-      <ul class="tags">
-        {% for tag in tags %}
-          <li class="tag">
-            {% lucide "tag", {"size": "20"} %}
-            {{ tag }}
-          </li>
-        {%- endfor %}
-      </ul>
-    {% endif %}
-  </aside>
-
-  {% if image and image.src != '' %}
-    <img src="{{ image.src }}" alt="{{ image.alt }}">
+<div class="mx-auto grid max-w-screen-xl grid-flow-col md:grid-cols-content gap-8">
+  {% if toc %}
+    <aside>
+      {{ content | toc | safe }}
+    </aside>
   {% endif %}
 
-  {{ content | safe }}
-</article>
+  <article class="blogpost justify-items-center">
+    <h1 class="text-4xl">{{ title }}</h1>
+    <aside class="not-prose space-y-4 text-base">
+      <ul class="postmeta">
+        <li>
+          {% lucide "calendar", {"size": "20"} %}
+          <time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
+            {{ page.date | readableDate }}
+          </time>
+        </li>
+        <li>
+          {% lucide "user", {"size": "20"} %}
+          <a href="{{ author.href }}">{{ author.name }}</a>
+        </li>
+        <li>
+          {% lucide "glasses", {"size": "20"} %}
+          {{ content | readingtime }}
+        </li>
+      </ul>
+      {% if tags.length > 0 %}
+        <ul class="tags">
+          {% for tag in tags %}
+            <li class="tag">
+              {% lucide "tag", {"size": "20"} %}
+              {{ tag }}
+            </li>
+          {%- endfor %}
+        </ul>
+      {% endif %}
+    </aside>
+
+    {% if image and image.src != '' %}
+      <img src="{{ image.src }}" alt="{{ image.alt }}">
+    {% endif %}
+
+    {{ content | safe }}
+  </article>
+</div>

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ['./src/**/*.{html,md,njk,ejs,pug}'],
   theme: {
-    extend: {}
+    extend: {
+      gridTemplateColumns: {
+        content: '20rem minmax(0, 1fr)'
+      }
+    }
   },
-  plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")]
+  plugins: [require('@tailwindcss/typography'), require('tailwindcss-safe-area')]
 };