Project Structure

Content, Vite config, and SSG entry are separated so the integration path stays obvious: collections → virtual imports in site.ts → entry-server.ts → renderDocumentShell → disk.

Directory overview

1examples/frameworks/with-svelte/2  content/3    guide/             How this example is wired, including `kitchen-sink.md`4    pages/             Standalone pages (about)5  public/6    favicon.svg7  src/8    components/        Layout pieces (header, bodies, nav)9    App.svelte         Route-level layout; sidebar dialog only (no Pagefind modal)10    entry-server.ts    getRoutes + render → HTML string11    site.ts            virtual:content imports, nav, types12    runtime.ts         Browser-only behavior (not Svelte)13    theme.css14  client.js            Vite client entry (CSS + core content runtime + runtime.ts)15  content.config.ts    defineCollection / defineCollections16  vite.config.ts17  package.json18  llms.txt             Agent-oriented summary of this example

Key files

src/site.ts

Single place that imports virtual:content/*, sorts entries, builds nav structures, and exports helpers (routeFor, groupBySeries, …). Keeps entry-server.ts thin.

src/App.svelte

Root layout router (pageKind). Renders the mobile navigation dialog. Search trigger only lives in SiteHeader.svelte; the Pagefind modal comes from renderDocumentShell when search is enabled.

src/entry-server.ts

Maps url + SsgRenderConfig to props, calls render from svelte/server, then renderDocumentShell({ …, bodyHtml, searchEnabled }).

client.js and src/runtime.ts

client.js is the Vite multi-page client entry. runtime.ts holds example-specific DOM code; it intentionally does not implement global search shortcuts (Pagefind does).