organize

packages/docs/app/components/header-nav.tsx

@@ -0,0 +1,31 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import { DocumentTextIcon, ExternalLinkIcon } from "@heroicons/react/solid"
+import { Link } from "remix"
+import { ExternalLink } from "~/components/external-link"
+import { linkClass } from "~/styles"
+
+export function HeaderNav() {
+  return (
+    <nav className="flex justify-between items-center">
+      <Link to="/">
+        <h1 className="text-3xl font-light">
+          reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
+        </h1>
+      </Link>
+      <div className="flex gap-4">
+        <Link className={linkClass} to="/docs/guides/getting-started">
+          <DocumentTextIcon className="inline align-sub w-5" /> Guides
+        </Link>
+        <a className={linkClass} href="/docs/api">
+          <CodeIcon className="inline align-sub w-5" /> API Reference
+        </a>
+        <ExternalLink
+          className={linkClass}
+          href="https://github.com/itsMapleLeaf/reacord"
+        >
+          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+        </ExternalLink>
+      </div>
+    </nav>
+  )
+}

packages/docs/app/docs.server.ts

@@ -1,8 +0,0 @@
-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/docs.tsx

@@ -1,17 +1,11 @@
-import { CodeIcon } from "@heroicons/react/outline"
-import {
-  DatabaseIcon,
-  DocumentTextIcon,
-  ExternalLinkIcon,
-} from "@heroicons/react/solid"
 import type { LoaderFunction } from "remix"
 import { Link, Outlet, useLoaderData } from "remix"
-import { ExternalLink } from "~/components/external-link"
 import { HeaderLayout } from "~/components/header-layout"
+import { HeaderNav } from "~/components/header-nav"
 import { SideNav } from "~/components/side-nav"
 import { SidebarLayout } from "~/components/sidebar-layout"
-import type { ContentIndexEntry } from "~/create-index.server"
+import type { ContentIndexEntry } from "~/helpers/create-index.server"
-import { createContentIndex } from "~/create-index.server"
+import { createContentIndex } from "~/helpers/create-index.server"
 import { linkClass } from "~/styles"
 
 type LoaderData = ContentIndexEntry[]
@@ -47,29 +41,3 @@ export default function Docs() {
     />
   )
 }
-
-function HeaderNav() {
-  return (
-    <nav className="flex justify-between items-center">
-      <Link to="/">
-        <h1 className="text-3xl font-light">
-          reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
-        </h1>
-      </Link>
-      <div className="flex gap-4">
-        <Link className={linkClass} to="/docs/guides/getting-started">
-          <DocumentTextIcon className="inline align-sub w-5" /> Guides
-        </Link>
-        <Link className={linkClass} to="/docs/api">
-          <DatabaseIcon className="inline align-sub w-5" /> API Reference
-        </Link>
-        <ExternalLink
-          className={linkClass}
-          href="https://github.com/itsMapleLeaf/reacord"
-        >
-          <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
-        </ExternalLink>
-      </div>
-    </nav>
-  )
-}

packages/docs/app/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from "remix"
-import LandingExample from "~/landing-example.mdx"
+import LandingExample from "~/components/landing-example.mdx"
 
 export default function Landing() {
   return (