@raystack/chronicle 0.1.0-canary.5a730d4 → 0.1.0-canary.729744c

package/dist/cli/index.js

@@ -38,6 +38,12 @@ async function createViteConfig(options) {
       alias: {
         "@": path5.resolve(root, "src"),
         "@content": contentDir
+      },
+      dedupe: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"]
+    },
+    server: {
+      fs: {
+        allow: [root, contentDir]
       }
     },
     plugins: [
@@ -49,7 +55,7 @@ async function createViteConfig(options) {
           remarkDirective
         ],
         rehypePlugins: [
-          [rehypeShiki, { themes: { light: "github-light", dark: "github-dark" } }]
+          [rehypeShiki, { themes: { light: "github-light", dark: "github-dark" }, defaultColor: false }]
         ],
         mdExtensions: [".md"],
         mdxExtensions: [".mdx"]
@@ -215,18 +221,124 @@ var init_dev = __esm(() => {
   init_vite_config();
 });
 
+// src/server/adapters/vercel.ts
+var exports_vercel = {};
+__export(exports_vercel, {
+  buildVercelOutput: () => buildVercelOutput
+});
+import path7 from "path";
+import fs3 from "fs/promises";
+import { existsSync } from "fs";
+import chalk5 from "chalk";
+async function buildVercelOutput(options) {
+  const { distDir, contentDir, projectRoot } = options;
+  const outputDir = path7.resolve(projectRoot, ".vercel/output");
+  console.log(chalk5.gray("Generating Vercel output..."));
+  await fs3.rm(outputDir, { recursive: true, force: true });
+  const staticDir = path7.resolve(outputDir, "static");
+  const funcDir = path7.resolve(outputDir, "functions/index.func");
+  await fs3.mkdir(staticDir, { recursive: true });
+  await fs3.mkdir(funcDir, { recursive: true });
+  const clientDir = path7.resolve(distDir, "client");
+  await copyDir(clientDir, staticDir);
+  console.log(chalk5.gray("  Copied client assets to static/"));
+  if (existsSync(contentDir)) {
+    await copyContentAssets(contentDir, staticDir);
+    console.log(chalk5.gray("  Copied content assets to static/"));
+  }
+  const serverDir = path7.resolve(distDir, "server");
+  await copyDir(serverDir, funcDir);
+  console.log(chalk5.gray("  Copied server bundle to functions/"));
+  const templateSrc = path7.resolve(clientDir, "src/server/index.html");
+  await fs3.copyFile(templateSrc, path7.resolve(funcDir, "index.html"));
+  await fs3.writeFile(path7.resolve(funcDir, "package.json"), JSON.stringify({ type: "module" }, null, 2));
+  await fs3.writeFile(path7.resolve(funcDir, ".vc-config.json"), JSON.stringify({
+    runtime: "nodejs24.x",
+    handler: "entry-vercel.js",
+    launcherType: "Nodejs"
+  }, null, 2));
+  await fs3.writeFile(path7.resolve(outputDir, "config.json"), JSON.stringify({
+    version: 3,
+    routes: [
+      { handle: "filesystem" },
+      { src: "/(.*)", dest: "/index" }
+    ]
+  }, null, 2));
+  console.log(chalk5.green("Vercel output generated →"), outputDir);
+}
+async function copyDir(src, dest) {
+  await fs3.mkdir(dest, { recursive: true });
+  const entries = await fs3.readdir(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path7.join(src, entry.name);
+    const destPath = path7.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      await copyDir(srcPath, destPath);
+    } else {
+      await fs3.copyFile(srcPath, destPath);
+    }
+  }
+}
+async function copyContentAssets(contentDir, staticDir) {
+  const entries = await fs3.readdir(contentDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path7.join(contentDir, entry.name);
+    if (entry.isDirectory()) {
+      const destSubDir = path7.join(staticDir, entry.name);
+      await copyContentAssetsRecursive(srcPath, destSubDir);
+    } else {
+      const ext = path7.extname(entry.name).toLowerCase();
+      if (CONTENT_EXTENSIONS.has(ext)) {
+        await fs3.copyFile(srcPath, path7.join(staticDir, entry.name));
+      }
+    }
+  }
+}
+async function copyContentAssetsRecursive(srcDir, destDir) {
+  const entries = await fs3.readdir(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path7.join(srcDir, entry.name);
+    if (entry.isDirectory()) {
+      await copyContentAssetsRecursive(srcPath, path7.join(destDir, entry.name));
+    } else {
+      const ext = path7.extname(entry.name).toLowerCase();
+      if (CONTENT_EXTENSIONS.has(ext)) {
+        await fs3.mkdir(destDir, { recursive: true });
+        await fs3.copyFile(srcPath, path7.join(destDir, entry.name));
+      }
+    }
+  }
+}
+var CONTENT_EXTENSIONS;
+var init_vercel = __esm(() => {
+  CONTENT_EXTENSIONS = new Set([
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".svg",
+    ".webp",
+    ".ico",
+    ".pdf",
+    ".json",
+    ".yaml",
+    ".yml",
+    ".txt"
+  ]);
+});
+
 // src/server/prod.ts
 var exports_prod = {};
 __export(exports_prod, {
   startProdServer: () => startProdServer
 });
-import path8 from "path";
-import chalk6 from "chalk";
+import path9 from "path";
+import chalk7 from "chalk";
 async function startProdServer(options) {
   const { port, distDir } = options;
-  const serverEntry = path8.resolve(distDir, "server/entry-prod.js");
+  const serverEntry = path9.resolve(distDir, "server/entry-prod.js");
   const { startServer } = await import(serverEntry);
-  console.log(chalk6.cyan("Starting production server..."));
+  console.log(chalk7.cyan("Starting production server..."));
   return startServer({ port, distDir });
 }
 var init_prod = () => {};
@@ -436,78 +548,87 @@ var devCommand = new Command2("dev").description("Start development server").opt
 
 // src/cli/commands/build.ts
 import { Command as Command3 } from "commander";
-import path7 from "path";
-import chalk5 from "chalk";
-var buildCommand = new Command3("build").description("Build for production").option("-c, --content <path>", "Content directory").option("-o, --outDir <path>", "Output directory", "dist").action(async (options) => {
+import path8 from "path";
+import chalk6 from "chalk";
+var buildCommand = new Command3("build").description("Build for production").option("-c, --content <path>", "Content directory").option("-o, --outDir <path>", "Output directory", "dist").option("--adapter <adapter>", "Deploy adapter (vercel)").action(async (options) => {
   const contentDir = resolveContentDir(options.content);
-  const outDir = path7.resolve(options.outDir);
+  const outDir = path8.resolve(options.outDir);
   process.env.CHRONICLE_PROJECT_ROOT = process.cwd();
   process.env.CHRONICLE_CONTENT_DIR = contentDir;
-  console.log(chalk5.cyan("Building for production..."));
+  console.log(chalk6.cyan("Building for production..."));
   const { build } = await import("vite");
   const { createViteConfig: createViteConfig2 } = await Promise.resolve().then(() => (init_vite_config(), exports_vite_config));
   const baseConfig = await createViteConfig2({ root: PACKAGE_ROOT, contentDir });
-  console.log(chalk5.gray("Building client..."));
+  console.log(chalk6.gray("Building client..."));
   await build({
     ...baseConfig,
     build: {
-      outDir: path7.join(outDir, "client"),
+      outDir: path8.join(outDir, "client"),
       ssrManifest: true,
       rolldownOptions: {
-        input: path7.resolve(PACKAGE_ROOT, "src/server/index.html")
+        input: path8.resolve(PACKAGE_ROOT, "src/server/index.html")
       }
     }
   });
-  console.log(chalk5.gray("Building server..."));
+  const serverEntry = options.adapter === "vercel" ? path8.resolve(PACKAGE_ROOT, "src/server/entry-vercel.ts") : path8.resolve(PACKAGE_ROOT, "src/server/entry-prod.ts");
+  console.log(chalk6.gray("Building server..."));
   await build({
     ...baseConfig,
     ssr: {
       noExternal: true
     },
     build: {
-      outDir: path7.join(outDir, "server"),
-      ssr: path7.resolve(PACKAGE_ROOT, "src/server/entry-prod.ts")
+      outDir: path8.join(outDir, "server"),
+      ssr: serverEntry
     }
   });
-  console.log(chalk5.green("Build complete →"), outDir);
+  console.log(chalk6.green("Build complete →"), outDir);
+  if (options.adapter === "vercel") {
+    const { buildVercelOutput: buildVercelOutput2 } = await Promise.resolve().then(() => (init_vercel(), exports_vercel));
+    await buildVercelOutput2({
+      distDir: outDir,
+      contentDir,
+      projectRoot: process.cwd()
+    });
+  }
 });
 
 // src/cli/commands/start.ts
 import { Command as Command4 } from "commander";
-import path9 from "path";
-import chalk7 from "chalk";
+import path10 from "path";
+import chalk8 from "chalk";
 var startCommand = new Command4("start").description("Start production server").option("-p, --port <port>", "Port number", "3000").option("-c, --content <path>", "Content directory").option("-d, --dist <path>", "Dist directory", "dist").action(async (options) => {
   const contentDir = resolveContentDir(options.content);
   const port = parseInt(options.port, 10);
-  const distDir = path9.resolve(options.dist);
+  const distDir = path10.resolve(options.dist);
   process.env.CHRONICLE_PROJECT_ROOT = process.cwd();
   process.env.CHRONICLE_CONTENT_DIR = contentDir;
-  console.log(chalk7.cyan("Starting production server..."));
+  console.log(chalk8.cyan("Starting production server..."));
   const { startProdServer: startProdServer2 } = await Promise.resolve().then(() => (init_prod(), exports_prod));
   await startProdServer2({ port, root: PACKAGE_ROOT, distDir });
 });
 
 // src/cli/commands/serve.ts
 import { Command as Command5 } from "commander";
-import path10 from "path";
-import chalk8 from "chalk";
+import path11 from "path";
+import chalk9 from "chalk";
 var serveCommand = new Command5("serve").description("Build and start production server").option("-p, --port <port>", "Port number", "3000").option("-c, --content <path>", "Content directory").option("-o, --outDir <path>", "Output directory", "dist").action(async (options) => {
   const contentDir = resolveContentDir(options.content);
   const port = parseInt(options.port, 10);
-  const outDir = path10.resolve(options.outDir);
+  const outDir = path11.resolve(options.outDir);
   process.env.CHRONICLE_PROJECT_ROOT = process.cwd();
   process.env.CHRONICLE_CONTENT_DIR = contentDir;
-  console.log(chalk8.cyan("Building for production..."));
+  console.log(chalk9.cyan("Building for production..."));
   const { build } = await import("vite");
   const { createViteConfig: createViteConfig2 } = await Promise.resolve().then(() => (init_vite_config(), exports_vite_config));
   const baseConfig = await createViteConfig2({ root: PACKAGE_ROOT, contentDir });
   await build({
     ...baseConfig,
     build: {
-      outDir: path10.join(outDir, "client"),
+      outDir: path11.join(outDir, "client"),
       ssrManifest: true,
       rolldownOptions: {
-        input: path10.resolve(PACKAGE_ROOT, "src/server/index.html")
+        input: path11.resolve(PACKAGE_ROOT, "src/server/index.html")
       }
     }
   });
@@ -517,11 +638,11 @@ var serveCommand = new Command5("serve").description("Build and start production
       noExternal: true
     },
     build: {
-      outDir: path10.join(outDir, "server"),
-      ssr: path10.resolve(PACKAGE_ROOT, "src/server/entry-prod.ts")
+      outDir: path11.join(outDir, "server"),
+      ssr: path11.resolve(PACKAGE_ROOT, "src/server/entry-prod.ts")
     }
   });
-  console.log(chalk8.cyan("Starting production server..."));
+  console.log(chalk9.cyan("Starting production server..."));
   const { startProdServer: startProdServer2 } = await Promise.resolve().then(() => (init_prod(), exports_prod));
   await startProdServer2({ port, root: PACKAGE_ROOT, distDir: outDir });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.1.0-canary.5a730d4",
+  "version": "0.1.0-canary.729744c",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",
@@ -48,7 +48,6 @@
     "mermaid": "^11.13.0",
     "openapi-types": "^12.1.3",
     "react": "^19.0.0",
-    "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.13.1",
     "remark-directive": "^4.0.0",

package/src/cli/commands/build.ts

@@ -8,6 +8,7 @@ export const buildCommand = new Command('build')
   .description('Build for production')
   .option('-c, --content <path>', 'Content directory')
   .option('-o, --outDir <path>', 'Output directory', 'dist')
+  .option('--adapter <adapter>', 'Deploy adapter (vercel)')
   .action(async (options) => {
     const contentDir = resolveContentDir(options.content)
     const outDir = path.resolve(options.outDir)
@@ -35,7 +36,11 @@ export const buildCommand = new Command('build')
       },
     })
 
-    // Build server bundle (noExternal: true to bundle all deps for portability)
+    // Build server bundle
+    const serverEntry = options.adapter === 'vercel'
+      ? path.resolve(PACKAGE_ROOT, 'src/server/entry-vercel.ts')
+      : path.resolve(PACKAGE_ROOT, 'src/server/entry-prod.ts')
+
     console.log(chalk.gray('Building server...'))
     await build({
       ...baseConfig,
@@ -44,9 +49,19 @@ export const buildCommand = new Command('build')
       },
       build: {
         outDir: path.join(outDir, 'server'),
-        ssr: path.resolve(PACKAGE_ROOT, 'src/server/entry-prod.ts'),
+        ssr: serverEntry,
       },
     })
 
     console.log(chalk.green('Build complete →'), outDir)
+
+    // Run Vercel adapter post-build
+    if (options.adapter === 'vercel') {
+      const { buildVercelOutput } = await import('@/server/adapters/vercel')
+      await buildVercelOutput({
+        distDir: outDir,
+        contentDir,
+        projectRoot: process.cwd(),
+      })
+    }
   })

package/src/components/ui/search.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from "react-router-dom";
 import { Button, Command, Dialog, Text } from "@raystack/apsara";
 import { cx } from "class-variance-authority";
 import { DocumentIcon, HashtagIcon } from "@heroicons/react/24/outline";
-import { isMacOs } from "react-device-detect";
 import { MethodBadge } from "@/components/api/method-badge";
 import styles from "./search.module.css";
 
@@ -45,7 +44,7 @@ function SearchShortcutKey({ className }: { className?: string }) {
   const [key, setKey] = useState("\u2318");
 
   useEffect(() => {
-    setKey(isMacOs ? "\u2318" : "Ctrl");
+    setKey(navigator.platform?.startsWith("Mac") ? "\u2318" : "Ctrl");
   }, []);
 
   return (

package/src/server/adapters/vercel.ts

@@ -0,0 +1,133 @@
+import path from 'path'
+import fs from 'fs/promises'
+import { existsSync } from 'fs'
+import chalk from 'chalk'
+
+interface VercelAdapterOptions {
+  distDir: string
+  contentDir: string
+  projectRoot: string
+}
+
+const CONTENT_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico',
+  '.pdf', '.json', '.yaml', '.yml', '.txt',
+])
+
+export async function buildVercelOutput(options: VercelAdapterOptions) {
+  const { distDir, contentDir, projectRoot } = options
+  const outputDir = path.resolve(projectRoot, '.vercel/output')
+
+  console.log(chalk.gray('Generating Vercel output...'))
+
+  // Clean previous output
+  await fs.rm(outputDir, { recursive: true, force: true })
+
+  // Create output directories
+  const staticDir = path.resolve(outputDir, 'static')
+  const funcDir = path.resolve(outputDir, 'functions/index.func')
+  await fs.mkdir(staticDir, { recursive: true })
+  await fs.mkdir(funcDir, { recursive: true })
+
+  // 1. Copy client assets → .vercel/output/static/
+  const clientDir = path.resolve(distDir, 'client')
+  await copyDir(clientDir, staticDir)
+  console.log(chalk.gray('  Copied client assets to static/'))
+
+  // 2. Copy content dir assets (images, etc.) → .vercel/output/static/
+  if (existsSync(contentDir)) {
+    await copyContentAssets(contentDir, staticDir)
+    console.log(chalk.gray('  Copied content assets to static/'))
+  }
+
+  // 3. Copy server bundle → .vercel/output/functions/index.func/
+  const serverDir = path.resolve(distDir, 'server')
+  await copyDir(serverDir, funcDir)
+  console.log(chalk.gray('  Copied server bundle to functions/'))
+
+  // 4. Copy HTML template into function dir (not accessible from static/ at runtime)
+  const templateSrc = path.resolve(clientDir, 'src/server/index.html')
+  await fs.copyFile(templateSrc, path.resolve(funcDir, 'index.html'))
+
+  // 5. Write package.json for ESM support
+  await fs.writeFile(
+    path.resolve(funcDir, 'package.json'),
+    JSON.stringify({ type: 'module' }, null, 2),
+  )
+
+  // 6. Write .vc-config.json
+  await fs.writeFile(
+    path.resolve(funcDir, '.vc-config.json'),
+    JSON.stringify({
+      runtime: 'nodejs24.x',
+      handler: 'entry-vercel.js',
+      launcherType: 'Nodejs',
+    }, null, 2),
+  )
+
+  // 7. Write config.json
+  await fs.writeFile(
+    path.resolve(outputDir, 'config.json'),
+    JSON.stringify({
+      version: 3,
+      routes: [
+        { handle: 'filesystem' },
+        { src: '/(.*)', dest: '/index' },
+      ],
+    }, null, 2),
+  )
+
+  console.log(chalk.green('Vercel output generated →'), outputDir)
+}
+
+async function copyDir(src: string, dest: string) {
+  await fs.mkdir(dest, { recursive: true })
+  const entries = await fs.readdir(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      await copyDir(srcPath, destPath)
+    } else {
+      await fs.copyFile(srcPath, destPath)
+    }
+  }
+}
+
+async function copyContentAssets(contentDir: string, staticDir: string) {
+  const entries = await fs.readdir(contentDir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(contentDir, entry.name)
+
+    if (entry.isDirectory()) {
+      const destSubDir = path.join(staticDir, entry.name)
+      await copyContentAssetsRecursive(srcPath, destSubDir)
+    } else {
+      const ext = path.extname(entry.name).toLowerCase()
+      if (CONTENT_EXTENSIONS.has(ext)) {
+        await fs.copyFile(srcPath, path.join(staticDir, entry.name))
+      }
+    }
+  }
+}
+
+async function copyContentAssetsRecursive(srcDir: string, destDir: string) {
+  const entries = await fs.readdir(srcDir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name)
+
+    if (entry.isDirectory()) {
+      await copyContentAssetsRecursive(srcPath, path.join(destDir, entry.name))
+    } else {
+      const ext = path.extname(entry.name).toLowerCase()
+      if (CONTENT_EXTENSIONS.has(ext)) {
+        await fs.mkdir(destDir, { recursive: true })
+        await fs.copyFile(srcPath, path.join(destDir, entry.name))
+      }
+    }
+  }
+}

package/src/server/entry-prod.ts

@@ -3,16 +3,22 @@ import { createServer } from 'http'
 import { readFileSync, createReadStream } from 'fs'
 import fsPromises from 'fs/promises'
 import path from 'path'
-import React from 'react'
 import { render } from './entry-server'
 import { matchRoute } from './router'
 import { loadConfig } from '@/lib/config'
 import { loadApiSpecs } from '@/lib/openapi'
 import { getPage, loadPageComponent, buildPageTree } from '@/lib/source'
-import { mdxComponents } from '@/components/mdx'
+import { handleRequest } from './request-handler'
 
 export { render, matchRoute, loadConfig, loadApiSpecs, getPage, loadPageComponent, buildPageTree }
 
+async function writeResponse(res: import('http').ServerResponse, response: Response) {
+  res.statusCode = response.status
+  response.headers.forEach((value: string, key: string) => res.setHeader(key, value))
+  const body = await response.text()
+  res.end(body)
+}
+
 export async function startServer(options: { port: number; distDir: string }) {
   const { port, distDir } = options
 
@@ -23,19 +29,17 @@ export async function startServer(options: { port: number; distDir: string }) {
   const sirv = (await import('sirv')).default
   const assets = sirv(clientDir, { gzip: true })
 
+  const baseUrl = `http://localhost:${port}`
+
   const server = createServer(async (req, res) => {
     const url = req.url || '/'
 
     try {
-      // API routes
-      const routeHandler = matchRoute(new URL(url, `http://localhost:${port}`).href)
+      // API routes — handled by shared request handler
+      const routeHandler = matchRoute(new URL(url, baseUrl).href)
       if (routeHandler) {
-        const request = new Request(new URL(url, `http://localhost:${port}`))
-        const response = await routeHandler(request)
-        res.statusCode = response.status
-        response.headers.forEach((value: string, key: string) => res.setHeader(key, value))
-        const body = await response.text()
-        res.end(body)
+        const response = await routeHandler(new Request(new URL(url, baseUrl)))
+        await writeResponse(res, response)
         return
       }
 
@@ -67,43 +71,9 @@ export async function startServer(options: { port: number; distDir: string }) {
       })
       if (assetHandled) return
 
-      // Resolve page data
-      const pathname = new URL(url, `http://localhost:${port}`).pathname
-      const slug = pathname === '/' ? [] : pathname.slice(1).split('/').filter(Boolean)
-
-      const config = loadConfig()
-      const apiSpecs = config.api?.length ? loadApiSpecs(config.api) : []
-
-      const [tree, sourcePage] = await Promise.all([
-        buildPageTree(),
-        getPage(slug),
-      ])
-
-      let pageData = null
-      let embeddedData: any = { config, tree, slug, frontmatter: null, filePath: null }
-
-      if (sourcePage) {
-        const component = await loadPageComponent(sourcePage)
-        pageData = {
-          slug,
-          frontmatter: sourcePage.frontmatter,
-          content: component ? React.createElement(component, { components: mdxComponents }) : null,
-        }
-        embeddedData.frontmatter = sourcePage.frontmatter
-        embeddedData.filePath = sourcePage.filePath
-      }
-
-      // SSR render
-      const html = render(url, { config, tree, page: pageData, apiSpecs })
-
-      const dataScript = `<script>window.__PAGE_DATA__ = ${JSON.stringify(embeddedData)}</script>`
-      const finalHtml = template
-        .replace('<!--head-outlet-->', `<!--head-outlet-->${dataScript}`)
-        .replace('<!--ssr-outlet-->', html)
-
-      res.setHeader('Content-Type', 'text/html')
-      res.statusCode = 200
-      res.end(finalHtml)
+      // SSR render — handled by shared request handler
+      const response = await handleRequest(url, { template, baseUrl })
+      await writeResponse(res, response)
     } catch (e) {
       console.error(e)
       res.statusCode = 500

package/src/server/entry-vercel.ts

@@ -0,0 +1,26 @@
+// Vercel serverless function entry — built by Vite, deployed as catch-all function
+import type { IncomingMessage, ServerResponse } from 'http'
+import { readFileSync } from 'fs'
+import path from 'path'
+import { handleRequest } from './request-handler'
+
+const templatePath = path.resolve(__dirname, 'index.html')
+const template = readFileSync(templatePath, 'utf-8')
+
+export default async function handler(req: IncomingMessage, res: ServerResponse) {
+  const url = req.url || '/'
+  const baseUrl = `https://${req.headers.host || 'localhost'}`
+
+  try {
+    const response = await handleRequest(url, { template, baseUrl })
+
+    res.statusCode = response.status
+    response.headers.forEach((value: string, key: string) => res.setHeader(key, value))
+    const body = await response.text()
+    res.end(body)
+  } catch (e) {
+    console.error(e)
+    res.statusCode = 500
+    res.end((e as Error).message)
+  }
+}

package/src/server/request-handler.ts

@@ -0,0 +1,63 @@
+// Shared request handler for API routes + SSR rendering
+// Used by entry-prod.ts (Node) and entry-vercel.ts (Vercel)
+import React from 'react'
+import { render } from './entry-server'
+import { matchRoute } from './router'
+import { loadConfig } from '@/lib/config'
+import { loadApiSpecs } from '@/lib/openapi'
+import { getPage, loadPageComponent, buildPageTree } from '@/lib/source'
+import { mdxComponents } from '@/components/mdx'
+
+export interface RequestHandlerOptions {
+  template: string
+  baseUrl: string
+}
+
+export async function handleRequest(url: string, options: RequestHandlerOptions): Promise<Response> {
+  const { template, baseUrl } = options
+  const fullUrl = new URL(url, baseUrl).href
+
+  // API routes
+  const routeHandler = matchRoute(fullUrl)
+  if (routeHandler) {
+    return routeHandler(new Request(fullUrl))
+  }
+
+  // SSR render
+  const pathname = new URL(url, baseUrl).pathname
+  const slug = pathname === '/' ? [] : pathname.slice(1).split('/').filter(Boolean)
+
+  const config = loadConfig()
+  const apiSpecs = config.api?.length ? loadApiSpecs(config.api) : []
+
+  const [tree, sourcePage] = await Promise.all([
+    buildPageTree(),
+    getPage(slug),
+  ])
+
+  let pageData = null
+  let embeddedData: any = { config, tree, slug, frontmatter: null, filePath: null }
+
+  if (sourcePage) {
+    const component = await loadPageComponent(sourcePage)
+    pageData = {
+      slug,
+      frontmatter: sourcePage.frontmatter,
+      content: component ? React.createElement(component, { components: mdxComponents }) : null,
+    }
+    embeddedData.frontmatter = sourcePage.frontmatter
+    embeddedData.filePath = sourcePage.filePath
+  }
+
+  const html = render(url, { config, tree, page: pageData, apiSpecs })
+
+  const dataScript = `<script>window.__PAGE_DATA__ = ${JSON.stringify(embeddedData)}</script>`
+  const finalHtml = template
+    .replace('<!--head-outlet-->', `<!--head-outlet-->${dataScript}`)
+    .replace('<!--ssr-outlet-->', html)
+
+  return new Response(finalHtml, {
+    status: 200,
+    headers: { 'Content-Type': 'text/html' },
+  })
+}

package/src/server/vite-config.ts

@@ -25,6 +25,12 @@ export async function createViteConfig(options: ViteConfigOptions): Promise<Inli
         '@': path.resolve(root, 'src'),
         '@content': contentDir,
       },
+      dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
+    },
+    server: {
+      fs: {
+        allow: [root, contentDir],
+      },
     },
     plugins: [
       mdx({
@@ -35,7 +41,7 @@ export async function createViteConfig(options: ViteConfigOptions): Promise<Inli
           remarkDirective,
         ],
         rehypePlugins: [
-          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' } }],
+          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' }, defaultColor: false }],
         ],
         mdExtensions: ['.md'],
         mdxExtensions: ['.mdx'],

package/src/themes/default/Page.module.css

@@ -38,18 +38,22 @@
   margin-bottom: var(--rs-space-3);
 }
 
-.content :global(pre code span) {
-  color: var(--shiki-light);
+.content :global(pre) {
+  background-color: var(--shiki-light-bg, #fff);
 }
 
-:global([data-theme="dark"]) .content :global(pre code span) {
-  color: var(--shiki-dark);
+.content :global(pre code span) {
+  color: var(--shiki-light);
 }
 
 :global([data-theme="dark"]) .content :global(pre) {
   background-color: var(--shiki-dark-bg, #24292e);
 }
 
+:global([data-theme="dark"]) .content :global(pre code span) {
+  color: var(--shiki-dark);
+}
+
 .content img {
   max-width: 100%;
   height: auto;