From 33d6838dc40f765660c879037436690abc284790 Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmonty2@gmail.com>
Date: Sun, 20 Aug 2023 22:04:21 -0700
Subject: [PATCH] start work on table of contents

---
 src/lib/Post.svelte   |  3 ++
 src/lib/Toc.svelte    | 67 +++++++++++++++++++++++++++++++++++++++++++
 src/plugins/rehype.js |  2 +-
 src/plugins/remark.js | 19 ++++++++++++
 4 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/Toc.svelte
 create mode 100644 src/plugins/remark.js

diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte
index 4a2d17e..2fa47ec 100644
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@@ -3,6 +3,7 @@
     import { formatDate } from './datefmt.js';
     import { makeSlug } from '$lib/utils.js';
     
+    import Toc from './Toc.svelte';
     import Link from './Link.svelte';
     export { Link as a };
 </script>
@@ -11,6 +12,7 @@
     export let title, date;
     export const description = '';
     export const draft = false;
+    export let toc = null;
 </script>
 
 <style>
@@ -29,5 +31,6 @@
 <div id="post">
     <h1 id="{makeSlug(title)}">{title}</h1>
     <p class="subtitle">{formatDate(date)}</p>
+    <Toc items={toc} />
     <slot></slot>
 </div>
diff --git a/src/lib/Toc.svelte b/src/lib/Toc.svelte
new file mode 100644
index 0000000..b47fbce
--- /dev/null
+++ b/src/lib/Toc.svelte
@@ -0,0 +1,67 @@
+<script>
+    import { makeSlug } from '$lib/utils.js';
+
+    export let items;
+
+    console.log(items);
+</script>
+
+<style>
+    /* move everything out to the left and center it vertically */
+    #toc {
+        position: fixed;
+        left: 1rem;
+        /* setting top at 50vh sticks it halfway down the viewport,
+        then translating back up by 50% gets it vertically centered
+        even with a dynamic width */
+        top: 50vh;
+        transform: translateY(-50%);
+        color: var(--content-color-faded);
+    }
+
+    /* margin-left is to match the list items; this allows the accent bar
+    for the current item to appear to float out in space */
+    h5 {
+        margin-left: 0.5rem;
+        padding-bottom: 0.25em;
+        margin-bottom: 0.25em;
+        border-bottom: 0.1em solid currentcolor;
+        font-variant: petite-caps;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    li {
+        margin-left: var(--indent, 0);
+        padding-left: 0.5rem;
+        margin-bottom: 0.15rem;
+        font-size: 0.9rem;
+    }
+    li.current {
+        border-left: 0.1rem solid var(--accent-color);
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+</style>
+
+
+<div id="toc">
+    <h5>Table of Contents</h5>
+    <ul>
+        {#each items as item}
+        <li style:--indent="{(item.depth - 2) * 0.75}em">
+            <a href="#{makeSlug(item.text)}">{item.text}</a>
+        </li>
+        {/each}
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/plugins/rehype.js b/src/plugins/rehype.js
index 2d5249d..83235cf 100644
--- a/src/plugins/rehype.js
+++ b/src/plugins/rehype.js
@@ -4,7 +4,7 @@ import { toText } from 'hast-util-to-text';
 import { makeSlug } from '../lib/utils.js';
 
 
-export function localPlugins() {
+export function localRehype() {
     let printed = false;
 
     return (tree, vfile) => {
diff --git a/src/plugins/remark.js b/src/plugins/remark.js
new file mode 100644
index 0000000..cbc1d82
--- /dev/null
+++ b/src/plugins/remark.js
@@ -0,0 +1,19 @@
+import { visit } from 'unist-util-visit';
+import { toString } from 'mdast-util-to-string';
+
+
+// build table of contents and inject into frontmatter
+export function localRemark() {
+    return (tree, vfile) => {
+        let toc = [];
+        
+        visit(tree, 'heading', node => {
+            toc.push({
+                text: toString(node),
+                depth: node.depth,
+            });
+        });
+
+        vfile.data.fm.toc = toc;
+    }
+}