generate guide links at build time

packages/docs-new/src/components/guide-page-layout.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { guideLinks } from "../data/guide-links"
+import { guideLinks } from "../data/guide-links.preval"
 import { useScrolled } from "../hooks/dom/use-scrolled"
 import {
   docsProseClass,

packages/docs-new/src/components/main-navigation.tsx

@@ -1,5 +1,5 @@
 import { AppLink } from "../components/app-link"
-import { guideLinks } from "../data/guide-links"
+import { guideLinks } from "../data/guide-links.preval"
 import { mainLinks } from "../data/main-links"
 import { linkClass } from "../styles/components"
 import { PopoverMenu } from "./popover-menu"

packages/docs-new/src/data/guide-links.preval.tsx

@@ -0,0 +1,34 @@
+import glob from "fast-glob"
+import grayMatter from "gray-matter"
+import { readFile } from "node:fs/promises"
+import { join } from "node:path"
+import type { AppLinkProps } from "../components/app-link"
+
+const docsFolderPath = new URL("../docs", import.meta.url).pathname
+const guideFiles = await glob("**/*.md", { cwd: docsFolderPath })
+
+const entries = await Promise.all(
+  guideFiles.map(async (file) => {
+    const content = await readFile(join(docsFolderPath, file), "utf-8")
+    const { data } = grayMatter(content)
+
+    let order = Number(data.order)
+    if (!Number.isFinite(order)) {
+      order = Number.POSITIVE_INFINITY
+    }
+
+    return {
+      route: `/docs/${file.replace(/\.mdx?$/, "")}`,
+      title: String(data.title || ""),
+      order,
+    }
+  }),
+)
+
+export const guideLinks: AppLinkProps[] = entries
+  .sort((a, b) => a.order - b.order)
+  .map((item) => ({
+    type: "internal",
+    label: item.title,
+    to: item.route,
+  }))

packages/docs-new/src/data/guide-links.tsx

@@ -1,3 +0,0 @@
-import type { AppLinkProps } from "../components/app-link"
-
-export const guideLinks: AppLinkProps[] = []