@voltro/cli 0.52.0 → 0.53.0

package/templates/apps/frontend-docs/src/pages/docs/[...slug]/page.tsx

@@ -2,55 +2,50 @@
 // `/docs/<path>` URL (and its `/de/docs/<path>` mirror). `getStaticPaths`
 // enumerates the doc tree at build time so every page is pre-rendered.
 //
-// Bilingual (Strategy B): the doc SLUG is stable across locales — only the
-// /de URL prefix differs — so each entry carries a `titleKey` / `bodyKey`
-// into the message catalog rather than literal, one-language strings. The
-// [locale] mirror (src/pages/[locale]/docs/[...slug].tsx) re-exports this
-// page and emits the cross-product of non-default locales × these slugs.
+// Bilingual via the `docs` CONTENT COLLECTION (content/docs/{en,de}/**):
+// the SLUG is stable across locales — only the /de URL prefix and the
+// locale tree differ. This bare route reads the DEFAULT locale's tree; the
+// [locale] mirror re-exports the component and loads the requested tree
+// (with fallback to English for untranslated entries).
 
 import type { ReactNode } from 'react'
 import type { PageMeta } from '@voltro/web'
-import { useParams } from '@voltro/web'
-import { T, useTFn } from '@voltro/i18n'
-import { getCatalog, type Messages } from '../../../lib/locale'
+import { useLoaderData, useParams } from '@voltro/web'
+import { T } from '@voltro/i18n'
+import { getCollection, getEntry, type ContentEntry } from '@voltro/content'
+import { docs, type Doc } from '../../../collections/docs.collection'
+import { getCatalog } from '../../../lib/locale'
 
 export const renderMode = 'static' as const
 export const interactive = 'none' as const
 
-interface DocEntry {
-  readonly slug: string
-  readonly titleKey: keyof Messages
-  readonly bodyKey: keyof Messages
-}
-
-// The doc tree — slugs stay identical across locales; the per-locale prose
-// lives in the catalogs. Replace with a loader over a markdown folder / CMS
-// / database query; the shape stays the same.
-export const DOCS: ReadonlyArray<DocEntry> = [
-  { slug: 'intro/getting-started', titleKey: 'docs.getting-started.title', bodyKey: 'docs.getting-started.body' },
-  { slug: 'guides/first-page',     titleKey: 'docs.first-page.title',      bodyKey: 'docs.first-page.body' },
-]
-
 // getStaticPaths returns `{ params: { slug: '<path>' } }` entries — the
 // framework substitutes each into `/docs/[...slug]` to enumerate the URLs
 // to pre-render. The captured slug is the raw `/`-joined path (NOT a string
 // array) so a single deep slug like 'intro/getting-started' renders one file.
 export const getStaticPaths = async (): Promise<Array<{ params: { slug: string } }>> =>
-  DOCS.map((d) => ({ params: { slug: d.slug } }))
+  (await getCollection(docs.name)).map((d) => ({ params: { slug: d.slug } }))
+
+// Loads THIS doc's entry at build time — frontmatter decoded against the
+// collection schema, body rendered to HTML (code fences highlighted
+// server-side). The [locale] mirror passes the URL locale instead.
+export const loader = async ({ params, locale }: {
+  readonly params: { readonly slug: string }
+  readonly locale?: string
+}): Promise<ContentEntry<Doc> | null> =>
+  await getEntry<Doc>(docs.name, params.slug, locale !== undefined ? { locale } : {})
 
-// Per-locale, per-doc <title>: reads the active locale + the captured slug
-// (both threaded in at SSG time) so each variant's head is localised.
+// Per-locale, per-doc <title> from the entry's frontmatter.
 export const meta = ({
   locale,
-  params,
+  loaderData,
 }: {
   locale: string
-  params: Readonly<Record<string, string>>
+  loaderData: ContentEntry<Doc> | null
 }): PageMeta => {
   const c = getCatalog(locale)
-  const doc = DOCS.find((d) => d.slug === params.slug)
   return {
-    title: doc ? c[doc.titleKey] : c['docs.notFound.title'],
+    title: loaderData?.data.title ?? c['docs.notFound.title'],
     description: c['meta.docs.description'],
   }
 }
@@ -59,8 +54,7 @@ const code = (chunks: ReactNode): ReactNode => <code>{chunks}</code>
 
 export default function DocPage(): ReactNode {
   const { slug } = useParams<{ slug: string }>()
-  const t = useTFn()
-  const doc = DOCS.find((d) => d.slug === slug)
+  const doc = useLoaderData<ContentEntry<Doc> | null>()
   if (!doc) {
     return (
       <article>
@@ -75,8 +69,8 @@ export default function DocPage(): ReactNode {
   }
   return (
     <article>
-      <h1>{t(doc.titleKey)}</h1>
-      <p>{t(doc.bodyKey)}</p>
+      <h1>{doc.data.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: doc.html ?? '' }} />
     </article>
   )
 }

package/templates/apps/frontend-docs/src/pages/page.test.tsx

@@ -10,15 +10,25 @@
 import { afterEach, describe, expect, test, vi } from 'vitest'
 import { act, createElement, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { setContentRoot } from '@voltro/content'
 import en from '../locales/en'
 import de from '../locales/de'
 
+// The link list comes from the docs CONTENT COLLECTION — real files.
+setContentRoot(join(dirname(fileURLToPath(import.meta.url)), '..', '..'))
+
 const catalogs: Record<string, Record<string, string>> = { en, de }
 let currentLocale = 'en'
 
 const fill = (msg: string, values?: Record<string, unknown>): string =>
   values ? msg.replace(/\{(\w+)\}/g, (_, k: string) => String(values[k] ?? `{${k}}`)) : msg
 
+vi.mock('@voltro/web', () => ({
+  useLoaderData: () => entriesByLocale[currentLocale] ?? entriesByLocale['en'],
+}))
+
 vi.mock('@voltro/i18n', () => ({
   // The locale catalogs call these at module top-level; identity mirrors the
   // real (compile-time-only) implementations so importing them doesn't throw.
@@ -32,7 +42,11 @@ vi.mock('@voltro/i18n', () => ({
     fill(catalogs[currentLocale]?.[id] ?? id, values),
 }))
 
-const { default: Index, meta, renderMode, interactive } = await import('./page')
+const { default: Index, meta, renderMode, interactive, loader } = await import('./page')
+const entriesByLocale: Record<string, Awaited<ReturnType<typeof loader>>> = {
+  en: await loader(),
+  de: await loader({ locale: 'de' }),
+}
 
 ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 
@@ -75,7 +89,7 @@ describe('index — localized render', () => {
   test('links to both doc pages with bare (en) URLs and English titles', () => {
     currentLocale = 'en'
     render(createElement(Index))
-    expect(hrefs()).toEqual(['/docs/intro/getting-started', '/docs/guides/first-page'])
+    expect(hrefs()).toEqual(['/docs/guides/first-page', '/docs/intro/getting-started'])
     expect(container.textContent).toContain('Getting started')
     expect(container.textContent).toContain('Your first page')
   })
@@ -83,7 +97,7 @@ describe('index — localized render', () => {
   test('prefixes the doc links with /de and shows German titles for locale de', () => {
     currentLocale = 'de'
     render(createElement(Index))
-    expect(hrefs()).toEqual(['/de/docs/intro/getting-started', '/de/docs/guides/first-page'])
+    expect(hrefs()).toEqual(['/de/docs/guides/first-page', '/de/docs/intro/getting-started'])
     expect(container.textContent).toContain('Erste Schritte')
     expect(container.textContent).toContain('Deine erste Seite')
   })

package/templates/apps/frontend-docs/src/pages/page.tsx

@@ -2,12 +2,17 @@
 // themselves live under `src/pages/docs/[...slug].tsx`.
 //
 // Bilingual (Strategy B): mounted at `/` (default locale) and mirrored at
-// `/de` by src/pages/[locale]/index.tsx. The links are locale-prefixed off
-// the active locale so /de's landing points at the /de docs.
+// `/de` by src/pages/[locale]/index.tsx. The link list comes from the `docs`
+// CONTENT COLLECTION — titles are the entries' frontmatter, per locale tree
+// (the /de mirror passes its locale into the loader), so a new .md file
+// appears here without touching this page.
 
 import type { ReactNode } from 'react'
 import type { PageMeta } from '@voltro/web'
+import { useLoaderData } from '@voltro/web'
+import { getCollection, type ContentEntry } from '@voltro/content'
 import { T, useLocale } from '@voltro/i18n'
+import { docs, type Doc } from '../collections/docs.collection'
 import { getCatalog, withLocalePrefix } from '../lib/locale'
 
 export const renderMode = 'static' as const
@@ -21,7 +26,11 @@ export const meta = ({ locale }: { locale: string }): PageMeta => {
   }
 }
 
+export const loader = async ({ locale }: { readonly locale?: string } = {}): Promise<ReadonlyArray<ContentEntry<Doc>>> =>
+  await getCollection<Doc>(docs.name, locale !== undefined ? { locale } : {})
+
 export default function Index(): ReactNode {
+  const entries = useLoaderData<ReadonlyArray<ContentEntry<Doc>>>()
   const locale = useLocale()
   return (
     <main>
@@ -29,16 +38,11 @@ export default function Index(): ReactNode {
         <T id="home.title" values={{ project: '{{capProjectName}}' }} />
       </h1>
       <ul>
-        <li>
-          <a href={withLocalePrefix('/docs/intro/getting-started', locale)}>
-            <T id="docs.getting-started.title" />
-          </a>
-        </li>
-        <li>
-          <a href={withLocalePrefix('/docs/guides/first-page', locale)}>
-            <T id="docs.first-page.title" />
-          </a>
-        </li>
+        {entries.map((doc) => (
+          <li key={doc.slug}>
+            <a href={withLocalePrefix(`/docs/${doc.slug}`, locale)}>{doc.data.title}</a>
+          </li>
+        ))}
       </ul>
     </main>
   )

package/templates/apps/frontend-i18n/package.json

@@ -12,16 +12,16 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-landing/package.json

@@ -12,16 +12,16 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-portal/package.json

@@ -12,18 +12,18 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.52.0",
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/ui-shadcn": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@{{projectName}}/api": "0.53.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/ui-shadcn": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-saas/package.json

@@ -12,18 +12,18 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.52.0",
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/ui-shadcn": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@{{projectName}}/api": "0.53.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/ui-shadcn": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-spa/package.json

@@ -12,17 +12,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/ui-shadcn": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/ui-shadcn": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-ssr/package.json

@@ -12,17 +12,17 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/ui-shadcn": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/ui-shadcn": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-ssr-api/package.json

@@ -12,18 +12,18 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.52.0",
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/ui-shadcn": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@{{projectName}}/api": "0.53.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/ui-shadcn": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-static-blog/content/posts/cms-to-ssg.md

@@ -0,0 +1,12 @@
+---
+title: From CMS to static pages with getStaticPaths
+date: 2025-02-03
+excerpt: Enumerate your content once; the build emits one pre-rendered page per entry.
+readingMinutes: 3
+---
+
+A dynamic route like `src/pages/blog/[slug].tsx` matches infinitely many URLs. To pre-render it statically, the build needs to know WHICH slugs exist — that is what `getStaticPaths` answers.
+
+In this template, `getStaticPaths` maps over the `posts` array in `src/content/posts.ts`. Point it at a CMS API, a database query, or a folder of markdown files instead, and the build will pre-render exactly those pages — the Next.js "static generation from a content source" pattern, with no extra config.
+
+URLs you do not enumerate simply are not built. If a page ALSO sets `renderMode = 'ssr' | 'isr'`, `voltro start` renders the un-enumerated ones on demand; a pure `'static'` page 404s for unknown slugs, which is exactly what you want for a fixed content set.

package/templates/apps/frontend-static-blog/content/posts/hello-static.md

@@ -0,0 +1,12 @@
+---
+title: Why this blog ships zero JavaScript
+date: 2025-01-15
+excerpt: Every page is pre-rendered at build time, so the browser downloads HTML and nothing else.
+readingMinutes: 3
+---
+
+This page was rendered ONCE, when you ran `voltro build`. The result is a flat `dist/blog/hello-static/index.html` that any CDN can serve in single-digit milliseconds.
+
+There is no server rendering per request, no React hydration on the list page, no rpc client on the wire. The list page even declares `interactive = 'none'`, which strips every `<script>` the framework would otherwise emit.
+
+When you DO need a sprinkle of interactivity — a reading-progress bar, a copy button, a comment box — you reach for an island instead of hydrating the whole tree. Read the next post for how that works.

package/templates/apps/frontend-static-blog/content/posts/islands-not-hydration.md

@@ -0,0 +1,14 @@
+---
+title: Islands: hydrate the 5% that moves
+date: 2025-01-22
+excerpt: A static page with one interactive widget should ship one widget of JavaScript — not the whole page.
+readingMinutes: 4
+---
+
+Look at the top of this page: a thin progress bar tracks how far you have scrolled. That bar is an ISLAND — a single component the framework hydrates inside otherwise-static HTML.
+
+This page declares `interactive = 'islands'`, so the framework renders the article once and only attaches React to the `island()`-wrapped component. The surrounding HTML has zero React lifecycle running.
+
+Each island picks WHEN it wakes up via a hydrate strategy: `load` (immediately), `idle`, `visible` (on scroll-into-view), or `interaction` (on first click). The progress bar uses `load` because it must track scrolling from the very first frame.
+
+The lesson: don't default to `islands` because it sounds fast. Use it when most of the page is static and only a few widgets move. A dashboard where everything is interactive wants `full` hydration instead.

package/templates/apps/frontend-static-blog/package.json

@@ -12,16 +12,18 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.52.0",
-    "@voltro/client": "0.52.0",
-    "@voltro/env": "0.52.0",
-    "@voltro/i18n": "0.52.0",
-    "@voltro/web": "0.52.0",
+    "@voltro/content": "0.53.0",
+    "effect": "^3.22.0",
+    "@voltro/cli": "0.53.0",
+    "@voltro/client": "0.53.0",
+    "@voltro/env": "0.53.0",
+    "@voltro/i18n": "0.53.0",
+    "@voltro/web": "0.53.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.52.0",
+    "@voltro/devtools": "0.53.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^30.0.0",

package/templates/apps/frontend-static-blog/src/collections/posts.collection.ts

@@ -0,0 +1,27 @@
+// The blog's content collection — content/posts/**/*.md through the
+// framework's content pipeline (@voltro/content). Frontmatter is
+// schema-checked at build time (a violation FAILS the build naming the file),
+// bodies render to HTML with syntax-highlighted code fences, and no markdown
+// engine ships to the browser: SSG reads the filesystem; SPA navigations
+// fetch the build-emitted JSON artifacts under /assets/content/posts/.
+//
+// Point a CMS/DB-backed site at @voltro/cms instead — files are versioned
+// DEVELOPER content, a CMS is editorial content.
+
+import { Schema } from 'effect'
+import { defineCollection } from '@voltro/content'
+
+export const posts = defineCollection({
+  name: 'posts',
+  directory: 'content/posts',
+  schema: Schema.Struct({
+    title: Schema.String,
+    /** ISO date, shown + used for ordering. */
+    date: Schema.String,
+    /** One-line summary — feeds the list + `<meta name="description">`. */
+    excerpt: Schema.String,
+    readingMinutes: Schema.Union(Schema.NumberFromString, Schema.Number),
+  }),
+})
+
+export type Post = Schema.Schema.Type<typeof posts.schema>

package/templates/apps/frontend-static-blog/src/pages/[locale]/blog/[slug]/page.tsx

@@ -7,14 +7,17 @@
 // once per non-default locale). `voltro build` produces one HTML file per
 // pair, e.g. /de/blog/hello-static.
 import { SUPPORTED_LOCALES, DEFAULT_LOCALE } from '../../../../lib/locale'
-import { posts } from '../../../../content/posts'
+import { getCollection } from '@voltro/content'
+import { posts } from '../../../../collections/posts.collection'
 
 export { default } from '../../../blog/[slug]/page'
 export { renderMode, interactive, loader, meta } from '../../../blog/[slug]/page'
 
 export const getStaticPaths = async (): Promise<
   Array<{ params: { locale: string; slug: string } }>
-> =>
-  SUPPORTED_LOCALES
+> => {
+  const entries = await getCollection(posts.name)
+  return SUPPORTED_LOCALES
     .filter((l) => l !== DEFAULT_LOCALE)
-    .flatMap((locale) => posts.map((post) => ({ params: { locale, slug: post.slug } })))
+    .flatMap((locale) => entries.map((post) => ({ params: { locale, slug: post.slug } })))
+}

package/templates/apps/frontend-static-blog/src/pages/[locale]/mirrors.test.tsx

@@ -8,7 +8,13 @@
 
 import { describe, expect, test, vi } from 'vitest'
 import type { ComponentType } from 'react'
-import { posts } from '../../content/posts'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { setContentRoot, getCollection } from '@voltro/content'
+import { posts as postsCollection } from '../../collections/posts.collection'
+
+setContentRoot(join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..'))
+const posts = await getCollection(postsCollection.name)
 
 // The mirrors transitively import the base pages, which import @voltro/web
 // (island / loader / notFound / useLocation via lib/locale) and @voltro/i18n.

package/templates/apps/frontend-static-blog/src/pages/blog/[slug]/page.test.tsx

@@ -10,10 +10,16 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { act, createElement, type ComponentType, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { posts, type Post } from '../../../content/posts'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { setContentRoot, getCollection, type ContentEntry } from '@voltro/content'
+import { posts as postsCollection, type Post } from '../../../collections/posts.collection'
 import en from '../../../locales/en'
 
-const loaderData = vi.fn<() => Post>()
+// Real content: the collection reads this app's content/posts/*.md.
+setContentRoot(join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..', '..'))
+
+const loaderData = vi.fn<() => ContentEntry<Post>>()
 
 const fill = (msg: string, values?: Record<string, unknown>): string =>
   values ? msg.replace(/\{(\w+)\}/g, (_, k: string) => String(values[k] ?? `{${k}}`)) : msg
@@ -48,6 +54,7 @@ vi.mock('@voltro/i18n', () => ({
 }))
 
 const { default: BlogPost, getStaticPaths, loader, meta } = await import('./page')
+const posts = await getCollection<Post>(postsCollection.name)
 
 ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 
@@ -76,6 +83,7 @@ afterEach(() => {
 describe('blog [slug] — getStaticPaths', () => {
   test('enumerates one path per post', async () => {
     const paths = await getStaticPaths()
+    expect(posts.length).toBeGreaterThan(0)
     expect(paths.map((p) => p.params.slug)).toEqual(posts.map((p) => p.slug))
   })
 })
@@ -84,7 +92,9 @@ describe('blog [slug] — loader', () => {
   test('returns the matching post for a known slug', async () => {
     const post = await loader({ params: { slug: 'hello-static' } } as never)
     expect(post.slug).toBe('hello-static')
-    expect(post.title).toContain('zero JavaScript')
+    expect(post.data.title).toContain('zero JavaScript')
+    // The loader returns RENDERED html — the component never sees markdown.
+    expect(post.html).toContain('<p>')
   })
 
   test('throws notFound for an unknown slug', async () => {
@@ -98,8 +108,8 @@ describe('blog [slug] — meta', () => {
   test('builds a per-post title + description from the loader data', () => {
     const post = posts[0]!
     const m = meta({ loaderData: post })
-    expect(m.title).toContain(post.title)
-    expect(m.description).toBe(post.excerpt)
+    expect(m.title).toContain(post.data.title)
+    expect(m.description).toBe(post.data.excerpt)
   })
 })
 
@@ -108,9 +118,9 @@ describe('blog [slug] — render', () => {
     const post = posts[1]!
     loaderData.mockReturnValue(post)
     render(createElement(BlogPost))
-    expect(container.querySelector('article h1')?.textContent).toBe(post.title)
-    expect(container.textContent).toContain(`${post.readingMinutes} min read`)
-    const paras = post.body.split('\n\n')
-    expect(container.querySelectorAll('article p').length).toBeGreaterThanOrEqual(paras.length)
+    expect(container.querySelector('article h1')?.textContent).toBe(post.data.title)
+    expect(container.textContent).toContain(`${post.data.readingMinutes} min read`)
+    // The body arrives as rendered html paragraphs.
+    expect(container.querySelectorAll('article div p').length).toBeGreaterThanOrEqual(2)
   })
 })