docs: bump comark-docs layer and lint docs content

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     with:
       build: pnpm run ci:build
       test: pnpm exec vitest
-      lint: pnpm run lint && pnpm run knip
+      lint: pnpm run lint && pnpm run lint:docs && pnpm run knip
       build-for-lint: true
 
   # The RPC transport binds a native WebSocket on Bun/Deno (crossws's

docs/app/components/global/PageSection.ts

@@ -0,0 +1,2 @@
+// `::page-section` is Nuxt UI's page section.
+export { default } from '@nuxt/ui/components/PageSection.vue'

docs/comark-lint.config.ts

@@ -0,0 +1,25 @@
+import { existsSync, readdirSync } from 'node:fs'
+import preset from 'comark-docs/lint.mjs'
+
+// The site's own Markdown components, registered globally from app/components/global/.
+const global = readdirSync('app/components/global').map(file =>
+  file.replace(/\.(vue|ts)$/, '').replace(/[A-Z]/g, (c, i) => (i ? '-' : '') + c.toLowerCase()),
+)
+
+export default {
+  ...preset,
+  components: [
+    ...preset.components,
+    ...global,
+  ],
+  links: {
+    ...preset.links,
+    routes: (path: string) =>
+      // Vue pages, not Markdown.
+      ['/chat', '/logos'].includes(path)
+      // Static files, such as screenshots.
+      || existsSync(`public${path}`)
+      // comark-content lowercases page paths, and the site serves `/errors/DF0036` as well.
+      || preset.links.routes(path.toLowerCase()),
+  },
+}

docs/content/4.ecosystem.md

@@ -240,7 +240,7 @@ Add your project
 Building on Devframe? Open a pull request that adds a card, or open an issue first if you are not sure it fits.
 
 #ctas
-  :::u-button
+  :::button
   ---
   to: https://github.com/devframes/devframe/edit/main/docs/content/4.ecosystem.md
   icon: i-lucide-plus
@@ -250,7 +250,7 @@ Building on Devframe? Open a pull request that adds a card, or open an issue fir
   Add your project
   :::
 
-  :::u-button
+  :::button
   ---
   to: https://github.com/devframes/devframe/issues/new
   target: _blank

docs/content/index.md

@@ -4,7 +4,7 @@ title: 'Build a devtool once. Mount it anywhere.'
 description: 'Devframe is a framework-neutral foundation for devtools. One definition becomes a Web Standard handler you can mount into any host framework, ship as a CLI or static report, and expose to coding agents.'
 ---
 
-::u-page-hero
+::landing-hero
 ---
 orientation: horizontal
 ---
@@ -32,7 +32,7 @@ Build a devtool once. Mount it anywhere.
 A framework-neutral foundation for devtools. One definition becomes a Web Standard handler you can mount into any host framework, ship as a CLI or static report, and expose to coding agents.
 
 #links
-  :::u-button
+  :::button
   ---
   to: /guide/getting-started
   size: lg
@@ -41,7 +41,7 @@ A framework-neutral foundation for devtools. One definition becomes a Web Standa
   Get started
   :::
 
-  :::u-button
+  :::button
   ---
   icon: i-simple-icons-github
   color: neutral
@@ -53,7 +53,7 @@ A framework-neutral foundation for devtools. One definition becomes a Web Standa
   View on GitHub
   :::
 
-  :::u-button
+  :::button
   ---
   icon: i-simple-icons-discord
   color: neutral
@@ -67,7 +67,7 @@ A framework-neutral foundation for devtools. One definition becomes a Web Standa
 ::
 
 
-::u-page-section
+::page-section
   :::callout
   ---
   icon: i-lucide-newspaper

docs/highlighter.ts

@@ -0,0 +1,9 @@
+import vitesseDark from '@shikijs/themes/vitesse-dark'
+import vitesseLight from '@shikijs/themes/vitesse-light'
+import shiki from 'comark/plugins/shiki'
+
+/** Code blocks in content: Shiki with the Vitesse themes instead of the layer's rangi and Geist theme. */
+export default shiki({
+  registerDefaultThemes: false,
+  themes: { light: vitesseLight, dark: vitesseDark },
+})

docs/nuxt.config.ts

@@ -9,6 +9,10 @@ export default defineNuxtConfig({
    */
   extends: [process.env.COMARK_DOCS_LAYER || 'comark-docs'],
 
+  comarkDocs: {
+    highlighter: './highlighter.ts',
+  },
+
   css: [
     '@shikijs/magic-move/style.css',
     '~/assets/css/devframe.css',

docs/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "docs": "nuxt dev --port 5175",
     "docs:build": "nuxt build",
-    "docs:serve": "nuxt preview"
+    "docs:serve": "nuxt preview",
+    "lint": "comark-lint \"content/**/*.md\""
   },
   "dependencies": {
     "@iconify-json/carbon": "catalog:frontend",
@@ -17,7 +18,9 @@
     "@iconify-json/twemoji": "catalog:frontend",
     "@iconify-json/unjs": "catalog:frontend",
     "@shikijs/magic-move": "catalog:frontend",
+    "@shikijs/themes": "catalog:docs",
     "@vueuse/core": "catalog:frontend",
+    "comark": "catalog:docs",
     "comark-docs": "catalog:docs",
     "d3-shape": "catalog:frontend",
     "nuxt": "catalog:build",
@@ -28,6 +31,7 @@
     "@devframes/plugin-og": "workspace:*",
     "@nuxt/devtools-kit": "catalog:docs",
     "@types/d3-shape": "catalog:types",
+    "comark-linter": "catalog:docs",
     "devframe": "workspace:*",
     "satori": "catalog:docs"
   }

knip.jsonc

@@ -48,7 +48,19 @@
       // Nuxt auto-registers `app/components` and `app/composables`; the files
       // here shadow same-named pieces of the comark-docs layer (AppHeaderBrand,
       // useFilteredNavigation, ...), so nothing imports them explicitly.
-      "entry": ["app/components/*.vue", "app/components/OgImage/*.vue", "app/composables/*.ts"],
+      //
+      // `app/components/global/*.ts` re-export Nuxt UI components for content,
+      // `highlighter.ts` is loaded by path from `comarkDocs.highlighter` in
+      // `nuxt.config.ts`, and `comark-lint.config.ts` is found by the
+      // `comark-lint` CLI.
+      "entry": [
+        "app/components/*.vue",
+        "app/components/OgImage/*.vue",
+        "app/components/global/*.ts",
+        "app/composables/*.ts",
+        "highlighter.ts",
+        "comark-lint.config.ts"
+      ],
       // `app/components/AssistantChat.vue` shadows the comark-docs layer's own
       // component and mirrors its imports verbatim (see the file header). These
       // packages are provided transitively by the `comark-docs` layer, not

package.json

@@ -26,6 +26,7 @@
     "storybook": "pnpm -C storybook dev",
     "storybook:build": "pnpm --filter @devframes/storybook run storybook:build",
     "lint": "eslint --cache",
+    "lint:docs": "pnpm -C docs run lint",
     "knip": "knip",
     "test": "pnpm run build && vitest",
     "test:e2e": "pnpm run build && playwright test",

packages/devframe/src/adapters/__tests__/initiate.test.ts

@@ -249,7 +249,12 @@ describe('adapters/handler', () => {
       })
     })
     // No distDir: the host app owns the pages, the devframe only its routes.
-    devtoolsRef = initDevframe(defineTestDef('handler-root'), { base: '/', auth: false, distDir: false, server })
+    devtoolsRef = initDevframe(defineTestDef('handler-root'), {
+      base: '/',
+      auth: false,
+      distDir: false,
+      server,
+    })
     await new Promise<void>(resolve => server.listen(port, host, resolve))
 
     try {
@@ -265,7 +270,11 @@ describe('adapters/handler', () => {
 
       // The devframe's own routes still answer.
       const meta = await (await fetch(`http://${host}:${port}/__connection.json`)).json()
-      expect(meta).toEqual({ backend: 'websocket', websocket: { path: '__ws' }, sse: { path: '__sse' } })
+      expect(meta).toEqual({
+        backend: 'websocket',
+        websocket: { path: '__ws' },
+        sse: { path: '__sse' },
+      })
 
       // Without a `next`, a miss is still the devframe's own 404.
       const bare = await devtoolsRef.handler(new Request(`http://${host}:${port}/main.tsx`))