@raystack/chronicle 0.1.0-canary.c5d277e → 0.1.0-canary.cb102e9

package/src/cli/commands/build.ts

@@ -8,10 +8,17 @@ 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)
 
+    const VALID_ADAPTERS = ['vercel']
+    if (options.adapter && !VALID_ADAPTERS.includes(options.adapter)) {
+      console.error(chalk.red(`Unknown adapter: ${options.adapter}. Valid adapters: ${VALID_ADAPTERS.join(', ')}`))
+      process.exit(1)
+    }
+
     process.env.CHRONICLE_PROJECT_ROOT = process.cwd()
     process.env.CHRONICLE_CONTENT_DIR = contentDir
 
@@ -35,7 +42,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 +55,26 @@ export const buildCommand = new Command('build')
       },
       build: {
         outDir: path.join(outDir, 'server'),
-        ssr: path.resolve(PACKAGE_ROOT, 'src/server/entry-prod.ts'),
+        ssr: serverEntry,
+        target: 'node22',
       },
     })
 
+    // Generate search index
+    console.log(chalk.gray('Building search index...'))
+    const { generateSearchIndex } = await import('@/server/build-search-index')
+    const docCount = await generateSearchIndex(contentDir, path.join(outDir, 'server'))
+    console.log(chalk.gray(`  Indexed ${docCount} documents`))
+
     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

@@ -18,23 +18,27 @@ interface SearchResult {
 function useSearch(query: string) {
   const [results, setResults] = useState<SearchResult[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    clearTimeout(timerRef.current);
+    let cancelled = false;
+    if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(async () => {
       setIsLoading(true);
       try {
         const params = new URLSearchParams();
         if (query) params.set("query", query);
         const res = await fetch(`/api/search?${params}`);
-        setResults(await res.json());
+        if (!cancelled) setResults(await res.json());
       } catch {
-        setResults([]);
+        if (!cancelled) setResults([]);
       }
-      setIsLoading(false);
+      if (!cancelled) setIsLoading(false);
     }, 100);
-    return () => clearTimeout(timerRef.current);
+    return () => {
+      cancelled = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
   }, [query]);
 
   return { results, isLoading };

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/build-search-index.ts

@@ -0,0 +1,107 @@
+import fs from 'fs/promises'
+import path from 'path'
+import matter from 'gray-matter'
+import { loadConfig } from '@/lib/config'
+import { loadApiSpecs } from '@/lib/openapi'
+import { getSpecSlug } from '@/lib/api-routes'
+import type { OpenAPIV3 } from 'openapi-types'
+
+interface SearchDocument {
+  id: string
+  url: string
+  title: string
+  content: string
+  type: 'page' | 'api'
+}
+
+function extractHeadings(markdown: string): string {
+  const headingRegex = /^#{1,6}\s+(.+)$/gm
+  const headings: string[] = []
+  let match
+  while ((match = headingRegex.exec(markdown)) !== null) {
+    headings.push(match[1].trim())
+  }
+  return headings.join(' ')
+}
+
+async function scanContent(contentDir: string): Promise<SearchDocument[]> {
+  const docs: SearchDocument[] = []
+
+  async function scan(dir: string, prefix: string[] = []) {
+    let entries
+    try { entries = await fs.readdir(dir, { withFileTypes: true }) }
+    catch { return }
+
+    for (const entry of entries) {
+      if (entry.name.startsWith('.') || entry.name === 'node_modules') continue
+      const fullPath = path.join(dir, entry.name)
+
+      if (entry.isDirectory()) {
+        await scan(fullPath, [...prefix, entry.name])
+        continue
+      }
+
+      if (!entry.name.endsWith('.mdx') && !entry.name.endsWith('.md')) continue
+
+      const raw = await fs.readFile(fullPath, 'utf-8')
+      const { data: fm, content } = matter(raw)
+      const baseName = entry.name.replace(/\.(mdx|md)$/, '')
+      const slugs = baseName === 'index' ? prefix : [...prefix, baseName]
+      const url = slugs.length === 0 ? '/' : '/' + slugs.join('/')
+
+      docs.push({
+        id: url,
+        url,
+        title: fm.title ?? baseName,
+        content: extractHeadings(content),
+        type: 'page',
+      })
+    }
+  }
+
+  await scan(contentDir)
+  return docs
+}
+
+function buildApiDocs(): SearchDocument[] {
+  const config = loadConfig()
+  if (!config.api?.length) return []
+
+  const docs: SearchDocument[] = []
+  const specs = loadApiSpecs(config.api)
+
+  for (const spec of specs) {
+    const specSlug = getSpecSlug(spec)
+    const paths = spec.document.paths ?? {}
+    for (const [, pathItem] of Object.entries(paths)) {
+      if (!pathItem) continue
+      for (const method of ['get', 'post', 'put', 'delete', 'patch'] as const) {
+        const op = pathItem[method] as OpenAPIV3.OperationObject | undefined
+        if (!op?.operationId) continue
+        const url = `/apis/${specSlug}/${encodeURIComponent(op.operationId)}`
+        docs.push({
+          id: url,
+          url,
+          title: `${method.toUpperCase()} ${op.summary ?? op.operationId}`,
+          content: op.description ?? '',
+          type: 'api',
+        })
+      }
+    }
+  }
+
+  return docs
+}
+
+export async function generateSearchIndex(contentDir: string, outDir: string) {
+  const [contentDocs, apiDocs] = await Promise.all([
+    scanContent(contentDir),
+    Promise.resolve(buildApiDocs()),
+  ])
+
+  const documents = [...contentDocs, ...apiDocs]
+  const outPath = path.join(outDir, 'search-index.json')
+  await fs.writeFile(outPath, JSON.stringify(documents))
+
+  return documents.length
+}

package/src/server/dev.ts

@@ -5,6 +5,7 @@ import { createReadStream } from 'fs'
 import path from 'path'
 import chalk from 'chalk'
 import { createViteConfig } from './vite-config'
+import { safePath } from './utils/safe-path'
 
 export interface DevServerOptions {
   port: number
@@ -38,8 +39,8 @@ export async function startDevServer(options: DevServerOptions) {
       }
 
       // Serve static files from content dir (skip .md/.mdx)
-      const contentFile = path.join(contentDir, decodeURIComponent(url.split('?')[0]))
-      if (!url.endsWith('.md') && !url.endsWith('.mdx')) {
+      const contentFile = safePath(contentDir, url)
+      if (contentFile && !url.endsWith('.md') && !url.endsWith('.mdx')) {
         try {
           const stat = await fsPromises.stat(contentFile)
           if (stat.isFile()) {
@@ -119,7 +120,8 @@ export async function startDevServer(options: DevServerOptions) {
       template = await vite.transformIndexHtml(url, template)
 
       // Embed page data for client hydration
-      const dataScript = `<script>window.__PAGE_DATA__ = ${JSON.stringify(embeddedData)}</script>`
+      const safeJson = JSON.stringify(embeddedData).replace(/</g, '\\u003c')
+      const dataScript = `<script>window.__PAGE_DATA__ = ${safeJson}</script>`
       template = template.replace('<!--head-outlet-->', `<!--head-outlet-->${dataScript}`)
 
       const { render } = await vite.ssrLoadModule(path.resolve(root, 'src/server/entry-server.tsx'))

package/src/server/entry-prod.ts

@@ -3,16 +3,23 @@ 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'
+import { safePath } from './utils/safe-path'
 
 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,26 +30,24 @@ 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
       }
 
       // Serve static files from content dir (skip .md/.mdx)
       const contentDir = process.env.CHRONICLE_CONTENT_DIR || process.cwd()
-      const contentFile = path.join(contentDir, decodeURIComponent(url.split('?')[0]))
-      if (!url.endsWith('.md') && !url.endsWith('.mdx')) {
+      const contentFile = safePath(contentDir, url)
+      if (contentFile && !url.endsWith('.md') && !url.endsWith('.mdx')) {
         try {
           const stat = await fsPromises.stat(contentFile)
           if (stat.isFile()) {
@@ -67,47 +72,13 @@ 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
-      res.end((e as Error).message)
+      res.end('Internal Server Error')
     }
   })
 

package/src/server/entry-vercel.ts

@@ -0,0 +1,28 @@
+// Vercel serverless function entry — built by Vite, deployed as catch-all function
+import type { IncomingMessage, ServerResponse } from 'http'
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import path from 'path'
+import { handleRequest } from './request-handler'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+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('Internal Server Error')
+  }
+}

package/src/server/handlers/apis-proxy.ts

@@ -20,6 +20,11 @@ export async function handleApisProxy(req: Request): Promise<Response> {
     return Response.json({ error: `Unknown spec: ${specName}` }, { status: 404 })
   }
 
+  // Validate path doesn't contain protocol or escape the base URL
+  if (/^[a-z]+:\/\//i.test(path) || path.includes('..')) {
+    return Response.json({ error: 'Invalid path' }, { status: 400 })
+  }
+
   const url = spec.server.url + path
 
   try {

package/src/server/handlers/search.ts

@@ -16,7 +16,35 @@ interface SearchDocument {
 }
 
 let searchIndex: MiniSearch<SearchDocument> | null = null
+let cachedDocs: SearchDocument[] | null = null
 
+function createIndex(docs: SearchDocument[]): MiniSearch<SearchDocument> {
+  const index = new MiniSearch<SearchDocument>({
+    fields: ['title', 'content'],
+    storeFields: ['url', 'title', 'type'],
+    searchOptions: {
+      boost: { title: 2 },
+      fuzzy: 0.2,
+      prefix: true,
+    },
+  })
+  index.addAll(docs)
+  return index
+}
+
+// Try loading pre-built search index (generated at build time)
+async function loadPrebuiltIndex(): Promise<SearchDocument[] | null> {
+  try {
+    // In bundled server, search-index.json is next to the entry file
+    const indexPath = path.resolve(__dirname, 'search-index.json')
+    const raw = await fs.readFile(indexPath, 'utf-8')
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+// Fallback: scan filesystem at runtime (dev mode)
 function getContentDir(): string {
   return process.env.CHRONICLE_CONTENT_DIR || path.join(process.cwd(), 'content')
 }
@@ -91,25 +119,29 @@ function buildApiDocs(): SearchDocument[] {
   return docs
 }
 
-async function getIndex(): Promise<MiniSearch<SearchDocument>> {
-  if (searchIndex) return searchIndex
+async function loadDocuments(): Promise<SearchDocument[]> {
+  // Try pre-built index first
+  const prebuilt = await loadPrebuiltIndex()
+  if (prebuilt) return prebuilt
 
+  // Fallback to filesystem scanning (dev mode)
   const [contentDocs, apiDocs] = await Promise.all([
     scanContent(),
     Promise.resolve(buildApiDocs()),
   ])
+  return [...contentDocs, ...apiDocs]
+}
 
-  searchIndex = new MiniSearch<SearchDocument>({
-    fields: ['title', 'content'],
-    storeFields: ['url', 'title', 'type'],
-    searchOptions: {
-      boost: { title: 2 },
-      fuzzy: 0.2,
-      prefix: true,
-    },
-  })
+async function getDocs(): Promise<SearchDocument[]> {
+  if (cachedDocs) return cachedDocs
+  cachedDocs = await loadDocuments()
+  return cachedDocs
+}
 
-  searchIndex.addAll([...contentDocs, ...apiDocs])
+async function getIndex(): Promise<MiniSearch<SearchDocument>> {
+  if (searchIndex) return searchIndex
+  const docs = await getDocs()
+  searchIndex = createIndex(docs)
   return searchIndex
 }
 
@@ -119,8 +151,8 @@ export async function handleSearch(req: Request): Promise<Response> {
   const index = await getIndex()
 
   if (!query) {
-    const contentDocs = await scanContent()
-    const suggestions = contentDocs.slice(0, 8).map((d) => ({
+    const docs = await getDocs()
+    const suggestions = docs.filter(d => d.type === 'page').slice(0, 8).map((d) => ({
       id: d.id,
       url: d.url,
       type: d.type,

package/src/server/request-handler.ts

@@ -0,0 +1,64 @@
+// 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 safeJson = JSON.stringify(embeddedData).replace(/</g, '\\u003c')
+  const dataScript = `<script>window.__PAGE_DATA__ = ${safeJson}</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' },
+  })
+}