polen 0.10.0-next.13 → 0.10.0-next.14

package/build/template/styles/code-block.css

@@ -0,0 +1,218 @@
+/* Code Block Styles */
+
+/* Base code block container */
+.code-block {
+  position: relative;
+  margin: 1rem 0;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+  background: inherit;
+}
+
+.code-block code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-variant-ligatures: contextual;
+}
+
+/* Shiki theme switching with CSS variables */
+/* Default to light theme */
+:root {
+  color-scheme: light;
+}
+
+/* When dark mode is active */
+.dark {
+  color-scheme: dark;
+}
+
+/* Shiki token colors for light theme (github-light) */
+:root {
+  --shiki-color-text: #24292e;
+  --shiki-color-background: #f6f8fa;
+  --shiki-token-constant: #005cc5;
+  --shiki-token-string: #032f62;
+  --shiki-token-comment: #6a737d;
+  --shiki-token-keyword: #d73a49;
+  --shiki-token-parameter: #e36209;
+  --shiki-token-function: #6f42c1;
+  --shiki-token-string-expression: #032f62;
+  --shiki-token-punctuation: #24292e;
+  --shiki-token-link: #032f62;
+}
+
+/* Shiki token colors for dark theme (tokyo-night) */
+.dark {
+  --shiki-color-text: #c0caf5;
+  --shiki-color-background: #1a1b26;
+  --shiki-token-constant: #ff9e64;
+  --shiki-token-string: #9ece6a;
+  --shiki-token-comment: #565f89;
+  --shiki-token-keyword: #bb9af7;
+  --shiki-token-parameter: #e0af68;
+  --shiki-token-function: #7aa2f7;
+  --shiki-token-string-expression: #9ece6a;
+  --shiki-token-punctuation: #c0caf5;
+  --shiki-token-link: #9ece6a;
+}
+
+/* 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: var(--shiki-color-background);
+  color: var(--shiki-color-text);
+}
+
+pre.shiki code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-variant-ligatures: contextual;
+}
+
+/* Line numbers */
+.code-block[data-line-numbers="true"] pre {
+  padding-left: 3.5rem;
+  position: relative;
+}
+
+.code-block[data-line-numbers="true"] .line {
+  position: relative;
+}
+
+.code-block[data-line-numbers="true"] .line::before {
+  content: attr(data-line);
+  position: absolute;
+  left: -3rem;
+  width: 2.5rem;
+  text-align: right;
+  color: var(--gray-a6);
+  user-select: none;
+}
+
+/* Line highlighting */
+.code-block .line[data-highlighted="true"] {
+  background-color: var(--amber-a3);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+/* Diff lines */
+.code-block .line[data-diff="+"] {
+  background-color: var(--green-a3);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.code-block .line[data-diff="-"] {
+  background-color: var(--red-a3);
+  display: block;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+}
+
+.code-block .line[data-diff="+"]::before {
+  content: "+ ";
+  color: var(--green-11);
+  font-weight: bold;
+}
+
+.code-block .line[data-diff="-"]::before {
+  content: "- ";
+  color: var(--red-11);
+  font-weight: bold;
+}
+
+/* Focus lines */
+.code-block .line:not([data-focus="true"]) {
+  opacity: 0.5;
+  filter: grayscale(100%);
+  transition: opacity 0.2s, filter 0.2s;
+}
+
+.code-block:hover .line:not([data-focus="true"]) {
+  opacity: 0.8;
+  filter: grayscale(0%);
+}
+
+/* Copy button */
+.code-block-copy {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background: var(--gray-a3);
+  color: var(--gray-12);
+  border: 1px solid var(--gray-a5);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.code-block-copy:hover {
+  background: var(--gray-a4);
+  border-color: var(--gray-a6);
+}
+
+.code-block-copy.copied {
+  background: var(--green-a3);
+  border-color: var(--green-a5);
+  color: var(--green-11);
+}
+
+/* Language badge */
+.code-block-lang {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.25rem 0.75rem;
+  background: var(--gray-a3);
+  color: var(--gray-11);
+  font-size: 12px;
+  font-weight: 500;
+  border-bottom-left-radius: 4px;
+  user-select: none;
+}
+
+/* Scrollbar styling */
+.code-block pre::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.code-block pre::-webkit-scrollbar-track {
+  background: var(--gray-a3);
+  border-radius: 4px;
+}
+
+.code-block pre::-webkit-scrollbar-thumb {
+  background: var(--gray-a6);
+  border-radius: 4px;
+}
+
+.code-block pre::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-a7);
+}
+
+/* Inline code */
+code:not(.code-block code) {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 0.85em;
+  background-color: var(--gray-a3);
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polen",
-  "version": "0.10.0-next.13",
+  "version": "0.10.0-next.14",
   "type": "module",
   "description": "A framework for delightful GraphQL developer portals",
   "author": {
@@ -268,7 +268,8 @@
     "prepublishOnly": "pnpm build",
     "prepack": "pnpm build",
     "build:cli:chmodx": "chmod +x ./build/cli/index.js",
-    "postbuild": "pnpm run build:cli:chmodx",
+    "postbuild": "pnpm run build:cli:chmodx && pnpm run build:copy-assets",
+    "build:copy-assets": "cp -r src/template/styles build/template/",
     "test": "vitest",
     "check": "pnpm run '/^check:(?!pedantic:).+/'",
     "checkAll": "pnpm run '/^check:.+/'",

package/src/api/singletons/markdown/markdown.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest'
 import { parse } from './markdown.ts'
 
 describe(`markdown parser with syntax highlighting`, () => {
-  test(`parse highlights code blocks`, async () => {
+  test(`parse highlights code blocks`, { timeout: 10000 }, async () => {
     const markdown = `
 # Hello
 

package/src/api/vite/plugins/build.ts

@@ -2,118 +2,126 @@ import type { Config } from '#api/config/index'
 import type { PolenBuildManifest } from '#api/static/manifest'
 import { Vite } from '#dep/vite/index'
 import { ViteVirtual } from '#lib/vite-virtual/index'
+import { debugPolen } from '#singletons/debug'
 import { Fs, Path } from '@wollybeard/kit'
 import packageJson from '../../../../package.json' with { type: 'json' }
 import { isKitUnusedExternalImport, isRadixModuleLevelDirective } from '../log-filters.ts'
 import { polenVirtual } from '../vi.ts'
 
 export const Build = (config: Config.Config): Vite.Plugin[] => {
+  const debug = debugPolen.sub(`vite-build`)
+  debug('construct')
   // let viteConfigResolved: Vite.ResolvedConfig
 
   // const outDir = Path.join(config.paths.project.rootDir, `dist`)
 
-  return [Manifest(config), BuildManifest(config), {
-    name: `polen:build-client`,
-    apply: `build`,
-    applyToEnvironment: Vite.isEnvironmentClient,
-    // HACK: For some reason the ?url import doesn't lead to a rewrite in the build.
-    // Furthermore we need to rely on the manifest to get its final name because it is
-    // generated by the client build before the server build.
-    // However, we still need the asset in development.
-    // But we cannot exclude the import in build.
-    // So this does that for us but it is really hacky.
-    // FIXME
-    // 1. Raise issue about having ?url lead to expected build path rewrite?
-    // 2. And: Move asset generation to server build?
-    // 3. And/or: Use Vite Environments API?
-    generateBundle(_, bundle, isWrite) {
-      if (isWrite) {
-        for (const chunkOrAsset of Object.values(bundle)) {
-          if (chunkOrAsset.type === `asset` && chunkOrAsset.names.includes(`entry.client.jsx`)) {
-            // eslint-disable-next-line
-            delete bundle[chunkOrAsset.fileName]
+  return [
+    Manifest(config),
+    BuildManifest(config),
+    {
+      name: `polen:build-client`,
+      apply: `build`,
+      applyToEnvironment: Vite.isEnvironmentClient,
+      // HACK: For some reason the ?url import doesn't lead to a rewrite in the build.
+      // Furthermore we need to rely on the manifest to get its final name because it is
+      // generated by the client build before the server build.
+      // However, we still need the asset in development.
+      // But we cannot exclude the import in build.
+      // So this does that for us but it is really hacky.
+      // FIXME
+      // 1. Raise issue about having ?url lead to expected build path rewrite?
+      // 2. And: Move asset generation to server build?
+      // 3. And/or: Use Vite Environments API?
+      generateBundle(_, bundle, isWrite) {
+        if (isWrite) {
+          for (const chunkOrAsset of Object.values(bundle)) {
+            if (chunkOrAsset.type === `asset` && chunkOrAsset.names.includes(`entry.client.jsx`)) {
+              // eslint-disable-next-line
+              delete bundle[chunkOrAsset.fileName]
+            }
           }
         }
-      }
-    },
-    onLog(_, message) {
-      if (isRadixModuleLevelDirective(message)) return
-      if (isKitUnusedExternalImport(message)) return
-    },
-    config() {
-      return {
-        environments: {
-          client: {
-            build: {
-              manifest: true,
-              rollupOptions: {
-                input: [config.paths.framework.template.client.entrypoint],
-                external: id => id.startsWith(`node:`),
-                onwarn(message) {
-                  if (isKitUnusedExternalImport(message)) return
+      },
+      onLog(_, message) {
+        if (isRadixModuleLevelDirective(message)) return
+        if (isKitUnusedExternalImport(message)) return
+      },
+      config() {
+        return {
+          environments: {
+            client: {
+              build: {
+                manifest: true,
+                rollupOptions: {
+                  input: [config.paths.framework.template.client.entrypoint],
+                  external: id => id.startsWith(`node:`),
+                  onwarn(message) {
+                    if (isKitUnusedExternalImport(message)) return
+                  },
                 },
               },
             },
           },
-        },
-      }
+        }
+      },
     },
-  }, {
-    name: `polen-ssr-build`,
-    apply: `build`,
-    applyToEnvironment: Vite.isEnvironmentSsr,
-    config() {
-      return {
-        // Have to configure this here??
-        // @see https://github.com/vitejs/vite/issues/20098
-        ssr: {
-          noExternal: true,
-        },
-        environments: {
+
+    {
+      name: `polen-ssr-build`,
+      apply: `build`,
+      applyToEnvironment: Vite.isEnvironmentSsr,
+      config() {
+        return {
+          // Have to configure this here??
+          // @see https://github.com/vitejs/vite/issues/20098
           ssr: {
-            build: {
-              // NO EFFECT (see above)
-              // Bundle all dependencies instead of externalizing them
-              // noExternal: true,
-              // The SSR build will follow the client build, and emptying the dir would lose the output of the client build.
-              emptyOutDir: false,
-              rollupOptions: {
-                input: [config.paths.framework.template.server.entrypoint],
-                output: {
-                  entryFileNames: config.paths.project.relative.build.relative.serverEntrypoint,
+            noExternal: true,
+          },
+          environments: {
+            ssr: {
+              build: {
+                // NO EFFECT (see above)
+                // Bundle all dependencies instead of externalizing them
+                // noExternal: true,
+                // The SSR build will follow the client build, and emptying the dir would lose the output of the client build.
+                emptyOutDir: false,
+                rollupOptions: {
+                  input: [config.paths.framework.template.server.entrypoint],
+                  output: {
+                    entryFileNames: config.paths.project.relative.build.relative.serverEntrypoint,
+                  },
                 },
               },
             },
           },
-        },
-      }
-    },
-
-    onLog(_, message) {
-      if (isKitUnusedExternalImport(message)) return
-    },
-    // generateBundle(_, bundle, isWrite) {
-    //   if (isWrite) {
-    //     for (const chunkOrAsset of Object.values(bundle)) {
-    //       console.log(chunkOrAsset)
-    //       if (chunkOrAsset.type === `chunk`) {
-    //         if (chunkOrAsset.facadeModuleId === viClientManifest.resolved) {
-    //           // eslint-disable-next-line
-    //           delete bundle[chunkOrAsset.fileName]
-    //         }
-    //       }
-    //     }
-    //   }
-    // },
-    async closeBundle() {
-      /**
-       * clean up the manifest. Was generated by client. For server build. Not needed after (unless debugging).
-       */
-      if (!config.advanced.debug) {
-        await Fs.remove(Path.join(config.paths.project.absolute.build.root, `.vite`))
-      }
+        }
+      },
+      onLog(_, message) {
+        if (isKitUnusedExternalImport(message)) return
+      },
+      // generateBundle(_, bundle, isWrite) {
+      //   if (isWrite) {
+      //     for (const chunkOrAsset of Object.values(bundle)) {
+      //       console.log(chunkOrAsset)
+      //       if (chunkOrAsset.type === `chunk`) {
+      //         if (chunkOrAsset.facadeModuleId === viClientManifest.resolved) {
+      //           // eslint-disable-next-line
+      //           delete bundle[chunkOrAsset.fileName]
+      //         }
+      //       }
+      //     }
+      //   }
+      // },
+      async closeBundle() {
+        /**
+         * clean up the manifest. Was generated by client. For server build. Not needed after (unless debugging).
+         */
+        if (!config.advanced.debug) {
+          await Fs.remove(Path.join(config.paths.project.absolute.build.root, `.vite`))
+        }
+      },
     },
-  }]
+  ]
 }
 
 const viClientManifest = polenVirtual([`vite`, `client`, `manifest`])

package/src/api/vite/plugins/core.ts

@@ -57,7 +57,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
     }))
   }
 
-  const json = VitePluginJson.create({
+  const jsonsuper = VitePluginJson.create({
     codec: {
       validate: superjson,
       importPath: import.meta.resolve('#singletons/superjson'),
@@ -85,7 +85,7 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
       name: `polen:internal-import-alias`,
       enforce: 'pre' as const,
       resolveId(id, importer) {
-        const d = debugPolen.sub(`vite-plugin:internal-import-alias`)
+        // const debug = debugPolen.sub(`vite-plugin:internal-import-alias`)
 
         const isPolenImporter = Boolean(
           importer
@@ -107,25 +107,24 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         )
 
         if (!isPolenImporter) return null
-        d(`check candidate`, { id, importer, isPolenImporter })
+        // debug(`check candidate`, { id, importer, isPolenImporter })
 
         const find = Str.pattern<{ groups: [`path`] }>(/^#(?<path>.+)/)
         const match = Str.match(id, find)
         if (!match) return null
 
         const to = `${config.paths.framework.sourceDir}/${match.groups.path}${config.paths.framework.sourceExtension}`
-        d(`did resolve`, { from: id, to })
+        // debug(`did resolve`, { from: id, to })
 
         return to
       },
     },
-    json,
+    jsonsuper,
     VitePluginReactiveData.create({
-      moduleId: `virtual:polen/project/data/navbar`,
-      data: navbarData.value,
+      moduleId: `virtual:polen/project/data/navbar.jsonsuper`,
       codec: superjson,
+      data: navbarData.value,
       name: `polen-navbar`,
-      moduleType: 'jsonsuper',
     }),
     ...Pages({
       config,
@@ -181,12 +180,18 @@ export const Core = (config: Config.Config): Vite.PluginOption[] => {
         {
           identifier: viProjectData,
           async loader() {
+            const debug = debugPolen.sub(`module-project-data`)
+
+            debug('load', { id: viProjectData.id })
+
             const schema = await readSchema()
 
             // ━ Schema presence causes adding some navbar items
-            const schemaNavbar = navbarData.get('schema')
-            schemaNavbar.length = 0 // Clear existing
             if (schema) {
+              const schemaNavbar = navbarData.get('schema')
+              schemaNavbar.length = 0 // Clear existing
+              debug('update navbar', { message: 'for schema' })
+
               // IMPORTANT: Always ensure paths start with '/' for React Router compatibility.
               // Without the leading slash, React Router treats paths as relative, which causes
               // hydration mismatches between SSR (where base path is prepended) and client

package/src/api/vite/plugins/pages.ts

@@ -14,7 +14,7 @@ import { Arr, Cache, Path, Str } from '@wollybeard/kit'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 
-const debug = debugPolen.sub(`vite-plugin-pages`)
+const debug = debugPolen.sub(`vite-pages`)
 
 export const viProjectRoutes = polenVirtual([`project`, `routes.jsx`], { allowPluginProcessing: true })
 export const viProjectPagesCatalog = polenVirtual([`project`, `data`, 'pages-catalog.jsonsuper'], {
@@ -207,25 +207,27 @@ export const Pages = ({
         // },
         async handler(id) {
           if (id !== viProjectPagesCatalog.resolved) return
-          debug(`viProjectPagesCatalog`)
+          debug(`hook load`)
 
           const scanResult = await scanPages()
 
-          // Report any diagnostics
           reportDiagnostics(scanResult.diagnostics)
-          debug(`Found ${String(scanResult.list.length)} visible pages`)
+          debug(`found visible`, { count: scanResult.list.length })
 
           //
           // ━━ Build Navbar
           //
 
-          // Update navbar if provided
           if (navbarData) {
             const navbarPages = navbarData.get('pages')
+
             navbarPages.length = 0 // Clear existing
 
-            const navbarItems = createNavbar(scanResult.list)
-            navbarPages.push(...navbarItems)
+            const data = createNavbar(scanResult.list)
+
+            debug('update navbar', data)
+
+            navbarPages.push(...data)
           }
 
           //