npm - polen - Versions diffs - 0.10.0-next.9 → 0.10.0 - Mend

polen 0.10.0-next.9 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1298) hide show

package/src/template/routes/root.tsx CHANGED Viewed

@@ -1,123 +1,93 @@
 import type { ReactRouter } from '#dep/react-router/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
-import { Box, Grid } 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 { SidebarLayout } from '#template/layouts/index'
+import { MDXProvider } from '@mdx-js/react'
+import {
+  Badge,
+  Box,
+  Button,
+  Callout,
+  Card,
+  Code,
+  DataList,
+  Em,
+  Flex,
+  Heading,
+  Link,
+  Quote,
+  Separator,
+  Strong,
+  Table,
+  Tabs,
+  Text,
+  Theme,
+  Tooltip,
+} from '@radix-ui/themes'
+import { Link as LinkReactRouter, useLocation } from 'react-router'
+import { Outlet, ScrollRestoration } 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 projectDataPages from 'virtual:polen/project/data/pages.jsonsuper'
-import { pages } from 'virtual:polen/project/pages.jsx'
+import PROJECT_DATA_PAGES_CATALOG from 'virtual:polen/project/data/pages-catalog.jsonsuper'
+import { routes } from 'virtual:polen/project/routes.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
-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 entryClientUrl from '../entry.client.jsx?url'
-import { changelog } from './changelog.tsx'
-import { index } from './index.tsx'
-import { reference } from './reference.tsx'
-// 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;
-`
+import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js'
+import { CodeBlock } from '../components/CodeBlock.js'
+import { Pre } from '../components/CodeHikePre.js'
+import { Link as PolenLink } from '../components/Link.js'
+import { Logo } from '../components/Logo.js'
+import { NotFound } from '../components/NotFound.js'
+import { ThemeToggle } from '../components/ThemeToggle.js'
+import { ThemeProvider, useTheme } from '../contexts/ThemeContext.js'
+import { changelog } from './changelog.js'
+import { index } from './index.js'
+import { reference } from './reference.js'
 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>
+    <>
+      <ThemeProvider>
+        <GraphQLSchemaProvider schema={schema}>
           <Layout />
-        </ThemeProvider>
-        <ScrollRestoration />
-        {import.meta.env.DEV && <script type='module' src={entryClientUrl}></script>}
-      </body>
-    </html>
+        </GraphQLSchemaProvider>
+      </ThemeProvider>
+      <ScrollRestoration />
+    </>
   )
 }
 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 => {
-    // todo: general path manipulation lib because we are duplicating logic here found in FileRouter
-    // todo: kit: try a Str.split that returns [] | string[] so that our predicates can refine on it?
-    const segments = location.pathname.split(`/`).filter(Boolean)
-    if (Arr.isntEmpty(segments)) {
-      return `/${segments[0]}`
-    }
-    return null
-  }
-  const currentNavPathExp = getCurrentNavPathExp()
-  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={{ initial: `4`, md: `8` }}
       pb='4'
-      mb={{ initial: '4', md: '8' }}
+      mb={{ initial: `4`, md: `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' }}>
+        <Box display={{ initial: `block`, md: `block` }}>
           <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
         </Box>
       </LinkReactRouter>
       <Flex direction='row' gap='4' style={{ flex: 1 }}>
-        {projectDataNavbar.map((item, key) => (
-          <Link key={key} color='gray' to={item.pathExp}>
+        {PROJECT_DATA.navbar.map((item, key) => (
+          <PolenLink key={key} color='gray' to={item.pathExp}>
             {item.title}
-          </Link>
+          </PolenLink>
         ))}
       </Flex>
       <ThemeToggle />
@@ -126,93 +96,91 @@ const Layout = () => {
   return (
     <Theme asChild appearance={appearance}>
-      <Grid
-        width={{ initial: '100%', sm: '100%', md: 'var(--container-4)' }}
+      <Box
+        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'",
-        }}
-        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' }}
+        my={{ initial: `0`, sm: `0`, md: `8` }}
         mx='auto'
-        px={{ initial: '4', sm: '4', md: '0' }}
-        py={{ initial: '4', sm: '4', md: '0' }}
+        px={{ initial: `4`, sm: `4`, md: `0` }}
+        py={{ initial: `4`, sm: `4`, md: `0` }}
       >
-        <style>
-          {`
-          /* Responsive container fixes */
-          @media (max-width: 768px) {
-            body {
-              overflow-x: hidden;
-            }
-          }
-          /* Ensure proper centering on all screen sizes */
-          .rt-Grid {
-            box-sizing: border-box;
-          }
-          /* 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;
-          }
+        {header}
+        <MDXProvider
+          components={{
+            // Map markdown elements to Radix with spacing
+            p: (props) => <Text as='p' mb='4' {...props} />,
+            h1: (props) => <Heading size='8' mt='6' mb='4' {...props} />,
+            h2: (props) => <Heading size='7' mt='6' mb='3' {...props} />,
+            h3: (props) => <Heading size='6' mt='5' mb='3' {...props} />,
+            h4: (props) => <Heading size='5' mt='5' mb='2' {...props} />,
+            h5: (props) => <Heading size='4' mt='4' mb='2' {...props} />,
+            h6: (props) => <Heading size='3' mt='4' mb='2' {...props} />,
+            strong: Strong,
+            em: Em,
+            code: Code,
+            blockquote: (props) => <Quote my='4' {...props} />,
+            a: Link,
+            hr: (props) => <Separator my='6' {...props} />,
+            pre: Pre,
+            table: Table.Root,
+            thead: Table.Header,
+            tbody: Table.Body,
+            tr: Table.Row,
+            th: Table.ColumnHeaderCell,
+            td: Table.Cell,
+            // Lists need spacing too
+            ul: (props) => <Box as='ul' mb='4' style={{ paddingLeft: '1.5rem' }} {...props} />,
+            ol: (props) => <Box as='ol' mb='4' style={{ paddingLeft: '1.5rem' }} {...props} />,
+            li: (props) => <Box as='li' mb='2' {...props} />,
+            // Direct Radix components for MDX
+            Badge,
+            Button,
+            // @ts-expect-error
+            Callout,
+            Card,
+            // @ts-expect-error
+            DataList,
+            // @ts-expect-error
+            Tabs,
+            Tooltip,
+            // Code Hike component
+            CodeBlock,
+          }}
+        >
+          <Outlet />
+        </MDXProvider>
+      </Box>
+    </Theme>
+  )
+}
-          [data-is-root-theme="dark"] pre.shiki span {
-            color: var(--shiki-dark);
-          }
+const PagesLayout = () => {
+  const location = useLocation() // Add this line
-          pre.shiki code {
-            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
-            background: transparent;
-            display: block;
-          }
-        `}
-        </style>
-        {header}
+  // Build sidebar from pages catalog
+  // Get the top-level path segment (e.g., '/guide/foo' -> '/guide')
+  const pathSegments = location.pathname.split('/').filter(Boolean)
+  const topLevelPath = pathSegments[0] ? `/${pathSegments[0]}` : '/'
-        {/* Desktop Sidebar */}
-        {isShowSidebar && (
-          <Box
-            display={{ initial: 'none', xs: 'none', sm: 'none', md: 'block' }}
-            gridColumn='1 / 3'
-            gridRow='2 / auto'
-          >
-            <Sidebar data={sidebar.items} />
-          </Box>
-        )}
+  // Get the sidebar for this section
+  const sidebar = PROJECT_DATA_PAGES_CATALOG.sidebarIndex[topLevelPath]?.items || []
-        <Box gridArea='content / content / auto / 8'>
-          <Outlet />
-        </Box>
-      </Grid>
-    </Theme>
+  return (
+    <SidebarLayout sidebar={sidebar}>
+      <Outlet />
+    </SidebarLayout>
   )
 }
 const children: ReactRouter.RouteObject[] = [
   index,
-  ...pages,
+  {
+    // Pathless layout route - doesn't affect URL paths
+    Component: PagesLayout,
+    children: [...routes], // All MDX page routes go here
+  },
 ]
 //

package/src/template/routes.tsx CHANGED Viewed

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

package/src/template/server/app.ts CHANGED Viewed

@@ -1,35 +1,52 @@
 import { Hono } from '#dep/hono/index'
-import { AppleTouchIcon } from '#lib/apple-touch-icon/index'
-import { Favicon } from '#lib/favicon/index'
+import { createHtmlTransformer, type HtmlTransformer } from '#lib/html-utils/html-transformer'
 import { serveStatic } from '@hono/node-server/serve-static'
-import { Http } from '@wollybeard/kit'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { renderPage } from './render-page.jsx'
-import { view } from './view.ts'
+import viteClientAssetManifest from 'virtual:polen/vite/client/manifest'
+import { injectManifestIntoHtml } from './manifest.js'
+import { PageMiddleware } from './middleware/page.js'
+import { UnsupportedAssetsMiddleware } from './middleware/unsupported-assets.js'
+import { createPolenDataInjector } from './transformers/inject-polen-data.js'
+import { createThemeInitInjector } from './transformers/inject-theme-init.js'
-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
 }
-app.all(`*`, async (ctx) => {
-  const staticHandlerContext = await view.query(ctx.req.raw)
+export const createApp = (options: AppOptions = {}) => {
+  const app = new Hono.Hono()
-  if (staticHandlerContext instanceof Response) {
-    return staticHandlerContext
-  }
+  // Collect all HTML transformers
+  const htmlTransformers: HtmlTransformer[] = [
+    // Always inject Polen global data (both dev and prod)
+    createPolenDataInjector(),
+    // Theme initialization must come after Polen data
+    createThemeInitInjector(),
+    ...(options.hooks?.transformHtml || []),
+  ]
-  if (Favicon.fileNamePattern.test(ctx.req.path)) {
-    return Http.Response.notFound
-  }
+  // Core middleware
+  app.use(`*`, UnsupportedAssetsMiddleware())
-  if (AppleTouchIcon.fileNamePattern.test(ctx.req.path)) {
-    return Http.Response.notFound
+  // Production-specific setup
+  if (__BUILDING__) {
+    // Add manifest transformer
+    htmlTransformers.push(createHtmlTransformer((html, ___ctx) => {
+      return injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
+    }))
+    // Static file serving
+    app.use(
+      PROJECT_DATA.server.static.route,
+      serveStatic({ root: PROJECT_DATA.server.static.directory }),
+    )
   }
-  return renderPage(staticHandlerContext)
-})
+  app.all(`*`, PageMiddleware(htmlTransformers))
+  return app
+}

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

@@ -1,43 +1,81 @@
 import { reportError } from '#api/server/report-error'
+import type { Hono } from '#dep/hono/index'
 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 * as Theme from '#lib/theme/theme'
 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'
+import { templateVariables } from 'virtual:polen/template/variables'
+import type { PolenGlobalData } from '../constants.js'
+import { view } from './view.js'
-export const renderPage = (
+interface RenderHooks {
+  transformHtml?: (html: string) => Promise<string> | string
+}
+export const createPageHtmlResponse = async (
   staticHandlerContext: ReactRouter.StaticHandlerContext,
+  hooks?: RenderHooks,
+  ctx?: Hono.Context,
 ) => {
+  // Set up Polen global data before React SSR if context is provided
+  if (ctx) {
+    const themeManager = Theme.createThemeManager({
+      cookieName: `polen-theme-preference`,
+    })
+    const cookies = ctx.req.header(`cookie`) || ``
+    const cookieTheme = themeManager.readCookie(cookies)
+    const polenData: PolenGlobalData = {
+      serverContext: {
+        theme: cookieTheme || 'system', // No cookie means system preference
+        isDev: !__BUILDING__,
+      },
+    }
+    globalThis.__POLEN__ = polenData
+  }
   const router = createStaticRouter(view.dataRoutes, staticHandlerContext)
-  let html = ``
+  let appHtml = ``
   try {
-    html = ReactDomServer.renderToString(
-      <StrictMode>
-        <StaticRouterProvider router={router} context={staticHandlerContext} />
-      </StrictMode>,
+    appHtml = ReactDomServer.renderToString(
+      React.createElement(
+        React.StrictMode,
+        null,
+        React.createElement(StaticRouterProvider, {
+          router,
+          context: staticHandlerContext,
+        }),
+      ),
     )
   } catch (cause) {
     reportError(new Error(`Failed to server side render the HTML`, { cause }))
     return ResponseInternalServerError()
   }
-  if (__BUILDING__) {
-    html = injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
-  }
+  // Create the base HTML document
+  let html = `
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${templateVariables.title}</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  </head>
+  <body>
+    <div id="app">${appHtml}</div>
+  </body>
+</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)
+  // Apply HTML transformation hook to the full document
+  if (hooks?.transformHtml) {
+    html = await hooks.transformHtml(html)
   }
   const headers = getRouteHeaders(staticHandlerContext)
@@ -61,7 +99,7 @@ const getStatusCode = (
   }
   // Then check for custom status in route handle
-  const handle = Arr.getLast(context.matches)?.route.handle as undefined | ReactRouterAid.RouteHandle
+  const handle = Arr.getLast(context.matches)?.route.handle as ReactRouterAid.RouteHandle | undefined
   if (handle?.statusCode) {
     return handle.statusCode
   }

package/src/template/server/main.ts CHANGED Viewed

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

package/src/template/server/middleware/page.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { Hono } from '#dep/hono/index'
+import type { HtmlTransformer } from '#lib/html-utils/html-transformer'
+import { asyncReduceWith } from '#lib/kit-temp'
+import { createPageHtmlResponse } from '../create-page-html-response.js'
+import { view } from '../view.js'
+export const PageMiddleware = (transformers: HtmlTransformer[]) => {
+  return async (ctx: Hono.Context) => {
+    const staticHandlerContext = await view.query(ctx.req.raw)
+    if (staticHandlerContext instanceof Response) {
+      return staticHandlerContext
+    }
+    return createPageHtmlResponse(staticHandlerContext, {
+      transformHtml: asyncReduceWith(transformers, ctx),
+    }, ctx)
+  }
+}

package/src/template/server/middleware/unsupported-assets.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { Hono } from '#dep/hono/index'
+import { AppleTouchIcon } from '#lib/apple-touch-icon/index'
+import { Favicon } from '#lib/favicon/index'
+import { Http } from '@wollybeard/kit'
+/**
+ * Temporary middleware to block unsupported asset requests
+ *
+ * TODO: Polen should eventually support favicon and apple-touch-icon generation
+ * For now, we return 404 immediately to prevent these requests from reaching
+ * React Router and causing unnecessary processing or errors.
+ */
+export const UnsupportedAssetsMiddleware = (): Hono.MiddlewareHandler => {
+  return async (ctx, next) => {
+    // Block these asset requests until Polen supports them
+    if (
+      Favicon.fileNamePattern.test(ctx.req.path)
+      || AppleTouchIcon.fileNamePattern.test(ctx.req.path)
+    ) {
+      return Http.Response.notFound
+    }
+    await next()
+  }
+}