generate and load docs json

packages/docs/app/load-docs.server.ts

@@ -0,0 +1,8 @@
+import { readFile } from "node:fs/promises"
+import type { JSONOutput } from "typedoc"
+
+export type DocsJson = JSONOutput.Reflection
+
+export async function loadDocs(): Promise<DocsJson> {
+  return JSON.parse(await readFile("app/docs.json", "utf8"))
+}

packages/docs/app/routes/index.tsx

@@ -1,32 +1,15 @@
+import type { LoaderFunction } from "remix"
+import { useLoaderData } from "remix"
+import type { DocsJson } from "~/load-docs.server"
+import { loadDocs } from "~/load-docs.server"
+
+export const loader: LoaderFunction = () => loadDocs()
+
 export default function Index() {
+  const data: DocsJson = useLoaderData()
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
+    <main>
+      <pre>{JSON.stringify(data, undefined, 2)}</pre>
+    </main>
   )
 }