load and display document

packages/docs-new/server.ts

@@ -1,3 +1,4 @@
+import compression from "compression"
 import express from "express"
 import { dirname, join } from "node:path"
 import { fileURLToPath } from "node:url"
@@ -8,6 +9,8 @@ const root = dirname(fileURLToPath(import.meta.url))
 
 const app = express()
 
+app.use(compression())
+
 let viteDevServer
 if (isProduction) {
   app.use(express.static(join(root, "dist/client")))

packages/docs-new/src/_default.page.client.tsx

@@ -10,7 +10,7 @@ const context = await getPage<PageContextBuiltInClient>()
 
 createRoot(document.querySelector("#app")!).render(
   <HeadProvider>
-    <RouteContextProvider value={{ routeParams: {}, ...context }}>
+    <RouteContextProvider value={{ routeParams: {}, ...(context as any) }}>
       <App>
         <context.Page />
       </App>

packages/docs-new/src/_default.page.server.tsx

@@ -6,7 +6,7 @@ import { dangerouslySkipEscape, escapeInject } from "vite-plugin-ssr"
 import { App } from "./app"
 import { RouteContextProvider } from "./route-context"
 
-export const passToClient = ["routeParams"]
+export const passToClient = ["routeParams", "pageData"]
 
 export function render(context: PageContextBuiltIn) {
   const headTags: React.ReactElement[] = []

packages/docs-new/src/pages/docs.page.server.tsx

@@ -0,0 +1,23 @@
+import type { OnBeforeRenderFn } from "../router-types"
+
+export type DocsPageProps = {
+  title?: string
+  description?: string
+  content: string
+}
+
+export const onBeforeRender: OnBeforeRenderFn<DocsPageProps> = async (
+  context,
+) => {
+  const documentPath = context.routeParams["*"]
+  const document = await import(`../docs/${documentPath}.md`)
+  return {
+    pageContext: {
+      pageData: {
+        title: document.attributes.title,
+        description: document.attributes.description,
+        content: document.html,
+      },
+    },
+  }
+}

packages/docs-new/src/pages/docs.page.tsx

@@ -1,19 +1,23 @@
 import clsx from "clsx"
+import { Meta, Title } from "react-head"
 import { AppLink } from "../components/app-link"
 import { MainNavigation } from "../components/main-navigation"
 import { guideLinks } from "../data/guide-links.preval"
 import { useScrolled } from "../hooks/dom/use-scrolled"
-import { useRouteParams } from "../route-context"
+import { usePageData } from "../route-context"
 import {
   docsProseClass,
   linkClass,
   maxWidthContainer,
 } from "../styles/components"
+import type { DocsPageProps } from "./docs.page.server"
 
 export default function DocsPage() {
-  const params = useRouteParams()
+  const data = usePageData<DocsPageProps>()
   return (
     <>
+      <Title>{data.title} | Reacord</Title>
+      <Meta name="description" content={data.description} />
       <HeaderPanel>
         <div className={maxWidthContainer}>
           <MainNavigation />
@@ -30,10 +34,10 @@ export default function DocsPage() {
             ))}
           </ul>
         </nav>
-        <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
-          {/* todo */}
-          {JSON.stringify(params, undefined, 2)}
-        </section>
+        <section
+          className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
+          dangerouslySetInnerHTML={{ __html: data.content }}
+        />
       </main>
     </>
   )

packages/docs-new/src/route-context.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react"
 
 export type RouteContextValue = {
   routeParams: Record<string, string>
+  pageData?: Record<string, unknown>
 }
 
 const Context = createContext<RouteContextValue>()
@@ -11,3 +12,7 @@ export const RouteContextProvider = Context.Provider
 export function useRouteParams() {
   return useContext(Context)?.routeParams ?? {}
 }
+
+export function usePageData<T>() {
+  return useContext(Context)?.pageData as T
+}

packages/docs-new/src/router-types.ts

@@ -0,0 +1,10 @@
+import type { Promisable } from "type-fest"
+import type { PageContextBuiltIn } from "vite-plugin-ssr"
+
+export type OnBeforeRenderFn<PageProps> = (
+  context: PageContextBuiltIn,
+) => Promisable<{
+  pageContext: {
+    pageData: PageProps
+  }
+}>