docs: huge migration to runtime asset cache

packages/docs/src/navigation/app-link.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { ExternalLink } from "../dom/external-link"
+
+export type AppLinkProps = {
+  type: "internal" | "external"
+  label: React.ReactNode
+  to: string
+  className?: string
+}
+
+export function AppLink(props: AppLinkProps) {
+  switch (props.type) {
+    case "internal":
+      return (
+        <a className={props.className} href={props.to}>
+          {props.label}
+        </a>
+      )
+
+    case "external":
+      return (
+        <ExternalLink className={props.className} href={props.to}>
+          {props.label}
+        </ExternalLink>
+      )
+  }
+}

packages/docs/src/navigation/guide-links.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 "./app-link"
+
+const docsFolder = new URL("../guides", import.meta.url).pathname
+const guideFiles = await glob("**/*.md", { cwd: docsFolder })
+
+const entries = await Promise.all(
+  guideFiles.map(async (file) => {
+    const content = await readFile(join(docsFolder, file), "utf-8")
+    const { data } = grayMatter(content)
+
+    let order = Number(data.order)
+    if (!Number.isFinite(order)) {
+      order = Number.POSITIVE_INFINITY
+    }
+
+    return {
+      route: `/guides/${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/src/navigation/main-links.tsx

@@ -0,0 +1,38 @@
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid/esm"
+import React from "react"
+import { inlineIconClass } from "../ui/components"
+import type { AppLinkProps } from "./app-link"
+
+export const mainLinks: AppLinkProps[] = [
+  {
+    type: "internal",
+    to: "/guides/getting-started",
+    label: (
+      <>
+        <DocumentTextIcon className={inlineIconClass} /> Guides
+      </>
+    ),
+  },
+  {
+    type: "internal",
+    to: "/guides/api",
+    label: (
+      <>
+        <CodeIcon className={inlineIconClass} /> API Reference
+      </>
+    ),
+  },
+  {
+    type: "external",
+    to: "https://github.com/itsMapleLeaf/reacord",
+    label: (
+      <>
+        <ExternalLinkIcon className={inlineIconClass} /> GitHub
+      </>
+    ),
+  },
+]

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

@@ -0,0 +1,40 @@
+import React from "react"
+import { linkClass } from "../ui/components"
+import { PopoverMenu } from "../ui/popover-menu"
+import { AppLink } from "./app-link"
+import { guideLinks } from "./guide-links"
+import { mainLinks } from "./main-links"
+
+export function MainNavigation() {
+  return (
+    <nav className="flex justify-between items-center h-16">
+      <a href="/">
+        <h1 className="text-3xl font-light">reacord</h1>
+      </a>
+      <div className="hidden md:flex gap-4">
+        {mainLinks.map((link) => (
+          <AppLink {...link} key={link.to} className={linkClass} />
+        ))}
+      </div>
+      <div className="md:hidden" id="main-navigation-popover">
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+        </PopoverMenu>
+      </div>
+    </nav>
+  )
+}