wip custom reference page

packages/website/app/routes/api.tsx

@@ -0,0 +1,82 @@
+import clsx from "clsx"
+import { Fragment } from "react"
+import type { LoaderFunction } from "remix"
+import { Outlet, useLoaderData } from "remix"
+import { loadApiData } from "~/modules/api/api-data.server"
+import { ActiveLink } from "~/modules/navigation/active-link"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+import { AppLink } from "~/modules/navigation/app-link"
+import { MainNavigation } from "~/modules/navigation/main-navigation"
+import {
+  docsProseClass,
+  linkClass,
+  maxWidthContainer,
+} from "~/modules/ui/components"
+
+type LoaderData = {
+  categorySections: Array<{
+    title: string
+    links: AppLinkProps[]
+  }>
+  // [key: string]: unknown
+}
+
+export const loader: LoaderFunction = async () => {
+  const apiData = await loadApiData()
+
+  const childrenById = Object.fromEntries(
+    apiData.children.map((child) => [child.id, { name: child.name }]),
+  )
+
+  const data: LoaderData = {
+    categorySections: apiData.categories.map((category) => ({
+      title: category.title,
+      links: category.children
+        .map((childId) => childrenById[childId])
+        .flatMap<AppLinkProps>((child) =>
+          child
+            ? { to: `/api/${child.name}`, type: "router", children: child.name }
+            : [],
+        ),
+    })),
+  }
+  return data
+}
+
+export default function ApiReferencePage() {
+  const data = useLoaderData<LoaderData>()
+  return (
+    <div className="isolate">
+      <header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </header>
+
+      <div className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          {data.categorySections.map((category) => (
+            <Fragment key={category.title}>
+              <h2 className="text-2xl">{category.title}</h2>
+              <ul className="mt-3 mb-6 flex flex-col gap-2 items-start">
+                {category.links.map((link) => (
+                  <li key={link.to}>
+                    <ActiveLink to={link.to}>
+                      {({ active }) => (
+                        <AppLink {...link} className={linkClass({ active })} />
+                      )}
+                    </ActiveLink>
+                  </li>
+                ))}
+              </ul>
+            </Fragment>
+          ))}
+        </nav>
+
+        <main className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

packages/website/app/routes/api/$name.tsx

@@ -0,0 +1,51 @@
+import type { LoaderFunction } from "remix"
+import { useLoaderData } from "remix"
+import { inspect } from "node:util"
+import { loadApiData } from "~/modules/api/api-data.server"
+import { renderMarkdown } from "~/modules/markdown/render-markdown.server"
+
+type LoaderData = {
+  title: string
+  description?: { __html: string }
+}
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const apiData = await loadApiData()
+
+  const entityName = params.name!
+
+  const info = apiData.children?.find((child) => child.name === entityName)
+  console.log(inspect(info, { depth: Number.POSITIVE_INFINITY }))
+
+  const description = [
+    info?.comment?.shortText,
+    info?.comment?.text,
+    info?.signatures?.[0]?.comment?.shortText,
+    info?.signatures?.[0]?.comment?.text,
+  ]
+    .filter(Boolean)
+    .join("\n\n")
+
+  const data: LoaderData = {
+    title: entityName,
+    description: description ? await renderMarkdown(description) : undefined,
+  }
+  return data
+}
+
+export default function ApiDetailPage() {
+  const data = useLoaderData<LoaderData>()
+
+  return (
+    <>
+      <h1>{data.title}</h1>
+      {data.description ? (
+        <section dangerouslySetInnerHTML={data.description} />
+      ) : undefined}
+    </>
+  )
+}
+
+function addDefined<Value extends number | string>(
+  ...values: Array<Value | undefined>
+): Value | undefined {}