Add Table of Content for posts

This also adds links to markdown headings.

Closes #7

_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;

_includes/layouts/post.tsx

@@ -1,9 +1,32 @@
 export const layout = "./base.tsx";
 
-export default function({ children }) {
+export default function({ children, toc }) {
   return (
-    <article>
-      { children }
-    </article>
+    <>
+      { toc.length > 0 &&
+        <nav class="toc">
+          <h2>Table of Contents</h2>
+          <ol>
+            {toc.map(item => (
+              <li>
+                <a href={`#${item.slug}`}>{item.text}</a>
+                {item.children.length > 0 &&
+                  <ul>
+                    {item.children.map(child => (
+                      <li>
+                        <a href={`#${child.slug}`}>{child.text}</a>
+                      </li>
+                    ))}
+                  </ul>
+                }
+              </li>
+            ))}
+          </ol>
+        </nav>
+      }
+      <article>
+        { children }
+      </article>
+    </>
   );
 }

_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 `<a>` 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;
+  }
+}