use new docs

packages/docs/src/pages/docs.page.route.tsx

@@ -0,0 +1 @@
+export default "/docs/*"

packages/docs/src/pages/docs.page.server.tsx

@@ -0,0 +1,23 @@
+import type { OnBeforeRenderFn } from "../router-types"
+
+export type DocsPageProps = {
+  title?: string
+  description?: string
+  content: string
+}
+
+export const onBeforeRender: OnBeforeRenderFn<DocsPageProps> = async (
+  context,
+) => {
+  const documentPath = context.routeParams["*"]
+  const document = await import(`../docs/${documentPath}.md`)
+  return {
+    pageContext: {
+      pageData: {
+        title: document.attributes.title,
+        description: document.attributes.description,
+        content: document.html,
+      },
+    },
+  }
+}

packages/docs/src/pages/docs.page.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx"
+import { Meta, Title } from "react-head"
+import { AppLink } from "../components/app-link"
+import { MainNavigation } from "../components/main-navigation"
+import { guideLinks } from "../data/guide-links.preval"
+import { useScrolled } from "../hooks/dom/use-scrolled"
+import { usePageData } from "../route-context"
+import {
+  docsProseClass,
+  linkClass,
+  maxWidthContainer,
+} from "../styles/components"
+import type { DocsPageProps } from "./docs.page.server"
+
+export default function DocsPage() {
+  const data = usePageData<DocsPageProps>()
+  return (
+    <>
+      <Title>{data.title} | Reacord</Title>
+      <Meta name="description" content={data.description} />
+      <HeaderPanel>
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </HeaderPanel>
+      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          <h2 className="text-2xl">Guides</h2>
+          <ul className="mt-3 flex flex-col gap-2 items-start">
+            {guideLinks.map((link) => (
+              <li key={link.to}>
+                <AppLink {...link} className={linkClass} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <section
+          className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
+          dangerouslySetInnerHTML={{ __html: data.content }}
+        />
+      </main>
+    </>
+  )
+}
+
+function HeaderPanel({ children }: { children: React.ReactNode }) {
+  const isScrolled = useScrolled()
+
+  const className = clsx(
+    isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
+  )
+
+  return <header className={className}>{children}</header>
+}

packages/docs/src/pages/index.page.tsx

@@ -0,0 +1,30 @@
+import packageJson from "reacord/package.json"
+import { html as landingExampleHtml } from "../components/landing-example.md"
+import { MainNavigation } from "../components/main-navigation"
+import { maxWidthContainer } from "../styles/components"
+
+export default function LandingPage() {
+  return (
+    <div className="flex flex-col min-w-0 min-h-screen text-center">
+      <header className={maxWidthContainer}>
+        <MainNavigation />
+      </header>
+      <div className="px-4 pb-8 flex flex-1">
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+          <h1 className="text-6xl font-light">reacord</h1>
+          <section
+            className="mx-auto text-sm sm:text-base"
+            dangerouslySetInnerHTML={{ __html: landingExampleHtml }}
+          />
+          <p className="text-2xl font-light">{packageJson.description}</p>
+          <a
+            href="/docs/getting-started"
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
+          >
+            Get Started
+          </a>
+        </main>
+      </div>
+    </div>
+  )
+}