site: add frontmatter parsing support

site/package.json

@@ -14,17 +14,26 @@
     "lint": "prettier --check ."
   },
   "devDependencies": {
+    "@fontsource-variable/geist": "^5.2.8",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.43.2",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "mdsvex": "^0.12.6",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "remark-stringify": "^11.0.0",
+    "remark-toc": "^9.0.0",
     "svelte": "^5.39.5",
     "svelte-check": "^4.3.2",
+    "to-vfile": "^8.0.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.7",
-    "@fontsource-variable/geist": "^5.2.8"
-  },
-  "dependencies": {}
+    "unified": "^11.0.5",
+    "vfile": "^6.0.3",
+    "vfile-matter": "^5.0.1",
+    "vite": "^7.1.7"
+  }
 }

site/src/routes/docs/[...path]/+page.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
   let { data } = $props();
-  let { content } = data;
+  let { content, toc, frontmatter } = data;
 </script>
 
+<div class="toc">
+{@html toc}
+</div>
 {@html content}
+{JSON.stringify(frontmatter)}
+
+<style>
+  .toc :global(p) {
+    margin: 0;
+  }
+</style>

site/src/routes/docs/[...path]/+page.ts

@@ -3,6 +3,8 @@ import type { Component } from "svelte";
 
 const articles = import.meta.glob<{
   default: string;
+  frontmatter: {};
+  toc: {};
 }>("../**/*.md");
 
 export async function load({ params }) {
@@ -11,8 +13,10 @@ export async function load({ params }) {
     error(404, "");
   }
 
-  const content = await article();
+  const { frontmatter, toc, default: content } = await article();
   return {
-    content: content.default,
+    content,
+    frontmatter,
+    toc,
   };
 }

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

@@ -1 +1,6 @@
+---
+a: 1
+b: 2
+---
+
 # Getting Started Overview

site/vite.config.ts

@@ -1,15 +1,32 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+import { matter } from "vfile-matter";
+import { unified } from "unified";
+import { VFile } from "vfile";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
 
 export default defineConfig({
   plugins: [
     sveltekit(),
     {
       name: "markdown-loader",
-      transform(code, id) {
-        if (id.slice(-3) === ".md") {
-          return `export default ${JSON.stringify(code)};`;
-        }
+      async transform(code, id) {
+        if (id.slice(-3) !== ".md") return;
+
+        // TODO: move VFile into unified
+        const file = new VFile(code);
+        matter(file, { strip: true });
+        const html = await unified()
+          .use(remarkParse)
+          .use(remarkRehype)
+          .use(rehypeStringify)
+          .process(String(file));
+
+        return `
+export default ${JSON.stringify(String(html))};
+export const frontmatter = ${JSON.stringify(file.data.matter)};`;
       },
     },
   ],