failed attempt at automatic index generation

packages/docs/app/docs.tsx

@@ -0,0 +1,62 @@
+import { readFile } from "node:fs/promises"
+import remarkFrontmatter from "remark-frontmatter"
+import remarkParse from "remark-parse"
+import type { LoaderFunction } from "remix"
+import { Link, Outlet } from "remix"
+import { unified } from "unified"
+import { SideNav } from "~/components/side-nav"
+import { SidebarLayout } from "~/components/sidebar-layout"
+import { linkClass } from "~/styles"
+
+export const loader: LoaderFunction = async () => {
+  const glob = await import("fast-glob")
+
+  const contentFiles = await glob.default(["**/*.mdx", "**/*.md"], {
+    cwd: "content",
+    absolute: true,
+  })
+
+  const contentModules = await Promise.all(
+    contentFiles.map(async (filePath) => {
+      const content = await readFile(filePath, "utf8")
+      const result = await unified()
+        .use(remarkParse)
+        .use(remarkFrontmatter)
+        .process(content)
+
+      return { filePath, result: result.toString() }
+    }),
+  )
+
+  console.log(contentModules)
+
+  return {}
+}
+
+export default function Docs() {
+  return (
+    <SidebarLayout
+      sidebar={
+        <SideNav heading="Guides">
+          <Link className={linkClass} to="getting-started">
+            Getting Started
+          </Link>
+          <Link className={linkClass} to="embeds">
+            Embeds
+          </Link>
+          <Link className={linkClass} to="buttons">
+            Buttons
+          </Link>
+          <Link className={linkClass} to="select-menus">
+            Select Menus
+          </Link>
+        </SideNav>
+      }
+      body={
+        <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
+          <Outlet />
+        </section>
+      }
+    />
+  )
+}