wip custom reference page

2022-01-14 01:01:28 -06:00
parent 05bda71ad6
commit 723d663d3c
9 changed files with 276 additions and 93 deletions
--- a/packages/website/app/routes/api.tsx
+++ b/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>
+  )
+}