actually generate doc index for real this time

packages/docs/app/routes/docs.tsx

@@ -0,0 +1,36 @@
+import type { LoaderFunction } from "remix"
+import { Link, Outlet, useLoaderData } from "remix"
+import { SideNav } from "~/components/side-nav"
+import { SidebarLayout } from "~/components/sidebar-layout"
+import type { ContentIndexEntry } from "~/create-index.server"
+import { createContentIndex } from "~/create-index.server"
+import { linkClass } from "~/styles"
+
+type LoaderData = ContentIndexEntry[]
+
+export const loader: LoaderFunction = async () => {
+  const data: LoaderData = await createContentIndex("app/routes/docs/guides")
+  return data
+}
+
+export default function Docs() {
+  const data: LoaderData = useLoaderData()
+  return (
+    <SidebarLayout
+      sidebar={
+        <SideNav heading="Guides">
+          {data.map(({ title, route }) => (
+            <Link className={linkClass} key={route} to={route}>
+              {title}
+            </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>
+      }
+    />
+  )
+}

packages/docs/app/routes/docs/guides/embeds.md

@@ -0,0 +1,9 @@
+---
+meta:
+  title: Embeds
+  description: Using dmbed components
+---
+
+# Embeds
+
+just do it lol

packages/docs/app/routes/docs/guides/getting-started.md

@@ -0,0 +1,31 @@
+---
+order: 0
+meta:
+  title: Getting Started
+  description: Learn how to get started with Reacord.
+---
+
+# Getting Started
+
+welcome
+
+- install it and do the thing
+- then do another thing
+
+## here's a code block
+
+```tsx
+import React from "react"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      You clicked {count} times
+      <Button onClick={() => setCount(count + 1)}>Click me</Button>
+    </>
+  )
+}
+```
+
+yeah

packages/docs/app/routes/index.tsx

@@ -1,17 +1,10 @@
-import type { LoaderFunction } from "remix"
-import { useLoaderData } from "remix"
-import type { DocsJson } from "~/docs.server"
-import { loadDocs } from "~/docs.server"
-
-export const loader: LoaderFunction = () => loadDocs()
-
 export default function Index() {
-  const data: DocsJson = useLoaderData()
   return (
     <main>
-      <pre className="w-full overflow-x-auto">
-        {JSON.stringify(data, undefined, 2)}
-      </pre>
+      <h1>Reacord</h1>
+      <pre>code snippet here</pre>
+      <p>Create interactive Discord messages using React and JSX.</p>
+      <button>Get Started</button>
     </main>
   )
 }