From b4573b64d00760301ab71858c828bf3eb026a90e Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Sun, 3 Dec 2023 10:57:42 -0500
Subject: [PATCH] Add Table of Content for posts

This also adds links to markdown headings.

Closes #7
---
 _config.ts                 |   7 +++++++
 _includes/layouts/post.tsx |  31 +++++++++++++++++++++++++++----
 _includes/styles/base.scss |  29 +++++++++++++++++++++++++++++
 deno.lock                  | Bin 189936 -> 190961 bytes
 4 files changed, 63 insertions(+), 4 deletions(-)

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 (
-    <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>
+    </>
   );
 }
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 `<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;
+  }
+}
diff --git a/deno.lock b/deno.lock
index 1983604435fa21615897aacd1d175c26ebe770c7..3a4420945d15319047e7c393447c2dfdc1fd2e28 100644
GIT binary patch
delta 838
zcmaKqJ5N+m6ooSvjUp<>UIi*&%$)aw3K<nN2nvX(1=;7ZVSsrs%rHo6VQE41#*Wrb
zVnHZPY>bJGm4%7?11wF9@j}4DD5pHxS>IZF?VXPu-#>S}DYx;fC%X1tPo-AwYgS4j
z`f7;%Bv13Er?2Z@-)|S%+Aps??`-e<YkqC#bkF_qP<=GAQhZPwVU4MYVtsJ_?#%+J
z53`{gi&si)rZqN5$Kt^9iYbsM6RSlYD?`|v8AWr=-X0jAoou!0W4Gpqr^rKp{r;d^
zopY1Lwe1TRpEi4+HG6ZL&EDk4%R39rnG%*_J>OW`wdrI;t(g%4DTd%Mf>nVEW293-
z3XcfXGYTvslftk-y++Gq1QUF^{W`gn{(6@j->ke(UbT<@3AQh<g|>k!D>V_E5vHv-
zo(pB77lu&KgeU>o6h&*bh(vfHjbt8-VOph&>$!7j*H&^WB_EQbo5wyS!yW0jpSdG2
zU55I6sJ1H8wcSXSrT%4-S9wxsRQ*1jAqCDA27?emQymN^PI5<`jmla=HAf^;p;M7X
zyKBx-@Qi_Ukk;07=l581hp`G!@w3(X(mvCG$o8ci^NLfc6k}O<A00@InFT^XMTwMH
zZ-E;QG<ZNQCF9&1YSMd?NjDzKD_6q-%WKHwG6@71KrkgF;lj#HSxasVCB_E}60C4p
zcUf{F!9?R7Sk&pp*`z!Cm(^^P77kLWs66-F3QcT8<d&FhZA^3KSpbZJ2xLq$$pJzP
dmTSs+1ZA^2o#yGrR#xMgui2SA{*t^n`5XUc1^@s6

delta 50
zcmV-20L}mL(+lv+3$Seiv!MeBDuZAyhhQ!Nw_q*;`IfiW#R8cLx9-mZObeH=<pKz|
IT-^ed3^}6}$p8QV