feat(blog): add table of contents

package.json

@@ -52,10 +52,11 @@
     "sharp": "^0.33.5",
     "surge": "^0.24.6",
     "svelte": "^5.23.2",
+    "svelte-toc": "^0.6.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "vitest": "^3.0.9",
-    "yaml": "^2.6.1"
+    "yaml": "^2.7.1"
   },
   "packageManager": "[email protected]",
   "engines": {

src/components/TableOfContents.svelte

@@ -0,0 +1,51 @@
+<script>
+  import Toc from "svelte-toc";
+  import "@styles/_utils.scss";
+</script>
+
+<Toc
+  --toc-font-size="clamp(15px, 4vw, 2rem)"
+  --toc-padding="0.25em"
+  --toc-width="auto"
+  --toc-mobile-btn-border-radius="0.25em"
+  --toc-mobile-btn-color="var(--text)"
+  --toc-mobile-btn-bg="var(--surface0)"
+  --toc-mobile-bg="var(--surface0)"
+  --toc-desktop-max-width="300px"
+  --toc-desktop-sticky-top="1em"
+  --toc-li-hover-color="var(--accent-color)"
+  --toc-li-border-radius="0.5em"
+  --toc-li-padding="0.25em 0.5em"
+  --toc-active-border-radius="0.5em"
+  --toc-active-bg="var(--accent-color)"
+  --toc-active-color="var(--base)"
+  breakpoint="1000"
+  blurParams={{ duration: 0 }}>
+</Toc>
+
+<style>
+  :global(aside.toc) {
+    & > nav {
+      border-radius: 1em;
+      :global(& > h2) {
+        padding: 0.25em 0.1em;
+      }
+      :global(& > ol) {
+        & > li {
+          font-size: clamp(15px, 4vw, 2rem) !important;
+        }
+      }
+    }
+  }
+
+  :global(aside.toc.mobile) {
+    & > nav {
+      :global(& > h2) {
+        display: none;
+      }
+      :global(& > ol) {
+        margin-block: 0;
+      }
+    }
+  }
+</style>

src/pages/blog/[id].astro

@@ -5,6 +5,7 @@ import { Icon } from "astro-icon/components";
 import Default from "@layouts/Default.astro";
 import PageIntro from "@components/PageIntro.astro";
 import ProfilePicture from "@components/ProfilePicture.svelte";
+import TableOfContents from "@components/TableOfContents.svelte";
 import { formattedDatePosted } from "./_logic/[id]";
 import { formattedAuthors } from "./_logic/[id]";
 
@@ -36,39 +37,42 @@ const { Content, remarkPluginFrontmatter } = await render(post);
       sizes={`(max-width: 720px) 800px, (max-width: 1080px) 1600px, ${post.data.hero.image.width}px`}
     />
   </figure>
-  <article class="blog-container" role="main" style=`--accent-color: var(--${post.data.accentColor});`>
-    <PageIntro title={post.data.title}>
-      <p class="article-summary">{post.data.summary}</p>
-      <footer class="article-meta">
-        <div class="article-author-profiles">
-          {post.data.authors.map((author) => <ProfilePicture username={author.github} size={64} wxh={56} />)}
-        </div>
-        <div>
-          <p class="article-author-info">
-            Authored by
-            <Fragment set:html={formattedAuthors(post.data.authors)} />
-          </p>
-          <p class="article-pubdate">Published on: {formattedDatePosted(post.data.datePosted)}</p>
-          <p>{remarkPluginFrontmatter.minutesRead}</p>
-        </div>
+  <div class="main-wrapper">
+    <TableOfContents client:load />
+    <article class="blog-container" role="main" style=`--accent-color: var(--${post.data.accentColor});`>
+      <PageIntro title={post.data.title}>
+        <p class="article-summary">{post.data.summary}</p>
+        <footer class="article-meta">
+          <div class="article-author-profiles">
+            {post.data.authors.map((author) => <ProfilePicture username={author.github} size={64} wxh={56} />)}
+          </div>
+          <div>
+            <p class="article-author-info">
+              Authored by
+              <Fragment set:html={formattedAuthors(post.data.authors)} />
+            </p>
+            <p class="article-pubdate">Published on: {formattedDatePosted(post.data.datePosted)}</p>
+            <p>{remarkPluginFrontmatter.minutesRead}</p>
+          </div>
+        </footer>
+      </PageIntro>
+      <main class="article-content">
+        <Content />
+      </main>
+      <footer class="article-credit">
+        <p>
+          Hero image by <a href={post.data.hero.source}>{post.data.hero.author}</a> modified with <a
+            href="https://github.com/ozwaldorf/lutgen-rs">lutgen-rs</a
+          >.
+        </p>
+        <p>
+          Want to keep up-to-date? Subscribe to our <a href="/rss.xml"
+            >RSS Feed <Icon class="rss-icon" name="ph:rss-bold" width={24} height={24} /></a
+          >
+        </p>
       </footer>
-    </PageIntro>
-    <div class="article-content">
-      <Content />
-    </div>
-    <footer class="article-credit">
-      <p>
-        Hero image by <a href={post.data.hero.source}>{post.data.hero.author}</a> modified with <a
-          href="https://github.com/ozwaldorf/lutgen-rs">lutgen-rs</a
-        >.
-      </p>
-      <p>
-        Want to keep up-to-date? Subscribe to our <a href="/rss.xml"
-          >RSS Feed <Icon class="rss-icon" name="ph:rss-bold" width={24} height={24} /></a
-        >
-      </p>
-    </footer>
-  </article>
+    </article>
+  </div>
 </Default>
 
 <style lang="scss">
@@ -94,6 +98,13 @@ const { Content, remarkPluginFrontmatter } = await render(post);
     }
   }
 
+  .main-wrapper {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: repeat(1, 1fr);
+    gap: var(--space-sm);
+  }
+
   .blog-container {
     max-width: 69ch;
     margin-inline: auto;