Project Structure

Layout matches other Pagesmith examples (content/, public/, src/) but rendering uses @pagesmith/site JSX + createContentLayer instead of a framework app shell.

Directory overview

1examples/blog-site/2  llms.txt             Agent-oriented notes for this example (repo-local)3  content/4    guide/             How this example works, including `kitchen-sink.md`5    pages/             Standalone pages (about)6  public/7    favicon.svg        Static assets copied to output root8  src/9    content.ts         Content layer setup, collection definitions, helpers10    components.tsx     JSX components: sidebar, header, footer, page body, document shell11    entry-server.tsx   SSR entry: routing, getRoutes/render contract12    runtime.ts         Client JS (TOC, sidebar, theme, search affordances)13    theme.css          Imports @pagesmith/site/css/standalone + example-specific layout rules14  client.js            Client entry: imports theme.css + runtime.ts15  vite.config.ts       Vite + pagesmithSsg (no pagesmithContent)16  package.json17  tsconfig.json

Differences vs framework examples

No `content.config.ts` at the example root

Collections are declared in src/content.ts alongside createContentLayer, keeping content concerns separate from routing.

No `virtual:content/*` imports

Use await layer.getCollection('guide') (and similar), then await entry.render() for HTML.

Site JSX runtime

TSX uses @pagesmith/site as JSX import source. Prefer DOM attribute names (class, for); inject rendered Markdown with innerHTML={html} on a wrapper inside the article shell.

1// React: <div className="prose" dangerouslySetInnerHTML={{ __html: html }} />2// Core:  <div class="prose" innerHTML={html} />

Single CSS entry

src/theme.css imports @pagesmith/site/css/standalone for the shared shell, prose, and code chrome, then layers the example’s own layout rules on top.