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
Binary files a/deno.lock and b/deno.lock differ