feat(blog): add table of contents

package.json

@@ -53,10 +53,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": "pnpm@10.8.1",
   "engines": {

src/components/TableOfContents.svelte

@@ -0,0 +1,48 @@
+<script>
+  import Toc from "svelte-toc";
+  import "@styles/_utils.scss";
+</script>
+
+<Toc
+  --toc-font-size="inherit"
+  --toc-padding="1rem"
+  --toc-z-index="10"
+  --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-sticky-top="0"
+  --toc-li-color="var(--subtext1)"
+  --toc-li-hover-bg="color-mix(in oklab, transparent, currentcolor 8%)"
+  --toc-li-hover-color="var(--text)"
+  --toc-li-border-radius="0.5em"
+  --toc-li-padding="0.35em 0.6em"
+  --toc-active-border-radius="0.5em"
+  --toc-active-bg="color-mix(in oklab, color-mix(in oklab, var(--base), currentcolor 25%), #000 25%)"
+  --toc-active-color="var(--accent-color)"
+  breakpoint="1000"
+  blurParams={{ duration: 0 }}>
+</Toc>
+
+<style>
+  :global {
+    aside.toc {
+      & > nav {
+        border-radius: 1em;
+        & > h2 {
+          padding-inline: 0.1em;
+          padding-block: 0.5em 0.4em;
+        }
+        & > ol {
+          & > li {
+            font-size: 90% !important;
+          }
+        }
+      }
+      &.mobile {
+        display: none;
+      }
+    }
+  }
+</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,44 @@ 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>
-      </footer>
-    </PageIntro>
-    <div class="article-content">
-      <Content />
+  <div class="main-wrapper" style=`--accent-color: var(--${post.data.accentColor});`>
+    <div class="layout-sidebar-start">
+      <TableOfContents client:load />
     </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 class="layout-main blog-container" role="main">
+      <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>
+    </article>
+  </div>
 </Default>
 
 <style lang="scss">
@@ -94,6 +100,39 @@ const { Content, remarkPluginFrontmatter } = await render(post);
     }
   }
 
+  .main-wrapper {
+    display: grid;
+    grid-template-columns: minmax(25ch, 1fr) 2fr auto;
+    gap: var(--space-md);
+    grid-template-areas: "sidebar-start main sidebar-end";
+  }
+
+  .layout-sidebar-start {
+    grid-area: sidebar-start;
+  }
+
+  .layout-main {
+    grid-area: main;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .layout-sidebar-end {
+    grid-area: sidebar-end;
+  }
+
+  .layout-sidebar-start,
+  .layout-sidebar-end {
+    margin-block: var(--space-xs) var(--space-xs);
+  }
+
+  @media (max-width: 1000px) {
+    .main-wrapper {
+      grid-template-columns: auto;
+      gap: 0;
+    }
+  }
+
   .blog-container {
     max-width: 69ch;
     margin-inline: auto;