polen 0.10.0-next.14 → 0.10.0-next.4

package/src/template/components/sidebar/SidebarItem.tsx

@@ -1,16 +1,16 @@
-import type { Content } from '#api/content/$'
 import type { React } from '#dep/react/index'
+import type { FileRouter } from '#lib/file-router/index'
 import { Texts } from '#template/components/Texts/index'
-import { Box, Flex } from '@radix-ui/themes'
+import { Box, Flex, Text } from '@radix-ui/themes'
 import { useLocation } from 'react-router'
 import { getPathActiveReport, Link } from '../Link.tsx'
 
-export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
+export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items }) => {
   return (
     <Flex direction='column' gap='2px'>
-      {items.map((item, index) => (
+      {items.map((item) => (
         <Item
-          key={`${item.pathExp}-${index}`}
+          key={item.pathExp}
           item={item}
         />
       ))}
@@ -26,7 +26,7 @@ export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
 //
 //
 
-export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
+export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
   if (item.type === `ItemLink`) {
     return <SBLink link={item} />
   }
@@ -47,7 +47,7 @@ export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
 //
 
 const SBLink: React.FC<{
-  link: Content.ItemLink | Content.ItemSection
+  link: FileRouter.Sidebar.ItemLink | FileRouter.Sidebar.ItemSection
 }> = ({ link }) => {
   const location = useLocation()
   const currentPathExp = location.pathname
@@ -63,7 +63,7 @@ const SBLink: React.FC<{
         display: `block`,
         textDecoration: `none`,
         color: active.is ? `var(--accent-12)` : undefined,
-        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
         borderRadius: `var(--radius-2)`,
       }}
     >
@@ -81,7 +81,7 @@ const SBLink: React.FC<{
 //
 
 const Section: React.FC<{
-  section: Content.ItemSection
+  section: FileRouter.Sidebar.ItemSection
 }> = ({ section }) => {
   return (
     <Box mt='8'>
@@ -104,7 +104,7 @@ const Section: React.FC<{
 //
 
 const LinkedSection: React.FC<{
-  section: Content.ItemSection
+  section: FileRouter.Sidebar.ItemSection
 }> = ({ section }) => {
   return (
     <Box>
@@ -121,9 +121,9 @@ const LinkedSection: React.FC<{
             borderLeft: `1px solid var(--gray-5)`,
           }}
         >
-          {section.links.map((link, index) => (
+          {section.links.map((link) => (
             <SectionLink
-              key={`${link.pathExp}-${index}`}
+              key={link.pathExp}
               link={link}
             />
           ))}
@@ -133,7 +133,7 @@ const LinkedSection: React.FC<{
   )
 }
 
-const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
+const SectionLink: React.FC<{ link: FileRouter.Sidebar.ItemLink }> = ({ link }) => {
   const location = useLocation()
   const active = getPathActiveReport(link.pathExp, location.pathname)
 
@@ -145,7 +145,7 @@ const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
       style={{
         textDecoration: `none`,
         color: active.is ? `var(--accent-12)` : undefined,
-        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
         borderBottomRightRadius: `var(--radius-2)`,
         borderTopRightRadius: `var(--radius-2)`,
       }}

package/src/template/entry.client.tsx

@@ -1,10 +1,13 @@
+// TODO it seems more logical to have this asset imported in the server entry.
+// But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
+// But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
 import '@radix-ui/themes/styles.css'
-import './styles/code-block.css'
+// import './styles/code-block.css' // TODO: Handle CSS in build process
 import { ReactDomClient } from '#dep/react-dom-client/index'
 import { StrictMode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { routes } from './routes.tsx'
+import { routes } from './routes.jsx'
 
 // SPA
 

package/src/template/routes/changelog.tsx

@@ -1,7 +1,7 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { Changelog } from '../components/Changelog.tsx'
+import { Changelog } from '../components/Changelog.jsx'
 
 const loader = createLoader(() => {
   return {

package/src/template/routes/reference.$type.$field.tsx

@@ -2,9 +2,9 @@ import { Grafaid } from '#lib/grafaid/index'
 import { ReactRouterAid } from '#lib/react-router-aid/index'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { Field } from '../components/Field.tsx'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import type { reference } from './reference.tsx'
+import { Field } from '../components/Field.jsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import type { reference } from './reference.jsx'
 
 const Component = () => {
   const params = useParams() as { type: string; field: string }

package/src/template/routes/reference.$type.tsx

@@ -1,9 +1,9 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import { NamedType } from '../components/NamedType.tsx'
-import type { reference } from './reference.tsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import { NamedType } from '../components/NamedType.jsx'
+import type { reference } from './reference.jsx'
 
 const Component = () => {
   const params = useParams() as { type: string }

package/src/template/routes/reference.tsx

@@ -1,10 +1,11 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
-import { Box } from '@radix-ui/themes'
+import { Container, Flex } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import { reference$type } from './reference.$type.tsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import { TypeIndex } from '../components/TypeIndex.jsx'
+import { reference$type } from './reference.$type.jsx'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null
@@ -21,9 +22,12 @@ const Component = () => {
   }
 
   return (
-    <Box className='prose'>
-      <Outlet />
-    </Box>
+    <Flex direction='row' align='start'>
+      <TypeIndex schema={data.schema} />
+      <Container>
+        <Outlet />
+      </Container>
+    </Flex>
   )
 }
 

package/src/template/routes/root.tsx

@@ -1,55 +1,53 @@
-import type { Content } from '#api/content/$'
+import { assetUrl } from '#api/utils/asset-url/index'
 import type { ReactRouter } from '#dep/react-router/index'
-import { GrafaidOld } from '#lib/grafaid-old/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
-import { Box, Grid } from '@radix-ui/themes'
+import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
+import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Arr } from '@wollybeard/kit'
-import { useEffect, useState } from 'react'
 import { Link as LinkReactRouter } from 'react-router'
 import { Outlet, ScrollRestoration, useLocation } from 'react-router'
 import logoSrc from 'virtual:polen/project/assets/logo.svg'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import projectDataNavbar from 'virtual:polen/project/data/navbar.jsonsuper'
-import projectPagesCatalog from 'virtual:polen/project/data/pages-catalog.jsonsuper'
-import { routes } from 'virtual:polen/project/routes.jsx'
+import projectDataPages from 'virtual:polen/project/data/pages.jsonsuper'
+import { pages } from 'virtual:polen/project/pages.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
-import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.tsx'
-import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.tsx'
-import { HamburgerMenu } from '../components/HamburgerMenu.tsx'
-import { Link } from '../components/Link.tsx'
-import { Logo } from '../components/Logo.tsx'
-import { NotFound } from '../components/NotFound.tsx'
-import { Sidebar } from '../components/sidebar/Sidebar.tsx'
-import { ThemeToggle } from '../components/ThemeToggle.tsx'
-import { ThemeProvider, useTheme } from '../contexts/ThemeContext.tsx'
-import { changelog } from './changelog.tsx'
-import { index } from './index.tsx'
-import { reference } from './reference.tsx'
+import { Link } from '../components/Link.jsx'
+import { Logo } from '../components/Logo.jsx'
+import { Sidebar } from '../components/sidebar/Sidebar.jsx'
+import entryClientUrl from '../entry.client.jsx?url'
+import { changelog } from './changelog.jsx'
+import { index } from './index.jsx'
+import { reference } from './reference.jsx'
+
+// todo: not needed anymore because not using hono dev vite plugin right?
+const reactRefreshPreamble = `
+import RefreshRuntime from "/@react-refresh";
+RefreshRuntime.injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;
+window.__vite_plugin_react_preamble_installed__ = true;
+`
 
 export const Component = () => {
-  const schema = PROJECT_DATA.schema?.versions[0]?.after || null
-
-  // Make schema available globally for MDX components
-  if (typeof window !== 'undefined' && schema) {
-    ;(window as any).__POLEN_GRAPHQL_SCHEMA__ = schema
-  }
-
   return (
     <html lang='en'>
       <head>
+        {import.meta.env.DEV && <script type='module'>{reactRefreshPreamble}</script>}
+        {import.meta.env.DEV && <script type='module' src='/@vite/client'></script>}
         <meta charSet='utf-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1' />
         <title>{templateVariables.title}</title>
+        {import.meta.env.DEV && <link rel='stylesheet' href={radixStylesUrl} />}
+        {/* <link rel='icon' type='image/svg+xml' href={assetUrl('/favicon.svg', PROJECT_DATA.basePath)} /> */}
+        {/* <link rel='manifest' href={assetUrl('/manifest.json', PROJECT_DATA.basePath)} /> */}
+        {/* <meta name='theme-color' content='#000000' /> */}
       </head>
       <body style={{ margin: 0 }}>
-        <ThemeProvider>
-          <GraphQLSchemaProvider schema={schema}>
-            <Layout />
-            <CodeBlockEnhancer />
-          </GraphQLSchemaProvider>
-        </ThemeProvider>
+        <Layout />
         <ScrollRestoration />
+        {import.meta.env.DEV && <script type='module' src={entryClientUrl}></script>}
       </body>
     </html>
   )
@@ -57,13 +55,6 @@ export const Component = () => {
 
 const Layout = () => {
   const location = useLocation()
-  const { appearance } = useTheme()
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-
-  // Close mobile menu on route change
-  useEffect(() => {
-    setMobileMenuOpen(false)
-  }, [location.pathname])
 
   // Determine if we should show sidebar based on current path
   const getCurrentNavPathExp = (): string | null => {
@@ -77,113 +68,92 @@ const Layout = () => {
   }
 
   const currentNavPathExp = getCurrentNavPathExp()
-  const isReferencePage = currentNavPathExp === '/reference'
-
-  const sidebar = (() => {
-    if (isReferencePage && PROJECT_DATA.schema) {
-      // Build reference sidebar from schema types
-      const schema = PROJECT_DATA.schema.versions[0].after
-      const kindMap = GrafaidOld.getKindMap(schema)
-
-      const sidebarItems: Content.Item[] = []
-      const kindEntries = Object.entries(kindMap.list).filter(([_, types]) => types.length > 0)
-
-      for (const [title, types] of kindEntries) {
-        sidebarItems.push({
-          type: 'ItemSection' as const,
-          title,
-          pathExp: `reference-${title.toLowerCase()}`,
-          isLinkToo: false,
-          links: types.map(type => ({
-            type: 'ItemLink' as const,
-            title: type.name,
-            pathExp: `reference/${type.name}`,
-          })),
-        })
-      }
-
-      return { items: sidebarItems }
-    } else {
-      // Use regular page sidebar
-      return currentNavPathExp ? projectPagesCatalog.sidebarIndex[currentNavPathExp] || null : null
-    }
-  })()
-
+  const sidebar = currentNavPathExp && projectDataPages.sidebarIndex[currentNavPathExp]
   const isShowSidebar = sidebar && sidebar.items.length > 0
 
   const header = (
     <Flex
       gridArea={'header'}
       align='center'
-      gap={{ initial: '4', md: '8' }}
+      gap='8'
       pb='4'
-      mb={{ initial: '4', md: '8' }}
+      mb='8'
       style={{
         borderBottom: `1px solid var(--gray-3)`,
       }}
     >
-      {/* Mobile menu - only show when sidebar exists */}
-      {isShowSidebar && (
-        <HamburgerMenu
-          isOpen={mobileMenuOpen}
-          onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
-          onClose={() => setMobileMenuOpen(false)}
-          sidebarData={sidebar.items}
-        />
-      )}
-
       <LinkReactRouter
         to='/'
         style={{ color: `inherit`, textDecoration: `none` }}
       >
-        <Box display={{ initial: 'block', md: 'block' }}>
-          <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
-        </Box>
+        <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
       </LinkReactRouter>
-      <Flex direction='row' gap='4' style={{ flex: 1 }}>
+      <Flex direction='row' gap='4'>
         {projectDataNavbar.map((item, key) => (
           <Link key={key} color='gray' to={item.pathExp}>
             {item.title}
           </Link>
         ))}
       </Flex>
-      <ThemeToggle />
     </Flex>
   )
 
   return (
-    <Theme asChild appearance={appearance}>
+    <Theme asChild>
       <Grid
-        width={{ initial: '100%', sm: '100%', md: 'var(--container-4)' }}
-        maxWidth='100vw'
-        areas={{
-          initial: "'header' 'content'",
-          sm: "'header' 'content'",
-          md:
-            "'header header header header header header header header' 'sidebar sidebar . content content content content content'",
-        }}
+        width={{ initial: 'var(--container-4)' }}
+        areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'"
         rows='min-content auto'
-        columns={{ initial: '1fr', sm: '1fr', md: 'repeat(8, 1fr)' }}
-        gapX={{ initial: '0', sm: '0', md: '2' }}
-        my={{ initial: '0', sm: '0', md: '8' }}
+        columns='repeat(8, 1fr)'
+        gapX='2'
+        my='8'
         mx='auto'
-        px={{ initial: '4', sm: '4', md: '0' }}
-        py={{ initial: '4', sm: '4', md: '0' }}
       >
+        <style>
+          {`
+          /* Shiki code blocks */
+          pre.shiki {
+            margin: 1rem 0;
+            padding: 1rem;
+            border-radius: 8px;
+            overflow-x: auto;
+            font-size: 14px;
+            line-height: 1.6;
+            background-color: #f6f8fa;
+          }
+
+          /* Light mode: use --shiki-light CSS variables from inline styles */
+          pre.shiki span {
+            color: var(--shiki-light);
+          }
+
+          /* Dark mode - Radix Themes uses [data-is-root-theme="dark"] */
+          [data-is-root-theme="dark"] pre.shiki {
+            background-color: #1a1b26;
+          }
+
+          [data-is-root-theme="dark"] pre.shiki span {
+            color: var(--shiki-dark);
+          }
+
+          pre.shiki code {
+            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+            background: transparent;
+            display: block;
+          }
+        `}
+        </style>
         {header}
-
-        {/* Desktop Sidebar */}
         {isShowSidebar && (
-          <Box
-            display={{ initial: 'none', xs: 'none', sm: 'none', md: 'block' }}
+          <Sidebar
             gridColumn='1 / 3'
             gridRow='2 / auto'
-          >
-            <Sidebar data={sidebar.items} />
-          </Box>
+            data={sidebar.items}
+            // ml='-100px'
+            // style={{ transform: 'translate(calc(-100% - var(--space-8)))' }}
+          />
         )}
-
-        <Box gridArea='content / content / auto / 8' className='prose'>
+        <Box gridArea='content / content / auto / 8'>
           <Outlet />
         </Box>
       </Grid>
@@ -193,7 +163,7 @@ const Layout = () => {
 
 const children: ReactRouter.RouteObject[] = [
   index,
-  ...routes,
+  ...pages,
 ]
 
 //
@@ -219,10 +189,36 @@ if (PROJECT_DATA.schema) {
 //
 //
 
+const NotFoundComponent = () => {
+  return (
+    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
+      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
+      <Box>
+        <Heading size='5' mb='2'>Page Not Found</Heading>
+        <Text size='3' color='gray'>
+          The page you're looking for doesn't exist or has been moved.
+        </Text>
+      </Box>
+      <Flex gap='3'>
+        <LinkReactRouter to='/'>
+          <Button variant='soft' size='3'>
+            Go Home
+          </Button>
+        </LinkReactRouter>
+        <LinkReactRouter to='/reference'>
+          <Button variant='outline' size='3'>
+            View API Reference
+          </Button>
+        </LinkReactRouter>
+      </Flex>
+    </Flex>
+  )
+}
+
 const notFoundRoute = createRoute({
   id: `*_not_found`,
   path: `*`,
-  Component: NotFound,
+  Component: NotFoundComponent,
   handle: {
     statusCode: 404,
   },

package/src/template/routes.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from 'react-router'
-import { root } from './routes/root.tsx'
+import { root } from './routes/root.jsx'
 
 export const routes: RouteObject[] = [
   root,

package/src/template/server/app.ts

@@ -1,45 +1,35 @@
 import { Hono } from '#dep/hono/index'
+import { AppleTouchIcon } from '#lib/apple-touch-icon/index'
+import { Favicon } from '#lib/favicon/index'
 import { serveStatic } from '@hono/node-server/serve-static'
+import { Http } from '@wollybeard/kit'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import viteClientAssetManifest from 'virtual:polen/vite/client/manifest'
-import { injectManifestIntoHtml } from './manifest.ts'
-import { PageMiddleware } from './middleware/page.ts'
-import { UnsupportedAssetsMiddleware } from './middleware/unsupported-assets.ts'
+import { renderPage } from './render-page.jsx'
+import { view } from './view.ts'
 
-export type HtmlTransformer = (html: string, ctx: Hono.Context) => Promise<string> | string
+export const app = new Hono.Hono()
 
-export interface AppHooks {
-  transformHtml?: HtmlTransformer[]
+if (__BUILDING__) {
+  app.use(
+    PROJECT_DATA.server.static.route,
+    serveStatic({ root: PROJECT_DATA.server.static.directory }),
+  )
 }
 
-export interface AppOptions {
-  hooks?: AppHooks
-}
-
-export const createApp = (options: AppOptions = {}) => {
-  const app = new Hono.Hono()
-
-  // Collect all HTML transformers
-  const htmlTransformers: HtmlTransformer[] = [...(options.hooks?.transformHtml || [])]
-
-  // Core middleware
-  app.use('*', UnsupportedAssetsMiddleware())
+app.all(`*`, async (ctx) => {
+  const staticHandlerContext = await view.query(ctx.req.raw)
 
-  // Production-specific setup
-  if (__BUILDING__) {
-    // Add manifest transformer
-    htmlTransformers.push((html, _ctx) => {
-      return injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
-    })
+  if (staticHandlerContext instanceof Response) {
+    return staticHandlerContext
+  }
 
-    // Static file serving
-    app.use(
-      PROJECT_DATA.server.static.route,
-      serveStatic({ root: PROJECT_DATA.server.static.directory }),
-    )
+  if (Favicon.fileNamePattern.test(ctx.req.path)) {
+    return Http.Response.notFound
   }
 
-  app.all('*', PageMiddleware(htmlTransformers))
+  if (AppleTouchIcon.fileNamePattern.test(ctx.req.path)) {
+    return Http.Response.notFound
+  }
 
-  return app
-}
+  return renderPage(staticHandlerContext)
+})

package/src/template/server/main.ts

@@ -1,6 +1,6 @@
 import { serve } from '@hono/node-server' // TODO: support non-node platforms.
 import { neverCase } from '@wollybeard/kit/language'
-import { createApp } from './app.ts'
+import { app } from './app.ts'
 import { generate } from './ssg/generate.ts'
 import { view } from './view.ts'
 
@@ -11,7 +11,6 @@ if (__BUILDING__) {
       break
     case `ssr`:
       const port = process.env[`PORT`] ? parseInt(process.env[`PORT`]) : 3001 // todo viteConfigResolved.server.port + 1
-      const app = createApp()
       serve({ fetch: app.fetch, port })
       break
     case `spa`:

package/src/template/server/{create-page-html-response.ts → render-page.tsx}

@@ -1,20 +1,18 @@
 import { reportError } from '#api/server/report-error'
 import type { ReactRouter } from '#dep/react-router/index'
-import { React } from '#dep/react/index'
 import { ResponseInternalServerError } from '#lib/kit-temp'
 import type { ReactRouterAid } from '#lib/react-router-aid/index'
 import { Arr } from '@wollybeard/kit'
+import { StrictMode } from 'react'
 import * as ReactDomServer from 'react-dom/server'
 import { createStaticRouter, StaticRouterProvider } from 'react-router'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import viteClientAssetManifest from 'virtual:polen/vite/client/manifest'
+import { injectManifestIntoHtml } from './manifest.ts'
 import { view } from './view.ts'
 
-interface RenderHooks {
-  transformHtml?: (html: string) => Promise<string> | string
-}
-
-export const createPageHtmlResponse = async (
+export const renderPage = (
   staticHandlerContext: ReactRouter.StaticHandlerContext,
-  hooks?: RenderHooks,
 ) => {
   const router = createStaticRouter(view.dataRoutes, staticHandlerContext)
 
@@ -22,25 +20,24 @@ export const createPageHtmlResponse = async (
 
   try {
     html = ReactDomServer.renderToString(
-      React.createElement(
-        React.StrictMode,
-        null,
-        React.createElement(StaticRouterProvider, {
-          router,
-          context: staticHandlerContext,
-        }),
-      ),
+      <StrictMode>
+        <StaticRouterProvider router={router} context={staticHandlerContext} />
+      </StrictMode>,
     )
   } catch (cause) {
     reportError(new Error(`Failed to server side render the HTML`, { cause }))
     return ResponseInternalServerError()
   }
 
-  // Create the full HTML document
+  if (__BUILDING__) {
+    html = injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
+  }
 
-  // Apply HTML transformation hook to the full document
-  if (hooks?.transformHtml) {
-    html = await hooks.transformHtml(html)
+  // todo: what is this?
+  if (import.meta.env.DEV) {
+    // const env = ctx.env as { viteDevServer: Vite.ViteDevServer }
+    // html = await env.viteDevServer.transformIndexHtml(ctx.req.url, html)
+    // await env.viteDevServer.transformIndexHtml(ctx.req.url, html)
   }
 
   const headers = getRouteHeaders(staticHandlerContext)