use suspense

packages/docs-new/src/app.tsx

@@ -1,12 +1,12 @@
 import { description } from "reacord/package.json"
+import { lazy, Suspense } from "react"
 import { Meta, Title } from "react-head"
-import type { ReactLocation } from "react-location"
-import { Link, Outlet, Router } from "react-location"
-import { routes } from "./routes"
+import { Link, Route, Routes } from "react-router-dom"
+import { lazyNamed } from "./helpers/lazy-named"
 
-export function App({ location }: { location: ReactLocation }) {
+export function App() {
   return (
-    <Router location={location} routes={routes}>
+    <>
       <Title>Reacord</Title>
       <Meta name="description" content={description} />
       <nav>
@@ -14,7 +14,36 @@ export function App({ location }: { location: ReactLocation }) {
         <Link to="docs/getting-started">Getting Started</Link>{" "}
         <Link to="docs/api">API Reference</Link>
       </nav>
-      <Outlet />
-    </Router>
+      <Suspense fallback={<></>}>
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+          <Route path="docs" element={<DocumentPageLayout />}>
+            {docs.map(({ route, component: Component }) => (
+              <Route key={route} path={route} element={<Component />} />
+            ))}
+          </Route>
+        </Routes>
+      </Suspense>
+    </>
   )
 }
+
+const LandingPage = lazyNamed(
+  "LandingPage",
+  () => import("./pages/landing-page"),
+)
+
+const DocumentPageLayout = lazyNamed(
+  "DocumentPage",
+  () => import("./pages/document-page"),
+)
+
+const docs = Object.entries(import.meta.glob("./docs/*.md")).map(
+  ([path, loadModule]) => ({
+    route: path.replace("./docs/", "").replace(/\.md$/, ""),
+    component: lazy(async () => {
+      const m = await loadModule()
+      return { default: m.default || m }
+    }),
+  }),
+)