diff --git a/_config.ts b/_config.ts
index 71f1645..e2328bb 100644
--- a/_config.ts
+++ b/_config.ts
@@ -4,6 +4,7 @@ import nav from "lume/plugins/nav.ts";
import sass from "lume/plugins/sass.ts";
import feed from "lume/plugins/feed.ts";
import code_highlight from "lume/plugins/code_highlight.ts";
+import toc from "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts";
import lang_typescript from "npm:highlight.js/lib/languages/typescript";
import lang_javascript from "npm:highlight.js/lib/languages/javascript";
@@ -49,5 +50,11 @@ site.use(code_highlight({
bash: lang_bash,
}
}));
+site.use(toc({
+ slugify: {
+ separator: "-",
+ lowercase: true,
+ },
+}));
export default site;
diff --git a/_includes/layouts/post.tsx b/_includes/layouts/post.tsx
index 20cda4f..60dbdb6 100644
--- a/_includes/layouts/post.tsx
+++ b/_includes/layouts/post.tsx
@@ -1,9 +1,32 @@
export const layout = "./base.tsx";
-export default function({ children }) {
+export default function({ children, toc }) {
return (
-
- { children }
-
+ <>
+ { toc.length > 0 &&
+
+ }
+
+ { children }
+
+ >
);
}
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 9430a52..43cbc01 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -37,6 +37,14 @@ h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
+
+ // `.header-anchor` is added to `` tags inside headings
+ // by the TOC plugin:
+ // https://deno.land/x/lume_markdown_plugins/toc.ts
+ a.header-anchor {
+ color: var(--color-headings);
+ text-decoration: none;
+ }
}
h2 {
@@ -274,3 +282,24 @@ figure {
font-style: italic;
}
}
+
+nav.toc {
+ line-height: normal;
+ margin-bottom: 3rem;
+ h2 {
+ border: none;
+ text-transform: uppercase;
+ font-size: 0.85rem;
+ margin-bottom: 1rem;
+ }
+ li {
+ font-size: 0.9rem;
+ }
+ > ol {
+ padding-left: 1rem;
+ }
+ ul {
+ margin: .5rem;
+ padding-left: 1rem;
+ }
+}
diff --git a/deno.lock b/deno.lock
index 1983604..3a44209 100644
--- a/deno.lock
+++ b/deno.lock
@@ -16,7 +16,8 @@
"npm:sass@1.64.2": "npm:sass@1.64.2",
"npm:sass@1.66.1": "npm:sass@1.66.1",
"npm:sass@1.68.0": "npm:sass@1.68.0",
- "npm:sass@1.69.5": "npm:sass@1.69.5"
+ "npm:sass@1.69.5": "npm:sass@1.69.5",
+ "npm:unidecode@0.1.8": "npm:unidecode@0.1.8"
},
"npm": {
"@babel/runtime@7.22.6": {
@@ -274,6 +275,10 @@
"uc.micro@1.0.6": {
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
"dependencies": {}
+ },
+ "unidecode@0.1.8": {
+ "integrity": "sha512-SdoZNxCWpN2tXTCrGkPF/0rL2HEq+i2gwRG1ReBvx8/0yTzC3enHfugOf8A9JBShVwwrRIkLX0YcDUGbzjbVCA==",
+ "dependencies": {}
}
}
},
@@ -1628,6 +1633,7 @@
"https://deno.land/x/lume@v1.19.4/core/searcher.ts": "9d87c1be0cac6cf9b1070760823bd30ee2705c272cfbecbccc0da0268d069b24",
"https://deno.land/x/lume@v1.19.4/core/server.ts": "6d60f9b700f15a31a33b9c8f9704860e78c328cb5c8267ab5ffb8a4680061713",
"https://deno.land/x/lume@v1.19.4/core/site.ts": "fd7bab8a2aa16703f08be72640a3e61b8ecea1adf843e5488599d5b50e862013",
+ "https://deno.land/x/lume@v1.19.4/core/slugifier.ts": "b5ef77284df1fddbfea96d14885b6d54cffa1c21a2ef25482d1c7f925ea8dc05",
"https://deno.land/x/lume@v1.19.4/core/source.ts": "a9203c9348f355b16208b345f8eb146367c18375144439e6f11cc19e16a64ec1",
"https://deno.land/x/lume@v1.19.4/core/utils.ts": "b26144a123e3129e5bcce99876952fe574766a9879a0e71478783070b5b70a3b",
"https://deno.land/x/lume@v1.19.4/core/watcher.ts": "be43625025dcedc68fcb2e2e4f63cceb2d3a82f6c1c13107518035e613726016",
@@ -1648,6 +1654,7 @@
"https://deno.land/x/lume@v1.19.4/deps/path.ts": "a9811933c988951154424763c17e1c470ff2f7b3eb9aa8e58ce615939806f25f",
"https://deno.land/x/lume@v1.19.4/deps/react.ts": "da52e2027b9bfaff36af354e1959be91017b33b3295a8521c43b28b73fde833c",
"https://deno.land/x/lume@v1.19.4/deps/sass.ts": "59ba5aeb0b1b09c85f185c867ef7e8db69df352999c55ab2dd3a2fdee6427675",
+ "https://deno.land/x/lume@v1.19.4/deps/unidecode.ts": "7479d3695704320279c8c3468ec4801a70064a7471f9974e04c45852ca882769",
"https://deno.land/x/lume@v1.19.4/deps/xml.ts": "148b6e49cef5be1d1860a84b74915bc42dc8fdb63c69009d25315e160633521c",
"https://deno.land/x/lume@v1.19.4/deps/yaml.ts": "9eb7cdd4e98ae93f6d1a14ca5a634e42c105e7446c17c686dff0aa405d0205a3",
"https://deno.land/x/lume@v1.19.4/middlewares/logger.ts": "1a6f34c185df60142abc9396737c3757d637ddbfdd9c1d1961906d34ed0b310c",
@@ -1671,6 +1678,10 @@
"https://deno.land/x/lume@v1.19.4/plugins/url.ts": "43d3d47896a7322a8dd34572dedb4baa6f73a382594a2ff7c34a3a064dcc6c9e",
"https://deno.land/x/lume@v1.19.4/plugins/utils.ts": "6435d164539d9e408e7e818b080cc1a96ff76ed3c376160577a7df751b57fa07",
"https://deno.land/x/lume@v1.19.4/plugins/yaml.ts": "df24aac4098dba258f1ac331a3b16ba488a336eb63c51afed8f59201228d583c",
+ "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts": "2f1a336fd8faea717d830b53b1b9e6990173ff056fb6e2e979c8b1ac22a5bac9",
+ "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/anchors.ts": "8a4a1c6b2c63156622695ceba57fa7100a6e5f109c9a383a1dcaf755233c8184",
+ "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/mod.ts": "8c7aa6e1dcfabda4264503495a3875388108cd9a5a94b54853b45a8e8cba9f78",
+ "https://deno.land/x/lume_markdown_plugins@v0.6.0/utils.ts": "6e6c3c394709eff39080562732c2dafe404f225253aaded937133ea694c4b735",
"https://deno.land/x/xml@2.1.1/mod.ts": "4a314a7a28d1ec92f899ce4c6991f0356c77550a75955ec3f4a36733f08548e8",
"https://deno.land/x/xml@2.1.1/parse.ts": "614b8648345ae93c641368836947484d321c7ac9312ae12ec750434353cd7385",
"https://deno.land/x/xml@2.1.1/stringify.ts": "930d35431f153b29d36549cff08fcfbe978e52ccb56af1e3baa2e0760f418b04",