make things pretty

packages/docs/app/routes/docs.tsx

@@ -0,0 +1,32 @@
+import { Link, Outlet } from "remix"
+import { SideNav } from "~/components/side-nav"
+import { SidebarLayout } from "~/components/sidebar-layout"
+import { linkClass } from "~/styles"
+
+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>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,30 @@
+---
+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