site: init toc

site/package.json

@@ -18,10 +18,12 @@
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.43.2",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "mdast": "^2.3.2",
     "mdsvex": "^0.12.6",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "rehype-stringify": "^10.0.1",
+    "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
@@ -34,6 +36,8 @@
     "unified": "^11.0.5",
     "vfile": "^6.0.3",
     "vfile-matter": "^5.0.1",
-    "vite": "^7.1.7"
-  }
+    "vite": "^7.1.7",
+    "mdast-util-toc": "^7.1.0"
+  },
+  "dependencies": {}
 }

site/src/routes/docs/getting-started/overview.md

@@ -4,3 +4,7 @@ b: 2
 ---
 
 # Getting Started Overview
+
+## Step Foo
+
+## Step Bar

site/vite.config.ts

@@ -6,6 +6,8 @@ import { VFile } from "vfile";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
+import { toc } from "mdast-util-toc";
+import type { Nodes } from "mdast";
 
 export default defineConfig({
   plugins: [
@@ -22,11 +24,23 @@ export default defineConfig({
           .use(remarkParse)
           .use(remarkRehype)
           .use(rehypeStringify)
-          .process(String(file));
+          .process(String(code));
 
+        const parsed = await unified()
+          .use(remarkParse)
+          .use(() => (tree) => {
+            const result = toc(tree as Nodes);
+            return result.map;
+          })
+          .use(remarkRehype)
+          .use(rehypeStringify)
+          .process(file);
+
+        console.log("toc", parsed);
         return `
 export default ${JSON.stringify(String(html))};
-export const frontmatter = ${JSON.stringify(file.data.matter)};`;
+export const frontmatter = ${JSON.stringify(file.data.matter)};
+export const toc = ${JSON.stringify(String(parsed))};`;
       },
     },
   ],