polen 0.9.0-next.5 → 0.9.0-next.7

package/src/lib/shiki/shiki.test.ts

@@ -0,0 +1,107 @@
+import { expect, test } from 'vitest'
+import { getHighlighter, highlightCode } from './shiki.js'
+
+test(`getHighlighter returns singleton instance`, async () => {
+  const highlighter1 = await getHighlighter()
+  const highlighter2 = await getHighlighter()
+
+  expect(highlighter1).toBe(highlighter2)
+})
+
+test(`highlightCode generates HTML with syntax highlighting`, async () => {
+  const code = `const hello = "world"`
+  const result = await highlightCode({
+    code,
+    lang: `javascript`,
+    theme: `light`,
+  })
+
+  expect(result).toContain(`<pre`)
+  expect(result).toContain(`shiki`)
+  expect(result).toContain(`hello`)
+  expect(result).toContain(`world`)
+})
+
+test(`highlightCode supports TypeScript`, async () => {
+  const code = `interface User { name: string }`
+  const result = await highlightCode({
+    code,
+    lang: `typescript`,
+    theme: `light`,
+  })
+
+  expect(result).toContain(`interface`)
+  expect(result).toContain(`User`)
+  expect(result).toContain(`string`)
+})
+
+test(`highlightCode supports GraphQL`, async () => {
+  const code = `type Query { user: User }`
+  const result = await highlightCode({
+    code,
+    lang: `graphql`,
+    theme: `light`,
+  })
+
+  expect(result).toContain(`type`)
+  expect(result).toContain(`Query`)
+  expect(result).toContain(`User`)
+})
+
+test(`highlightCode handles unknown language gracefully`, async () => {
+  const code = `some random text`
+  // Use 'text' as fallback for unknown languages
+  const result = await highlightCode({
+    code,
+    lang: `text`,
+    theme: `light`,
+  })
+
+  // Should still return highlighted HTML
+  expect(result).toContain(`<pre`)
+  expect(result).toContain(`some random text`)
+})
+
+test(`highlightCode applies line numbers when requested`, async () => {
+  const code = `line 1\nline 2\nline 3`
+  const result = await highlightCode({
+    code,
+    lang: `text`,
+    theme: `light`,
+    showLineNumbers: true,
+  })
+
+  expect(result).toContain(`data-line-numbers="true"`)
+})
+
+test(`highlightCode applies line highlighting`, async () => {
+  const code = `line 1\nline 2\nline 3`
+  const result = await highlightCode({
+    code,
+    lang: `text`,
+    theme: `light`,
+    highlightLines: [2],
+  })
+
+  expect(result).toContain(`data-highlighted="true"`)
+})
+
+test(`highlightCode supports both light and dark themes`, async () => {
+  const code = `const x = 1`
+
+  const lightResult = await highlightCode({
+    code,
+    lang: `javascript`,
+    theme: `light`,
+  })
+
+  const darkResult = await highlightCode({
+    code,
+    lang: `javascript`,
+    theme: `dark`,
+  })
+
+  // Both should contain theme CSS variables
+  expect(lightResult).toContain(`--shiki-light`)
+  expect(darkResult).toContain(`--shiki-dark`)
+})

package/src/lib/shiki/shiki.ts

@@ -0,0 +1,161 @@
+import {
+  transformerNotationDiff,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerRenderWhitespace,
+} from '@shikijs/transformers'
+import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter } from 'shiki'
+
+export interface ShikiOptions {
+  themes?: {
+    light: BundledTheme
+    dark: BundledTheme
+  }
+  langs?: BundledLanguage[]
+  defaultTheme?: 'light' | 'dark'
+}
+
+const DEFAULT_THEMES = {
+  light: `github-light` as BundledTheme,
+  dark: `tokyo-night` as BundledTheme,
+}
+
+const DEFAULT_LANGS: BundledLanguage[] = [
+  `typescript`,
+  `javascript`,
+  `jsx`,
+  `tsx`,
+  `graphql`,
+  `json`,
+  `yaml`,
+  `markdown`,
+  `bash`,
+  `shell`,
+  `css`,
+  `html`,
+  `sql`,
+  `python`,
+  `rust`,
+  `go`,
+  `java`,
+  `csharp`,
+  `php`,
+  `ruby`,
+  `swift`,
+  `kotlin`,
+  `scala`,
+  `r`,
+  `matlab`,
+  `latex`,
+  `dockerfile`,
+  `makefile`,
+  `nginx`,
+  `apache`,
+  `xml`,
+  `toml`,
+  `ini`,
+  `diff`,
+]
+
+// Singleton highlighter instance
+let highlighterInstance: Highlighter | null = null
+let highlighterPromise: Promise<Highlighter> | null = null
+
+export async function getHighlighter(options: ShikiOptions = {}): Promise<Highlighter> {
+  if (highlighterInstance) {
+    return highlighterInstance
+  }
+
+  if (!highlighterPromise) {
+    const themes = options.themes || DEFAULT_THEMES
+    const langs = options.langs || DEFAULT_LANGS
+
+    highlighterPromise = createHighlighter({
+      themes: [themes.light, themes.dark],
+      langs,
+    }).then(highlighter => {
+      highlighterInstance = highlighter
+      return highlighter
+    })
+  }
+
+  return highlighterPromise
+}
+
+export interface CodeHighlightOptions {
+  code: string
+  lang?: string
+  theme?: 'light' | 'dark'
+  showLineNumbers?: boolean
+  highlightLines?: number[]
+  diffLines?: { add: number[]; remove: number[] }
+  focusLines?: number[]
+  showInvisibles?: boolean
+}
+
+export async function highlightCode({
+  code,
+  lang = `text`,
+  theme = `light`,
+  showLineNumbers = false,
+  highlightLines = [],
+  diffLines,
+  focusLines = [],
+  showInvisibles = false,
+}: CodeHighlightOptions): Promise<string> {
+  const highlighter = await getHighlighter()
+
+  const themes = {
+    light: DEFAULT_THEMES.light,
+    dark: DEFAULT_THEMES.dark,
+  }
+
+  const transformers = []
+
+  // Add line numbers transformer if needed
+  if (showLineNumbers) {
+    // Custom line numbers will be handled in CSS
+    transformers.push({
+      name: `line-numbers`,
+      pre(node: any) {
+        node.properties[`data-line-numbers`] = `true`
+      },
+    })
+  }
+
+  // Add highlight transformer
+  if (highlightLines.length > 0) {
+    transformers.push({
+      name: `highlight-lines`,
+      line(node: any, line: number) {
+        if (highlightLines.includes(line)) {
+          node.properties[`data-highlighted`] = `true`
+        }
+      },
+    })
+  }
+
+  // Add standard transformers
+  transformers.push(
+    transformerNotationHighlight(),
+    transformerNotationDiff(),
+    transformerNotationFocus(),
+  )
+
+  if (showInvisibles) {
+    transformers.push(transformerRenderWhitespace())
+  }
+
+  // Generate HTML with CSS variables for theme switching
+  const html = highlighter.codeToHtml(code, {
+    lang,
+    themes,
+    defaultColor: false,
+    transformers,
+  })
+
+  return html
+}
+
+// Re-export types
+export type { BundledLanguage, BundledTheme, Highlighter } from 'shiki'

package/src/lib/vite-virtual/identifier.ts

@@ -2,7 +2,7 @@ import { createId, markNoPlugins, normalizeId } from './id.ts'
 
 export interface Options {
   /**
-   * @defaultValue '/'
+   * @default '/'
    */
   separator?: string
   /**
@@ -10,7 +10,7 @@ export interface Options {
 
    * @see https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
 
-   * @defaultValue false
+   * @default false
    */
   allowPluginProcessing?: boolean
 }

package/src/project-data.ts

@@ -4,6 +4,7 @@ import type { Schema } from './api/schema/index.ts'
 export interface ProjectData {
   schema: null | Schema.Schema
   faviconPath: string
+  basePath: string
   paths: Config.Config[`paths`][`project`]
   server: {
     static: {

package/src/template/components/CodeBlock.tsx

@@ -0,0 +1,73 @@
+import { highlightCode } from '#lib/shiki/index'
+import React, { useEffect, useState } from 'react'
+
+interface CodeBlockProps {
+  children: string
+  language?: string
+  className?: string
+  showLineNumbers?: boolean
+  highlightLines?: number[]
+  diffLines?: { add: number[]; remove: number[] }
+  focusLines?: number[]
+  showInvisibles?: boolean
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({
+  children,
+  language = `text`,
+  className = ``,
+  showLineNumbers = false,
+  highlightLines = [],
+  diffLines,
+  focusLines = [],
+  showInvisibles = false,
+}) => {
+  const [html, setHtml] = useState<string>(``)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // TODO: Implement proper theme detection
+  // For now, we'll rely on CSS to handle theme switching
+  const theme = `light` // Default to light theme
+
+  useEffect(() => {
+    const renderCode = async () => {
+      try {
+        const output = await highlightCode({
+          code: children,
+          lang: language,
+          theme,
+          showLineNumbers,
+          highlightLines,
+          diffLines,
+          focusLines,
+          showInvisibles,
+        })
+
+        setHtml(output)
+      } catch (error) {
+        console.error(`Failed to highlight code:`, error)
+        // Fallback to plain text
+        setHtml(`<pre><code>${children}</code></pre>`)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    renderCode()
+  }, [children, language, showLineNumbers, highlightLines, diffLines, focusLines, showInvisibles])
+
+  if (isLoading) {
+    return (
+      <pre className={className}>
+        <code>{children}</code>
+      </pre>
+    )
+  }
+
+  return (
+    <div
+      className={`code-block ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

package/src/template/components/Link.tsx

@@ -52,11 +52,12 @@ export const getPathActiveReport = (
   // Normalize both paths for comparison
   const normalizedPath = pathExp.startsWith('/') ? pathExp.slice(1) : pathExp
   const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
-  
+
   const isDirect = normalizedCurrentPath === normalizedPath
-  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/') && normalizedCurrentPath !== normalizedPath
+  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/')
+    && normalizedCurrentPath !== normalizedPath
   const is = isDirect || isdescendant
-  
+
   return {
     is,
     isDirect,

package/src/template/entry.client.tsx

@@ -2,9 +2,11 @@
 // 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' // 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.jsx'
 
 // SPA
@@ -19,6 +21,7 @@ import { routes } from './routes.jsx'
 
 const router = createBrowserRouter(routes, {
   hydrationData: window.__staticRouterHydrationData,
+  basename: PROJECT_DATA.basePath === `/` ? undefined : PROJECT_DATA.basePath.slice(0, -1), // Remove trailing slash for React Router
 })
 
 ReactDomClient.hydrateRoot(

package/src/template/routes/root.tsx

@@ -1,3 +1,4 @@
+import { assetUrl, faviconUrl } from '#api/utils/asset-url/index'
 import type { ReactRouter } from '#dep/react-router/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { GitHubLogoIcon } from '@radix-ui/react-icons'
@@ -40,12 +41,12 @@ export const Component = () => {
         {import.meta.env.DEV && <link rel='stylesheet' href={radixStylesUrl} />}
         <link
           rel='icon'
-          href={PROJECT_DATA.faviconPath.replace(`.svg`, `.ico`) + `?v=1`}
+          href={faviconUrl(PROJECT_DATA.faviconPath.replace(`.svg`, `.ico`) + `?v=1`, PROJECT_DATA.basePath)}
           sizes='256 x 256'
         />
         <link
           rel='icon'
-          href={PROJECT_DATA.faviconPath + `?v=1`}
+          href={faviconUrl(PROJECT_DATA.faviconPath + `?v=1`, PROJECT_DATA.basePath)}
           sizes='any'
           type='image/svg+xml'
         />
@@ -120,6 +121,40 @@ const Layout = () => {
         my='8'
         mx='auto'
       >
+        <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}
         {isShowSidebar && (
           <Sidebar

package/src/template/server/manifest.ts

@@ -1,25 +1,28 @@
+import { assetUrl } from '#api/utils/asset-url/index'
 import type { Vite } from '#dep/vite/index'
 import { Group, Str } from '@wollybeard/kit'
 
 export const injectManifestIntoHtml = (
   html: string,
   manifest: Vite.Manifest,
+  basePath: string,
 ): string => {
-  const assets = getRelevantAsssetsFromManifest(manifest)
+  const assets = getRelevantAsssetsFromManifest(manifest, basePath)
   return injectAssetsIntoHtml(html, assets)
 }
 
 const getRelevantAsssetsFromManifest = (
   manifest: Vite.Manifest,
+  basePath: string,
 ): HttpAssetGroupSet => {
   const htmlAssets: HttpAsset[] = []
 
   for (const manifestChunk of Object.values(manifest)) {
     if (manifestChunk.isEntry) {
-      htmlAssets.push({ type: `js`, path: `/${manifestChunk.file}` })
+      htmlAssets.push({ type: `js`, path: assetUrl(manifestChunk.file, basePath) })
     }
     for (const cssItem of manifestChunk.css ?? []) {
-      htmlAssets.push({ type: `css`, path: `/${cssItem}` })
+      htmlAssets.push({ type: `css`, path: assetUrl(cssItem, basePath) })
     }
   }
 

package/src/template/server/render-page.tsx

@@ -6,6 +6,7 @@ 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'
@@ -29,7 +30,7 @@ export const renderPage = (
   }
 
   if (__BUILDING__) {
-    html = injectManifestIntoHtml(html, viteClientAssetManifest)
+    html = injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
   }
 
   // todo: what is this?

package/src/template/server/ssg/generate.ts

@@ -8,7 +8,22 @@ import { getRoutesPaths } from './get-route-paths.ts'
 
 export const generate = async (view: ReactRouter.StaticHandler) => {
   const handler: Hono.Handler = async (ctx) => {
-    const staticHandlerContext = await view.query(ctx.req.raw)
+    // For SSG, we need to create a request with the base path prepended
+    // so React Router can match it correctly
+    const url = new URL(ctx.req.raw.url)
+    const basePath = PROJECT_DATA.basePath === '/' ? '' : PROJECT_DATA.basePath.slice(0, -1)
+
+    // Create a new request with the base path prepended to the pathname
+    const modifiedRequest = new Request(
+      `${url.protocol}//${url.host}${basePath}${url.pathname}${url.search}`,
+      {
+        method: ctx.req.raw.method,
+        headers: ctx.req.raw.headers,
+        body: ctx.req.raw.body,
+      },
+    )
+
+    const staticHandlerContext = await view.query(modifiedRequest)
     if (staticHandlerContext instanceof Response) {
       return staticHandlerContext
     }
@@ -21,12 +36,60 @@ export const generate = async (view: ReactRouter.StaticHandler) => {
     app.get(routePath, handler)
   }
 
-  const result = await Hono.SSG.toSSG(app, NodeFs, {
-    concurrency: 10,
-    dir: PROJECT_DATA.paths.relative.build.root,
-  })
+  // For large schemas, we need to process in smaller batches to avoid memory issues
+  const BATCH_SIZE = 50
+  const totalPaths = routePaths.length
+  console.log(`[info] Generating ${totalPaths} static pages...`)
+
+  for (let i = 0; i < totalPaths; i += BATCH_SIZE) {
+    const batchPaths = routePaths.slice(i, i + BATCH_SIZE)
+    const batchApp = new Hono.Hono()
+
+    // Create a custom handler for batch processing that includes base path handling
+    const batchHandler: Hono.Handler = async (ctx) => {
+      // For SSG, we need to create a request with the base path prepended
+      const url = new URL(ctx.req.raw.url)
+      const basePath = PROJECT_DATA.basePath === '/' ? '' : PROJECT_DATA.basePath.slice(0, -1)
+
+      // Create a new request with the base path prepended to the pathname
+      const modifiedRequest = new Request(
+        `${url.protocol}//${url.host}${basePath}${url.pathname}${url.search}`,
+        {
+          method: ctx.req.raw.method,
+          headers: ctx.req.raw.headers,
+          body: ctx.req.raw.body,
+        },
+      )
+
+      const staticHandlerContext = await view.query(modifiedRequest)
+      if (staticHandlerContext instanceof Response) {
+        return staticHandlerContext
+      }
+      return renderPage(staticHandlerContext)
+    }
 
-  if (!result.success) {
-    throw new Error(`Failed to generate static site`, { cause: result.error })
+    // Register only the routes for this batch
+    for (const routePath of batchPaths) {
+      batchApp.get(routePath, batchHandler)
+    }
+
+    console.log(
+      `[info] Processing batch ${Math.floor(i / BATCH_SIZE) + 1}/${
+        Math.ceil(totalPaths / BATCH_SIZE)
+      } (${batchPaths.length} pages)...`,
+    )
+
+    const result = await Hono.SSG.toSSG(batchApp, NodeFs, {
+      concurrency: 5, // Reduced concurrency for memory efficiency
+      dir: PROJECT_DATA.paths.relative.build.root,
+    })
+
+    if (!result.success) {
+      throw new Error(`Failed to generate static site at batch ${Math.floor(i / BATCH_SIZE) + 1}`, {
+        cause: result.error,
+      })
+    }
   }
+
+  console.log(`[info] Successfully generated ${totalPaths} static pages.`)
 }

package/src/template/server/view.ts

@@ -1,4 +1,7 @@
 import { createStaticHandler } from 'react-router'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { routes } from '../routes.jsx'
 
-export const view = createStaticHandler(routes)
+export const view = createStaticHandler(routes, {
+  basename: PROJECT_DATA.basePath === `/` ? undefined : PROJECT_DATA.basePath.slice(0, -1), // Remove trailing slash for React Router
+})