Add Table of Contents for posts

astro.config.mjs

@@ -11,6 +11,10 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import mermaid from "astro-mermaid";
 
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeToc from "rehype-toc";
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://thedevexchange.com',
@@ -26,6 +30,40 @@ export default defineConfig({
 
   trailingSlash: 'always',
 
+
+  markdown: {
+    rehypePlugins: [
+      rehypeSlug,
+      [rehypeAutolinkHeadings, { behavior: 'append' }],
+      // @ts-ignore
+      [rehypeToc, { 
+        headings: ['h1', 'h2', 'h3'],
+        cssClasses: {
+          toc: 'toc-sidebar',
+          link: 'toc-link',
+        },
+        nav: false,
+        customizeTOC: (toc) => {
+          // Add "Table of Contents" heading
+          return {
+            type: 'element',
+            tagName: 'nav',
+            properties: { className: ['toc-container', 'mt-5'], ariaLabel: 'Table of Contents' },
+            children: [
+              {
+                type: 'element',
+                tagName: 'div',
+                properties: { className: ['toc-header'] },
+                children: [{ type: 'text', value: 'Table of Contents', }]
+              },
+              toc
+            ]
+          };
+        }
+      }],
+    ],
+  },
+
   image: {
     service: {
       entrypoint: 'astro/assets/services/sharp',

package.json

@@ -21,6 +21,9 @@
     "mermaid": "^11.12.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-toc": "^3.0.2",
     "tailwindcss": "^4.1.8"
   },
   "devDependencies": {

src/pages/[slug].astro

@@ -68,7 +68,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
         </h1>
 
         <p>By {post.data.author}</p>
-        <p class="mb-16">{dateFormat(post.data.released)} • {timeToRead(post)}min read</p>
+        <p class="mb-16">{dateFormat(post.data.released)} • {timeToRead(post)} min read</p>
         <Prose>
             <Content/>
         </Prose>

src/styles/global.css

@@ -101,4 +101,83 @@
     .prose .expressive-code {
         margin-bottom: 1.25em;
     }
+
+    /* Table of Contents Styles */
+    .toc-container {
+        border: var(--zag-stroke) solid;
+        border-color: var(--color-zag-dark-muted);
+        padding: 1rem;
+        margin: 1.5rem 0;
+        background-color: var(--color-neutral-50);
+
+        &:where(.dark, .dark *) {
+            border-color: var(--color-zag-light-muted);
+            background-color: var(--color-neutral-800);
+        }
+
+        /* Mobile: inline */
+        @media (max-width: 1279px) {
+            display: block;
+            width: 100%;
+        }
+
+        /* Desktop: sidebar on the right, positioned outside content */
+        @media (min-width: 90rem) {
+            position: fixed;
+            top: 5rem;
+            right: max(1rem, calc((100vw - 80rem) / 2 - 4rem));
+            width: 16rem;
+            margin: 0;
+            max-height: calc(100vh - 10rem);
+            overflow-y: auto;
+        }
+
+        /* Extra wide screens: position it further out */
+        @media (min-width: 96rem) {
+            right: max(2rem, calc((100vw - 90rem) / 2 - 1rem));
+            width: 18rem;
+        }
+    }
+
+    .toc-header {
+        font-weight: 600;
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.75rem;
+        color: var(--color-zag-dark-muted);
+
+        &:where(.dark, .dark *) {
+            color: var(--color-zag-light-muted);
+        }
+    }
+
+    .toc-sidebar {
+        margin: 0;
+        font-size: 0.875rem;
+        line-height: 1.6;
+
+        li {
+            list-style: none;
+        }
+    }
+
+    .toc-link {
+        color: var(--color-zag-dark);
+        text-decoration: none;
+        transition: color var(--zag-transition-duration) var(--zag-transition-timing-function);
+
+        &:hover {
+            color: var(--color-zag-accent-dark);
+            text-decoration: underline;
+        }
+
+        &:where(.dark, .dark *) {
+            color: var(--color-zag-light);
+
+            &:hover {
+                color: var(--color-zag-accent-light);
+            }
+        }
+    }
 }