@pagenary/publisher 2026.5.0

package/site/sections/api.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"api-reference\">API Reference</h1>\n<p>Complete reference for Pagenary Publisher modules and functions.</p>\n<h2 id=\"core-modules\">Core Modules</h2>\n<h3 id=\"appjs-shell-controller\">app.js - Shell Controller</h3>\n<p>Main application controller handling routing, navigation, and UI state.</p>\n<h4 id=\"functions\">Functions</h4>\n<p><strong>`navigate(id: string): void`</strong></p>\n<p>Navigate to a section by ID.</p>\n<pre><code class=\"language-javascript\">navigate(&#39;guides/getting-started&#39;);\n// Updates hash to #/guides/getting-started and renders section</code></pre>\n<p><strong>`handleRoute(): Promise&lt;void&gt;`</strong></p>\n<p>Process current URL hash and render corresponding section.</p>\n<p><strong>`loadSection(entry: SectionEntry): Promise&lt;void&gt;`</strong></p>\n<p>Load and render a section from the manifest.</p>\n<pre><code class=\"language-javascript\">const section = findSection(&#39;welcome&#39;);\nawait loadSection(section);</code></pre>\n<p><strong>`updateNavState(activeId: string): void`</strong></p>\n<p>Update navigation UI to reflect active section.</p>\n<p><strong>`openCommandPalette(): void`</strong></p>\n<p>Open the command palette (search interface).</p>\n<p><strong>`closeCommandPalette(): void`</strong></p>\n<p>Close the command palette.</p>\n<hr>\n<h3 id=\"manifestjs-navigation-registry\">manifest.js - Navigation Registry</h3>\n<p>Defines navigation structure and section metadata.</p>\n<h4 id=\"exports\">Exports</h4>\n<p><strong>`MANIFEST: SectionEntry[]`</strong></p>\n<p>Ordered array of sections defining navigation.</p>\n<pre><code class=\"language-javascript\">export const MANIFEST = [\n  {\n    id: &#39;welcome&#39;,\n    title: &#39;Welcome&#39;,\n    summary: &#39;Introduction&#39;,\n    module: &#39;./sections/welcome.js&#39;\n  },\n  {\n    id: &#39;guides&#39;,\n    title: &#39;Guides&#39;,\n    subsections: [\n      { id: &#39;guides/setup&#39;, title: &#39;Setup&#39;, module: &#39;./sections/guides--setup.js&#39; }\n    ]\n  }\n];</code></pre>\n<p><strong>`DEFAULT_SECTION: string`</strong></p>\n<p>ID of the default section (first in manifest).</p>\n<p><strong>`SITE_CONFIG: SiteConfig`</strong></p>\n<p>Site configuration from build.</p>\n<pre><code class=\"language-javascript\">export const SITE_CONFIG = {\n  title: &#39;My Docs&#39;,\n  description: &#39;Documentation for My Product&#39;,\n  brandMark: &#39;MY&#39;,\n  brandSub: &#39;DOCS&#39;\n};</code></pre>\n<p><strong>`findSection(id: string): SectionEntry | undefined`</strong></p>\n<p>Look up a section by ID.</p>\n<pre><code class=\"language-javascript\">const section = findSection(&#39;guides/setup&#39;);\n// Returns { id: &#39;guides/setup&#39;, title: &#39;Setup&#39;, ... }</code></pre>\n<p><strong>`getAdjacentSections(id: string): { prev?: SectionEntry, next?: SectionEntry }`</strong></p>\n<p>Get previous and next sections for navigation.</p>\n<hr>\n<h3 id=\"seojs-metadata-helper\">seo.js - Metadata Helper</h3>\n<p>Manages document metadata for SEO.</p>\n<h4 id=\"functions-2\">Functions</h4>\n<p><strong>`updateMetaTags({ title: string, description?: string }): void`</strong></p>\n<p>Update document title and meta description.</p>\n<pre><code class=\"language-javascript\">updateMetaTags({\n  title: &#39;Getting Started - My Docs&#39;,\n  description: &#39;Learn how to get started with My Product&#39;\n});</code></pre>\n<hr>\n<h2 id=\"library-modules\">Library Modules</h2>\n<h3 id=\"libsearchjs-full-text-search\">lib/search.js - Full-Text Search</h3>\n<p>Search functionality with lazy content indexing.</p>\n<h4 id=\"functions-3\">Functions</h4>\n<p><strong>`escapeRegExp(value: string): string`</strong></p>\n<p>Escape special regex characters.</p>\n<pre><code class=\"language-javascript\">escapeRegExp(&#39;foo.bar&#39;); // &#39;foo\\\\.bar&#39;</code></pre>\n<p><strong>`flattenManifest(manifest: SectionEntry[]): FlatSection[]`</strong></p>\n<p>Flatten nested manifest into searchable sections.</p>\n<pre><code class=\"language-javascript\">const flat = flattenManifest(MANIFEST);\n// Returns all navigable sections with group info</code></pre>\n<p><strong>`buildSearchIndex(manifest: SectionEntry[]): Promise&lt;IndexedSection[]&gt;`</strong></p>\n<p>Build search index by loading all section modules. Cached after first call.</p>\n<pre><code class=\"language-javascript\">const index = await buildSearchIndex(MANIFEST);\n// Each entry has searchContent: lowercase text for matching</code></pre>\n<p><strong>`filterSections(manifest: SectionEntry[], query: string): FlatSection[]`</strong></p>\n<p>Synchronous title/summary search (no content).</p>\n<pre><code class=\"language-javascript\">const results = filterSections(MANIFEST, &#39;setup&#39;);</code></pre>\n<p><strong>`searchContent(manifest: SectionEntry[], query: string): Promise&lt;IndexedSection[]&gt;`</strong></p>\n<p>Full-text search across all content.</p>\n<pre><code class=\"language-javascript\">const results = await searchContent(MANIFEST, &#39;authentication&#39;);\n// Searches titles, summaries, and full content</code></pre>\n<p><strong>`findPreferredIndex(entries: Section[], currentId: string): number`</strong></p>\n<p>Find index of current section in filtered results.</p>\n<hr>\n<h3 id=\"librouterjs-hash-routing\">lib/router.js - Hash Routing</h3>\n<p>URL hash parsing and resolution.</p>\n<h4 id=\"functions-4\">Functions</h4>\n<p><strong>`resolveTarget(hash: string): string`</strong></p>\n<p>Extract section ID from URL hash.</p>\n<pre><code class=\"language-javascript\">resolveTarget(&#39;#/guides/setup&#39;); // &#39;guides/setup&#39;\nresolveTarget(&#39;#&#39;); // &#39;&#39; (empty)</code></pre>\n<p><strong>`resolveEntry(entry: SectionEntry): SectionEntry`</strong></p>\n<p>Resolve a section entry, following redirects if needed.</p>\n<hr>\n<h3 id=\"libexportjs-document-export\">lib/export.js - Document Export</h3>\n<p>Compose sections into exportable HTML documents.</p>\n<h4 id=\"functions-5\">Functions</h4>\n<p><strong>`composeExportDocument(chapters: Chapter[]): string`</strong></p>\n<p>Generate complete HTML document from chapters.</p>\n<pre><code class=\"language-javascript\">const html = composeExportDocument([\n  { section: { title: &#39;Welcome&#39; }, html: &#39;&lt;p&gt;Hello&lt;/p&gt;&#39; },\n  { section: { title: &#39;Setup&#39; }, html: &#39;&lt;p&gt;Install...&lt;/p&gt;&#39; }\n]);\n// Returns complete HTML with TOC, styles, syntax highlighting</code></pre>\n<p><strong>`collectExportableSections(manifest: SectionEntry[]): SectionEntry[]`</strong></p>\n<p>Get all sections that can be exported (have module paths).</p>\n<pre><code class=\"language-javascript\">const sections = collectExportableSections(MANIFEST);</code></pre>\n<hr>\n<h2 id=\"enhancement-modules\">Enhancement Modules</h2>\n<h3 id=\"mermaid-initjs-diagram-rendering\">mermaid-init.js - Diagram Rendering</h3>\n<p>Lazy-load and render Mermaid diagrams.</p>\n<h4 id=\"functions-6\">Functions</h4>\n<p><strong>`renderMermaidBlocks(container: Element): Promise&lt;void&gt;`</strong></p>\n<p>Find and render all Mermaid code blocks in a container.</p>\n<pre><code class=\"language-javascript\">await renderMermaidBlocks(document.querySelector(&#39;.canvas&#39;));\n// Replaces ```mermaid blocks with rendered SVGs</code></pre>\n<hr>\n<h3 id=\"syntax-highlightjs-code-highlighting\">syntax-highlight.js - Code Highlighting</h3>\n<p>Lazy-load and apply Prism.js syntax highlighting.</p>\n<h4 id=\"functions-7\">Functions</h4>\n<p><strong>`highlightCodeBlocks(container: Element): Promise&lt;void&gt;`</strong></p>\n<p>Highlight all code blocks in a container.</p>\n<pre><code class=\"language-javascript\">await highlightCodeBlocks(document.querySelector(&#39;.canvas&#39;));\n// Applies syntax highlighting to all &lt;code&gt; elements</code></pre>\n<p>Supported languages: JavaScript, TypeScript, Python, Rust, Go, C, JSON, YAML, Bash, SQL, Solidity.</p>\n<hr>\n<h2 id=\"section-module-contract\">Section Module Contract</h2>\n<p>All section modules must export a `load` function:</p>\n<pre><code class=\"language-javascript\">/**\n * Load section content.\n * @returns {Promise&lt;{ html: string, afterRender?: (container: Element) =&gt; void }&gt;}\n */\nexport async function load() {\n  return {\n    html: &#39;&lt;section class=&quot;section doc&quot;&gt;...&lt;/section&gt;&#39;,\n\n    // Optional: called after HTML is inserted into DOM\n    afterRender(container) {\n      // DOM manipulation, event listeners, etc.\n    }\n  };\n}</code></pre>\n<h3 id=\"examples\">Examples</h3>\n<p><strong>Static Content:</strong></p>\n<pre><code class=\"language-javascript\">export async function load() {\n  return {\n    html: `\n      &lt;section class=&quot;section doc markdown&quot;&gt;\n        &lt;div class=&quot;doc-content&quot;&gt;\n          &lt;h1&gt;Welcome&lt;/h1&gt;\n          &lt;p&gt;Hello, world!&lt;/p&gt;\n        &lt;/div&gt;\n      &lt;/section&gt;\n    `\n  };\n}</code></pre>\n<p><strong>Dynamic Content:</strong></p>\n<pre><code class=\"language-javascript\">export async function load() {\n  const data = await fetch(&#39;/api/stats.json&#39;).then(r =&gt; r.json());\n\n  return {\n    html: `\n      &lt;section class=&quot;section doc&quot;&gt;\n        &lt;h1&gt;Stats&lt;/h1&gt;\n        &lt;p&gt;Count: ${data.count}&lt;/p&gt;\n      &lt;/section&gt;\n    `,\n    afterRender(container) {\n      container.querySelector(&#39;button&#39;)?.addEventListener(&#39;click&#39;, refresh);\n    }\n  };\n}</code></pre>\n<hr>\n<h2 id=\"type-definitions\">Type Definitions</h2>\n<pre><code class=\"language-typescript\">interface SectionEntry {\n  id: string;\n  title: string;\n  summary?: string;\n  module?: string;\n  subsections?: SectionEntry[];\n  exclude?: boolean;\n}\n\ninterface FlatSection extends SectionEntry {\n  group?: string;  // Parent group title\n}\n\ninterface IndexedSection extends FlatSection {\n  searchContent: string;  // Lowercase text for searching\n}\n\ninterface SiteConfig {\n  title: string;\n  description?: string;\n  brandMark?: string;\n  brandSub?: string;\n  tagline?: string;\n  copyright?: string;\n}\n\ninterface Chapter {\n  section: { title: string; summary?: string };\n  html: string;\n}</code></pre>\n<hr>\n<h2 id=\"build-scripts\">Build Scripts</h2>\n<h3 id=\"scriptsbuildjs\">scripts/build.js</h3>\n<p>Core build script for copying and minifying assets.</p>\n<pre><code class=\"language-bash\">node scripts/build.js [--dev]</code></pre>\n<p>Options:</p>\n<ul>\n<li>`--dev` - Skip minification</li>\n</ul>\n<h3 id=\"scriptsbuild-tenantsjs\">scripts/build-tenants.js</h3>\n<p>Multi-tenant build orchestrator.</p>\n<pre><code class=\"language-bash\">node scripts/build-tenants.js [tenant-id] [--incremental]</code></pre>\n<p>Arguments:</p>\n<ul>\n<li>`tenant-id` - Build specific tenant (omit for all)</li>\n<li>`--incremental` - Only rebuild changed files</li>\n</ul>\n<h3 id=\"scriptsservejs\">scripts/serve.js</h3>\n<p>Development server.</p>\n<pre><code class=\"language-bash\">node scripts/serve.js [--port=5173]</code></pre>\n<h3 id=\"scriptssync-docsjs\">scripts/sync-docs.js</h3>\n<p>Regenerate section template modules.</p>\n<pre><code class=\"language-bash\">node scripts/sync-docs.js</code></pre>\n  </div>\n</section>" };
+}

package/site/sections/architecture.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"pagenary-architecture\">Pagenary Architecture</h1>\n<p>A minimalist multi-tenant documentation platform built around static assets and client-side rendering.</p>\n<h2 id=\"design-principles\">Design Principles</h2>\n<ul>\n<li><strong>Zero Runtime Dependencies</strong> - Vanilla HTML, CSS, and ES modules keep the footprint tiny</li>\n<li><strong>Static-First</strong> - Hash-based routing (`#/page-id`) works on any static host</li>\n<li><strong>Multi-Tenant Isolation</strong> - Each tenant gets isolated content, branding, and configuration</li>\n<li><strong>Progressive Enhancement</strong> - Core content works without JavaScript; features enhance with it</li>\n</ul>\n<h2 id=\"system-overview\">System Overview</h2>\n<pre><code>┌─────────────────────────────────────────────────────────────┐\n│                      Build System                           │\n│  ┌──────────┐  ┌──────────────┐  ┌───────────────────────┐ │\n│  │ Tenant   │  │ Content      │  │ Asset Pipeline        │ │\n│  │ Registry │──│ Processor    │──│ (Minify, Copy, Brand) │ │\n│  └──────────┘  └──────────────┘  └───────────────────────┘ │\n└─────────────────────────────────────────────────────────────┘\n                           │\n                           ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    Static Bundle (dist/)                    │\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌────────────┐  │\n│  │index.html│  │ app.js   │  │styles.css│  │ sections/  │  │\n│  └──────────┘  └──────────┘  └──────────┘  └────────────┘  │\n└─────────────────────────────────────────────────────────────┘\n                           │\n                           ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    Runtime (Browser)                        │\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌────────────┐  │\n│  │ Router   │  │ Search   │  │ Renderer │  │ Export     │  │\n│  └──────────┘  └──────────┘  └──────────┘  └────────────┘  │\n└─────────────────────────────────────────────────────────────┘</code></pre>\n<h2 id=\"build-system\">Build System</h2>\n<h3 id=\"tenant-registry\">Tenant Registry</h3>\n<p>`tenants.json` maps tenant IDs to content sources:</p>\n<pre><code class=\"language-json\">{\n  &quot;tenant-id&quot;: {\n    &quot;source&quot;: &quot;/path/or/git:url#branch&quot;,\n    &quot;domain&quot;: &quot;docs.example.com&quot;\n  }\n}</code></pre>\n<p>Supports local paths and git repositories. Git sources are cloned to a cache directory.</p>\n<h3 id=\"content-processor\">Content Processor</h3>\n<p>Transforms source content into section modules:</p>\n<table><thead><tr><th style=\"text-align: left\">Input</th><th style=\"text-align: left\">Processing</th><th style=\"text-align: left\">Output</th></tr></thead><tbody><tr><td style=\"text-align: left\">`.md`</td><td style=\"text-align: left\">Parse Markdown → HTML</td><td style=\"text-align: left\">ES module with `load()`</td></tr><tr><td style=\"text-align: left\">`.html`</td><td style=\"text-align: left\">Wrap in loader</td><td style=\"text-align: left\">ES module with `load()`</td></tr><tr><td style=\"text-align: left\">`.js`</td><td style=\"text-align: left\">Copy unchanged</td><td style=\"text-align: left\">ES module with `load()`</td></tr></tbody></table>\n<h3 id=\"asset-pipeline\">Asset Pipeline</h3>\n<p>1. <strong>Copy</strong> - Static assets from `src/` to `dist/`</p>\n<p>2. <strong>Minify</strong> - JavaScript via Terser (production)</p>\n<p>3. <strong>Brand</strong> - Apply tenant config (colors, text)</p>\n<p>4. <strong>Override</strong> - Replace files from `overrides/`</p>\n<h2 id=\"runtime-architecture\">Runtime Architecture</h2>\n<h3 id=\"shell-layout\">Shell Layout</h3>\n<pre><code>┌─────────────────────────────────────────────────────────┐\n│ Top Bar: Menu Toggle │ Brand │ Command Palette │ Export │\n├───────────────┬─────────────────────────────────────────┤\n│               │                                         │\n│   Sidebar     │              Canvas                     │\n│   (Nav)       │           (Content)                     │\n│               │                                         │\n├───────────────┴─────────────────────────────────────────┤\n│                     Footer                              │\n└─────────────────────────────────────────────────────────┘</code></pre>\n<h3 id=\"module-structure\">Module Structure</h3>\n<pre><code>src/\n├── index.html          # Shell template\n├── app.js              # Core controller\n├── styles.css          # All styling\n├── manifest.js         # Navigation registry\n├── seo.js              # Meta tag management\n├── mermaid-init.js     # Diagram rendering\n├── syntax-highlight.js # Code highlighting\n└── lib/\n    ├── search.js       # Full-text search\n    ├── router.js       # Hash routing utilities\n    └── export.js       # Document export</code></pre>\n<h3 id=\"core-flow\">Core Flow</h3>\n<pre><code>Hash Change → Router → Manifest Lookup → Module Import → Render → Post-Process\n                                              │\n                                              ├── Mermaid Diagrams\n                                              ├── Syntax Highlighting\n                                              └── SEO Meta Tags</code></pre>\n<h2 id=\"key-components\">Key Components</h2>\n<h3 id=\"router-appjs\">Router (app.js)</h3>\n<p>Hash-based navigation with history support:</p>\n<pre><code class=\"language-javascript\">// URL: https://docs.example.com/#/guides/setup\n// Resolves to section ID: &quot;guides/setup&quot;\n\nwindow.addEventListener(&#39;hashchange&#39;, handleRoute);\n\nfunction handleRoute() {\n  const id = resolveTarget(location.hash);\n  const section = findSection(id);\n  await loadSection(section);\n}</code></pre>\n<h3 id=\"search-libsearchjs\">Search (lib/search.js)</h3>\n<p>Full-text search with lazy indexing:</p>\n<pre><code class=\"language-javascript\">// First search: load all modules, extract text, build index\n// Subsequent: search cached index\n\nasync function buildSearchIndex(manifest) {\n  const sections = flattenManifest(manifest);\n  return Promise.all(sections.map(async (section) =&gt; {\n    const mod = await import(section.module);\n    const { html } = await mod.load();\n    return { ...section, searchContent: extractText(html) };\n  }));\n}</code></pre>\n<h3 id=\"mermaid-integration-mermaid-initjs\">Mermaid Integration (mermaid-init.js)</h3>\n<p>Lazy-loaded diagram rendering:</p>\n<pre><code class=\"language-javascript\">export async function renderMermaidBlocks(container) {\n  const blocks = container.querySelectorAll(&#39;pre &gt; code.language-mermaid&#39;);\n  if (!blocks.length) return;\n\n  const mermaid = await import(&#39;https://esm.sh/mermaid@11&#39;);\n  mermaid.default.initialize({ startOnLoad: false });\n\n  for (const block of blocks) {\n    const { svg } = await mermaid.default.render(id, block.textContent);\n    // Replace code block with rendered SVG\n  }\n}</code></pre>\n<h3 id=\"syntax-highlighting-syntax-highlightjs\">Syntax Highlighting (syntax-highlight.js)</h3>\n<p>Prism.js integration with language auto-detection:</p>\n<pre><code class=\"language-javascript\">export async function highlightCodeBlocks(container) {\n  const blocks = container.querySelectorAll(&#39;pre &gt; code[class*=&quot;language-&quot;]&#39;);\n  if (!blocks.length) return;\n\n  const Prism = await import(&#39;https://esm.sh/prismjs@1.29.0&#39;);\n  // Load language modules dynamically\n  Prism.highlightAllUnder(container);\n}</code></pre>\n<h3 id=\"export-libexportjs\">Export (lib/export.js)</h3>\n<p>Document composition for print/PDF:</p>\n<pre><code class=\"language-javascript\">export function composeExportDocument(chapters) {\n  // Generate TOC\n  const toc = chapters.map((ch, i) =&gt; `&lt;li&gt;${i+1}. ${ch.title}&lt;/li&gt;`);\n\n  // Compose sections\n  const body = chapters.map((ch, i) =&gt; `\n    &lt;section&gt;\n      &lt;h2&gt;${i+1}. ${ch.title}&lt;/h2&gt;\n      ${ch.html}\n    &lt;/section&gt;\n  `);\n\n  return `&lt;!doctype html&gt;...${toc}...${body}...`;\n}</code></pre>\n<h2 id=\"multi-tenant-architecture\">Multi-Tenant Architecture</h2>\n<h3 id=\"build-time-isolation\">Build-Time Isolation</h3>\n<p>Each tenant build produces an isolated bundle:</p>\n<pre><code>dist/\n├── tenant-a/\n│   ├── index.html      # Branded shell\n│   ├── manifest.js     # Tenant navigation\n│   ├── styles.css      # Themed styles\n│   └── sections/       # Tenant content\n└── tenant-b/\n    └── ...             # Completely separate</code></pre>\n<h3 id=\"runtime-isolation\">Runtime Isolation</h3>\n<ul>\n<li>No shared state between tenants</li>\n<li>Each tenant loads its own manifest</li>\n<li>Theming via CSS variables replaced at build time</li>\n</ul>\n<h3 id=\"caddy-routing\">Caddy Routing</h3>\n<p>Multi-tenant domain routing via Caddy:</p>\n<pre><code>tenant-a.example.com → dist/tenant-a/\ntenant-b.example.com → dist/tenant-b/</code></pre>\n<h2 id=\"performance-characteristics\">Performance Characteristics</h2>\n<h3 id=\"bundle-size\">Bundle Size</h3>\n<table><thead><tr><th style=\"text-align: left\">Component</th><th style=\"text-align: left\">Size (minified)</th></tr></thead><tbody><tr><td style=\"text-align: left\">Shell (HTML/CSS/JS)</td><td style=\"text-align: left\">~50 KB</td></tr><tr><td style=\"text-align: left\">Per section</td><td style=\"text-align: left\">~1-5 KB</td></tr><tr><td style=\"text-align: left\">Mermaid (lazy)</td><td style=\"text-align: left\">~800 KB</td></tr><tr><td style=\"text-align: left\">Prism (lazy)</td><td style=\"text-align: left\">~30 KB</td></tr></tbody></table>\n<h3 id=\"loading-strategy\">Loading Strategy</h3>\n<p>1. <strong>Critical Path</strong> - Shell + manifest + first section</p>\n<p>2. <strong>Lazy Load</strong> - Other sections on navigation</p>\n<p>3. <strong>On-Demand</strong> - Mermaid/Prism when needed</p>\n<p>4. <strong>Cached</strong> - Search index after first search</p>\n<h2 id=\"extensibility-points\">Extensibility Points</h2>\n<h3 id=\"custom-page-types\">Custom Page Types</h3>\n<p>Add to `section-templates.js`:</p>\n<pre><code class=\"language-javascript\">export const templates = {\n  &#39;custom-type&#39;: {\n    render: (data) =&gt; `&lt;section class=&quot;custom&quot;&gt;...&lt;/section&gt;`\n  }\n};</code></pre>\n<h3 id=\"custom-components\">Custom Components</h3>\n<p>Use HTML classes in content:</p>\n<div class=\"html-block\"><div class=\"my-component\">...</div></div>\n<p>Add styles to tenant&#39;s `overrides/styles.css`.</p>\n<h3 id=\"dynamic-data\">Dynamic Data</h3>\n<p>JavaScript modules can fetch external data:</p>\n<pre><code class=\"language-javascript\">export async function load() {\n  const data = await fetch(&#39;/api/data.json&#39;).then(r =&gt; r.json());\n  return { html: renderWithData(data) };\n}</code></pre>\n<h2 id=\"security-considerations\">Security Considerations</h2>\n<ul>\n<li><strong>No Server-Side Code</strong> - Pure static assets</li>\n<li><strong>CSP Compatible</strong> - No inline scripts in content</li>\n<li><strong>Sandboxed Content</strong> - Each tenant in separate directory</li>\n<li><strong>No User Data</strong> - Only localStorage for UI state</li>\n</ul>\n  </div>\n</section>" };
+}

package/site/sections/deployment.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"deployment-guide\">Deployment Guide</h1>\n<p>Pagenary produces static files that can be served by any web server, CDN, or object storage.</p>\n<h2 id=\"quick-deploy\">Quick Deploy</h2>\n<pre><code class=\"language-bash\"># Build a tenant to a specific directory\nnode scripts/build-tenants.js my-tenant --target /var/www/docs\n\n# The output is ready to serve - no server setup required</code></pre>\n<h2 id=\"build-options\">Build Options</h2>\n<h3 id=\"custom-output-directory\">Custom Output Directory</h3>\n<pre><code class=\"language-bash\"># Override target for all tenants\nnode scripts/build-tenants.js --target /var/www/html\n\n# Build specific tenant to custom location\nnode scripts/build-tenants.js my-docs --target /opt/docs/my-docs</code></pre>\n<h3 id=\"build-from-git-repository\">Build from Git Repository</h3>\n<p>Configure a git source in your registry:</p>\n<pre><code class=\"language-json\">{\n  &quot;tenants&quot;: [\n    {\n      &quot;id&quot;: &quot;my-docs&quot;,\n      &quot;source&quot;: {\n        &quot;type&quot;: &quot;git&quot;,\n        &quot;url&quot;: &quot;https://github.com/org/my-docs.git&quot;,\n        &quot;ref&quot;: &quot;main&quot;,\n        &quot;path&quot;: &quot;docs/&quot;\n      },\n      &quot;target&quot;: {\n        &quot;type&quot;: &quot;local&quot;,\n        &quot;path&quot;: &quot;/var/www/my-docs&quot;\n      }\n    }\n  ]\n}</code></pre>\n<p>Then build:</p>\n<pre><code class=\"language-bash\">node scripts/build-tenants.js my-docs</code></pre>\n<h3 id=\"external-registry\">External Registry</h3>\n<p>Use a registry file from any location:</p>\n<pre><code class=\"language-bash\">node scripts/build-tenants.js --registry /etc/pagenary/tenants.json</code></pre>\n<p>Or via environment variable:</p>\n<pre><code class=\"language-bash\">TENANT_REGISTRY=/etc/pagenary/tenants.json node scripts/build-tenants.js</code></pre>\n<h3 id=\"git-authentication\">Git Authentication</h3>\n<p>For private repositories:</p>\n<pre><code class=\"language-bash\"># SSH key\nGIT_SSH_COMMAND=&quot;ssh -i ~/.ssh/deploy_key&quot; node scripts/build-tenants.js\n\n# HTTPS token\nGIT_CREDENTIALS=&quot;username:token&quot; node scripts/build-tenants.js\n\n# Disable interactive prompts (recommended for CI)\nGIT_TERMINAL_PROMPT=0 node scripts/build-tenants.js</code></pre>\n<h2 id=\"cicd-integration\">CI/CD Integration</h2>\n<h3 id=\"github-actions\">GitHub Actions</h3>\n<pre><code class=\"language-yaml\">name: Build Docs\non:\n  push:\n    branches: [main]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n\n      - uses: actions/setup-node@v4\n        with:\n          node-version: &#39;20&#39;\n\n      - run: npm ci\n\n      - name: Build documentation\n        run: node scripts/build-tenants.js my-docs --target ./output\n\n      - name: Upload artifact\n        uses: actions/upload-artifact@v4\n        with:\n          name: docs\n          path: output/</code></pre>\n<h3 id=\"gitlab-ci\">GitLab CI</h3>\n<pre><code class=\"language-yaml\">build-docs:\n  image: node:20\n  script:\n    - npm ci\n    - node scripts/build-tenants.js my-docs --target ./public\n  artifacts:\n    paths:\n      - public/</code></pre>\n<h3 id=\"incremental-builds\">Incremental Builds</h3>\n<p>For faster CI builds with git-based sources:</p>\n<pre><code class=\"language-bash\"># Only rebuild changed content\nnode scripts/build-tenants.js my-docs --incremental --keep-cache\n\n# Show what changed without building\nnode scripts/build-tenants.js my-docs --diff-only</code></pre>\n<h2 id=\"hosting-patterns\">Hosting Patterns</h2>\n<h3 id=\"static-file-servers\">Static File Servers</h3>\n<p>The build output is self-contained. Serve with any static server:</p>\n<pre><code class=\"language-bash\"># Python\npython -m http.server 8080 -d /var/www/my-docs\n\n# Node.js (npx)\nnpx serve /var/www/my-docs\n\n# Caddy\ncaddy file-server --root /var/www/my-docs --listen :8080</code></pre>\n<h3 id=\"nginx\">Nginx</h3>\n<pre><code class=\"language-nginx\">server {\n    listen 80;\n    server_name docs.example.com;\n    root /var/www/my-docs;\n\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    # Cache static assets\n    location ~* \\.(js|css|png|jpg|ico)$ {\n        expires 1y;\n        add_header Cache-Control &quot;public, immutable&quot;;\n    }\n}</code></pre>\n<h3 id=\"caddy\">Caddy</h3>\n<pre><code class=\"language-caddyfile\">docs.example.com {\n    root * /var/www/my-docs\n    file_server\n    try_files {path} /index.html\n\n    @static path *.js *.css *.png *.jpg *.ico\n    header @static Cache-Control &quot;public, max-age=31536000, immutable&quot;\n}</code></pre>\n<h3 id=\"s3-cloudfront\">S3 + CloudFront</h3>\n<p>1. Create S3 bucket with static website hosting</p>\n<p>2. Upload build output:</p>\n<pre><code class=\"language-bash\">   aws s3 sync /var/www/my-docs s3://my-docs-bucket/</code></pre>\n<p>3. Create CloudFront distribution pointing to S3</p>\n<p>4. Set default root object to `index.html`</p>\n<p>5. Configure error pages to return `index.html` for 404s (for hash routing)</p>\n<h3 id=\"netlify-vercel\">Netlify / Vercel</h3>\n<p>1. Point to your repository</p>\n<p>2. Build command: `node scripts/build-tenants.js my-docs --target ./dist`</p>\n<p>3. Publish directory: `dist/`</p>\n<h2 id=\"multi-tenant-deployment\">Multi-Tenant Deployment</h2>\n<h3 id=\"single-server-multiple-tenants\">Single Server, Multiple Tenants</h3>\n<p>Build all tenants to subdirectories:</p>\n<pre><code class=\"language-bash\">node scripts/build-tenants.js --target /var/www/docs\n# Creates /var/www/docs/tenant-a/, /var/www/docs/tenant-b/, etc.</code></pre>\n<p>Nginx config:</p>\n<pre><code class=\"language-nginx\">server {\n    listen 80;\n    root /var/www/docs;\n\n    location ~ ^/([^/]+)/ {\n        try_files $uri $uri/ /$1/index.html;\n    }\n}</code></pre>\n<h3 id=\"domain-based-routing\">Domain-Based Routing</h3>\n<p>Each tenant gets its own domain:</p>\n<pre><code class=\"language-caddyfile\">tenant-a.example.com {\n    root * /var/www/docs/tenant-a\n    file_server\n    try_files {path} /index.html\n}\n\ntenant-b.example.com {\n    root * /var/www/docs/tenant-b\n    file_server\n    try_files {path} /index.html\n}</code></pre>\n<h2 id=\"cache-strategy\">Cache Strategy</h2>\n<table><thead><tr><th style=\"text-align: left\">Asset</th><th style=\"text-align: left\">Cache Policy</th></tr></thead><tbody><tr><td style=\"text-align: left\">`index.html`</td><td style=\"text-align: left\">`no-cache` or short TTL (1 minute)</td></tr><tr><td style=\"text-align: left\">`<em>.js`, `</em>.css`</td><td style=\"text-align: left\">Long TTL with immutable (`max-age=31536000, immutable`)</td></tr><tr><td style=\"text-align: left\">`sections/*.js`</td><td style=\"text-align: left\">Long TTL (content-addressed)</td></tr></tbody></table>\n<p>The hash-based router means all navigation works client-side, so `index.html` is the only file that needs frequent updates.</p>\n<h2 id=\"monitoring\">Monitoring</h2>\n<h3 id=\"health-check\">Health Check</h3>\n<p>Create a simple health endpoint by checking for `index.html`:</p>\n<pre><code class=\"language-bash\">curl -f https://docs.example.com/ || exit 1</code></pre>\n<h3 id=\"build-verification\">Build Verification</h3>\n<p>After deployment, verify the build:</p>\n<pre><code class=\"language-bash\"># Check response\ncurl -I https://docs.example.com/\n\n# Verify content\ncurl -s https://docs.example.com/ | grep -q &quot;manifest.js&quot;</code></pre>\n  </div>\n</section>" };
+}

package/site/sections/developer-guide.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"developer-guide\">Developer Guide</h1>\n<p>Welcome to Pagenary Publisher. This workspace lives at `apps/publisher/` inside the Pagenary platform monorepo. Use the repo-level commands (e.g. `npm run publisher:*`) when you prefer not to `cd` into the workspace. This guide keeps onboarding fast so you can focus on tailoring tenant-specific copy rather than plumbing.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<ul>\n<li>Node.js 16+</li>\n<li>npm (ships with Node)</li>\n<li>Optional: a modern browser for local testing, and a static host account for deployment</li>\n</ul>\n<h2 id=\"install-run\">Install &amp; Run</h2>\n<pre><code class=\"language-bash\">npm install\nnpm run dev</code></pre>\n<p>The dev command builds to `dist/` and serves the bundle with live reload. Open the printed URL and start exploring.</p>\n<h2 id=\"project-tour\">Project Tour</h2>\n<ul>\n<li>`src/index.html` – HTML entry point with top-level shell structure</li>\n<li>`src/app.js` – navigation, routing, command palette, export logic</li>\n<li>`src/sections/section-templates.js` – template catalogue for every page type</li>\n<li>`src/manifest.js` – default navigation structure (overridden per tenant via `tenants/&lt;id&gt;/manifest.json`)</li>\n<li>`scripts/` – small Node utilities for building, serving, syncing sections, linting content, and checking SEO metadata</li>\n</ul>\n<h2 id=\"key-features\">Key Features</h2>\n<p>1. <strong>Mermaid Diagrams</strong> - Use fenced code blocks with `mermaid` language. Renders with zoom/pan controls and pan-on-drag functionality.</p>\n<p>2. <strong>External Links</strong> - Links to external URLs (http/https) automatically open in new tab with security attributes. Use `url` property in manifest for external nav links.</p>\n<p>3. <strong>Internal Linking</strong> - Link between sections with `#section-id` syntax. Build validates that all internal links reference existing sections.</p>\n<p>4. <strong>Bottom Navigation</strong> - Configurable via `bottomNav` in root manifest. Options: &quot;mobile&quot; (default), &quot;always&quot;, or &quot;never&quot;.</p>\n<p>5. <strong>Command Palette</strong> - Press Ctrl+K (or Cmd+K) to search and navigate sections. Supports fuzzy search across section titles and summaries.</p>\n<p>See TENANT-CONFIG.md for full configuration details and examples.</p>\n<h2 id=\"common-tasks\">Common Tasks</h2>\n<ul>\n<li><strong>Add a Section</strong> – create `src/sections/my-section.js`, set the `SECTION_ID`, update `manifest.js`.</li>\n<li><strong>Regenerate Templates</strong> – run `npm run sync:docs` to reset section boilerplate if you need a clean slate.</li>\n<li><strong>Branding</strong> – tweak the logo text and footer copy in `src/index.html`; adjust colors in `src/styles.css`.</li>\n<li><strong>Export Testing</strong> – open the app locally and use the Export button to confirm the combined PDF-ready document looks correct.</li>\n</ul>\n<h2 id=\"tenant-content-bundles\">Tenant Content Bundles</h2>\n<ul>\n<li>Each tenant folder supports a `manifest.json` describing nav groupings, titles, and the content file backing each section. Use nested `sections` arrays to create expandable groups.</li>\n<li>Supported content types live in `tenants/&lt;id&gt;/content/`:</li>\n<li>`.md` → converted to structured HTML (headings, lists, blockquotes supported by the lightweight parser).</li>\n<li>`.html` → shipped as-is, wrapped in a loader module.</li>\n<li>`.js` → copied unchanged; export a `load()` function that returns `{ html, afterRender? }` to drive rich experiences.</li>\n<li>Run `npm run build:tenants` after editing content. The script regenerates `dist/&lt;id&gt;/manifest.js` plus section modules so the navigation immediately reflects the manifest.</li>\n<li>Provide per-tenant overrides (styles, assets, app shell tweaks) inside `tenants/&lt;id&gt;/overrides/`; they copy into the tenant bundle after content generation, so you can replace generated files if needed.</li>\n</ul>\n<h2 id=\"tooling-philosophy\">Tooling Philosophy</h2>\n<ul>\n<li>Zero framework lock-in; replace `app.js` with your own router if you outgrow it.</li>\n<li>Scripts avoid third-party dependencies so they run in restricted environments.</li>\n<li>Everything is ASCII-only by default to ease diffs and downstream localization.</li>\n</ul>\n<h2 id=\"support-checklist\">Support Checklist</h2>\n<p>Before shipping to a tenant:</p>\n<p>1. Replace placeholder copy with real content.</p>\n<p>2. Verify navigation order and summaries in `manifest.js`.</p>\n<p>3. Run `npm run check` to ensure lint and SEO checks pass.</p>\n<p>4. Test export output and section highlighting.</p>\n  </div>\n</section>" };
+}

package/site/sections/extending.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"extending-docs-toolkit\">Extending Docs Toolkit</h1>\n<p>This project is meant to be forked or templated per reseller. Everything lives in vanilla modules, so extending it is a matter of editing a handful of files.</p>\n<h2 id=\"add-a-new-page-type\">Add a New Page Type</h2>\n<p>1. Update `section-templates.js` with a new category configuration (summary + render function).</p>\n<p>2. Create a section file in `src/sections/` that imports `renderSectionTemplate` and sets `SECTION_ID` to match the slug you want.</p>\n<p>3. Register the slug inside `src/manifest.js` under the appropriate group (or create a new group entry).</p>\n<p>Run `npm run sync:docs` to regenerate the boilerplate module if you want to reapply the standard wrapper.</p>\n<h2 id=\"override-styling\">Override Styling</h2>\n<ul>\n<li>Adjust global tokens and typographic scale in `src/styles.css`.</li>\n<li>Use existing utility classes (`doc-content`, `doc-grid`, etc.) when adding new markup blocks.</li>\n<li>Keep the high-contrast palette for accessibility unless brand guidelines state otherwise; test color contrast if you change it.</li>\n</ul>\n<h2 id=\"inject-dynamic-data\">Inject Dynamic Data</h2>\n<p>While the bundle is static, section modules can directly fetch remote JSON or call APIs. Recommended approach:</p>\n<pre><code class=\"language-js\">export async function load() {\n  const res = await fetch(&#39;https://api.example.com/tenant/metrics.json&#39;);\n  const metrics = await res.json();\n\n  return {\n    html: renderCustomTemplate(metrics)\n  };\n}</code></pre>\n<p>Keep requests idempotent and cache-friendly—most hosts allow short-lived fetches if end users need fresh stats.</p>\n<h2 id=\"internationalisation\">Internationalisation</h2>\n<ul>\n<li>Duplicate `manifest.js` with translated summaries or hydrate labels at runtime via a locale switcher.</li>\n<li>Wrap static strings in template helpers so copy updates stay centralized.</li>\n</ul>\n<h2 id=\"automation-ideas\">Automation Ideas</h2>\n<ul>\n<li>Add a content pipeline that transforms Markdown into HTML and swaps it into templates.</li>\n<li>Integrate accessibility scans (axe, pa11y) into CI alongside the provided lint/SEO scripts.</li>\n</ul>\n  </div>\n</section>" };
+}

package/site/sections/quickstart.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"quick-start-guide\">Quick Start Guide</h1>\n<p>Create your first Pagenary documentation site in 10 minutes.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<ul>\n<li>Node.js 18+</li>\n<li>Git (for version control)</li>\n</ul>\n<h2 id=\"step-1-set-up-the-publisher\">Step 1: Set Up the Publisher</h2>\n<pre><code class=\"language-bash\"># Clone the repository\ngit clone https://github.com/jmagly/dbbuilder.git pagenary\ncd pagenary\n\n# Install dependencies\nnpm run bootstrap\n\n# Verify installation\ncd apps/publisher\nnpm run build\nnpm run serve\n# Visit http://localhost:5173 to see the default docs</code></pre>\n<h2 id=\"key-features\">Key Features</h2>\n<p>Pagenary includes several powerful features out of the box:</p>\n<ul>\n<li><strong>Command Palette</strong> - Press `Ctrl+K` (or `Cmd+K` on Mac) to quickly navigate, search, and export</li>\n<li><strong>Mermaid Diagrams</strong> - Embed flowcharts, sequence diagrams, and more using Mermaid syntax</li>\n<li><strong>Smart External Links</strong> - External links automatically open in new tabs with security headers</li>\n</ul>\n<h2 id=\"step-2-create-your-tenant-directory\">Step 2: Create Your Tenant Directory</h2>\n<p>Create a new directory for your documentation (can be anywhere on your system):</p>\n<pre><code class=\"language-bash\">mkdir ~/my-docs\ncd ~/my-docs</code></pre>\n<p>Create the basic structure:</p>\n<pre><code class=\"language-bash\">mkdir content</code></pre>\n<h2 id=\"step-3-add-branding-configuration\">Step 3: Add Branding Configuration</h2>\n<p>Create `config.json`:</p>\n<pre><code class=\"language-json\">{\n  &quot;title&quot;: &quot;My Product Documentation&quot;,\n  &quot;description&quot;: &quot;Complete guide to using My Product&quot;,\n  &quot;brandMark&quot;: &quot;MY&quot;,\n  &quot;brandSub&quot;: &quot;PRODUCT&quot;,\n  &quot;tagline&quot;: &quot;Documentation that works&quot;,\n  &quot;copyright&quot;: &quot;My Company&quot;,\n  &quot;accentColor&quot;: &quot;#3B82F6&quot;,\n  &quot;surfaceColor&quot;: &quot;#F8FAFC&quot;\n}</code></pre>\n<h2 id=\"step-4-create-your-first-content\">Step 4: Create Your First Content</h2>\n<p>Create `content/welcome.md`:</p>\n<pre><code class=\"language-markdown\"># Welcome to My Product\n\nThis is your documentation home page.\n\n## Getting Started\n\nHere&#39;s what you need to know to get started with My Product.\n\n### Installation\n\n\\`\\`\\`bash\nnpm install my-product\n\\`\\`\\`\n\n### Quick Example\n\n\\`\\`\\`javascript\nimport { MyProduct } from &#39;my-product&#39;;\n\nconst app = new MyProduct();\napp.start();\n\\`\\`\\`\n\n## Features\n\n- **Fast** - Built for speed\n- **Simple** - Easy to use\n- **Powerful** - Full-featured\n\n## Architecture\n\n\\`\\`\\`mermaid\ngraph TD\n    A[User] --&gt; B[Frontend]\n    B --&gt; C[API]\n    C --&gt; D[Database]\n\\`\\`\\`</code></pre>\n<p>Create `content/installation.md`:</p>\n<pre><code class=\"language-markdown\"># Installation Guide\n\n## Requirements\n\n- Node.js 18 or higher\n- npm or yarn\n\n## Install via npm\n\n\\`\\`\\`bash\nnpm install my-product\n\\`\\`\\`\n\n## Install via yarn\n\n\\`\\`\\`bash\nyarn add my-product\n\\`\\`\\`\n\n## Verify Installation\n\n\\`\\`\\`bash\nnpx my-product --version\n\\`\\`\\`</code></pre>\n<h2 id=\"step-5-create-navigation-manifest\">Step 5: Create Navigation Manifest</h2>\n<p>Create `manifest.json`:</p>\n<pre><code class=\"language-json\">[\n  {\n    &quot;id&quot;: &quot;welcome&quot;,\n    &quot;title&quot;: &quot;Welcome&quot;,\n    &quot;summary&quot;: &quot;Introduction to My Product&quot;,\n    &quot;file&quot;: &quot;welcome.md&quot;\n  },\n  {\n    &quot;id&quot;: &quot;installation&quot;,\n    &quot;title&quot;: &quot;Installation&quot;,\n    &quot;summary&quot;: &quot;How to install My Product&quot;,\n    &quot;file&quot;: &quot;installation.md&quot;\n  }\n]</code></pre>\n<h2 id=\"step-6-register-your-tenant\">Step 6: Register Your Tenant</h2>\n<p>Go back to the publisher directory and edit `tenants.json`:</p>\n<pre><code class=\"language-bash\">cd /path/to/pagenary/apps/publisher</code></pre>\n<p>Add your tenant to `tenants.json`:</p>\n<pre><code class=\"language-json\">{\n  &quot;my-docs&quot;: {\n    &quot;source&quot;: &quot;/home/youruser/my-docs&quot;,\n    &quot;domain&quot;: &quot;my-docs.local&quot;\n  }\n}</code></pre>\n<h2 id=\"step-7-build-and-preview\">Step 7: Build and Preview</h2>\n<pre><code class=\"language-bash\"># Build your tenant\nnpm run build:tenants my-docs\n\n# Start the server\nnpm run serve\n\n# Visit http://localhost:5173/my-docs/</code></pre>\n<p>You should see your documentation with your branding applied.</p>\n<h2 id=\"step-8-set-up-local-domain-optional\">Step 8: Set Up Local Domain (Optional)</h2>\n<p>For a more realistic preview with custom domains:</p>\n<p>1. Edit `/etc/hosts` (Linux/Mac) or `C:\\Windows\\System32\\drivers\\etc\\hosts` (Windows):</p>\n<pre><code>127.0.0.1 my-docs.local</code></pre>\n<p>2. Start the Caddy server:</p>\n<pre><code class=\"language-bash\">npm run caddy:up</code></pre>\n<p>3. Visit http://my-docs.local</p>\n<h2 id=\"next-steps\">Next Steps</h2>\n<h3 id=\"add-more-content\">Add More Content</h3>\n<p>Create additional `.md`, `.html`, or `.js` files in `content/`:</p>\n<pre><code>content/\n├── welcome.md\n├── installation.md\n├── guides/\n│   ├── _manifest.json\n│   ├── getting-started.md\n│   └── advanced.md\n└── api/\n    ├── _manifest.json\n    └── reference.md</code></pre>\n<h3 id=\"organize-with-section-manifests\">Organize with Section Manifests</h3>\n<p>Create `content/guides/_manifest.json`:</p>\n<pre><code class=\"language-json\">{\n  &quot;title&quot;: &quot;Guides&quot;,\n  &quot;sections&quot;: [\n    { &quot;id&quot;: &quot;getting-started&quot;, &quot;title&quot;: &quot;Getting Started&quot;, &quot;file&quot;: &quot;getting-started.md&quot; },\n    { &quot;id&quot;: &quot;advanced&quot;, &quot;title&quot;: &quot;Advanced Usage&quot;, &quot;file&quot;: &quot;advanced.md&quot; }\n  ]\n}</code></pre>\n<h3 id=\"add-rich-content\">Add Rich Content</h3>\n<p><strong>Tables:</strong></p>\n<div class=\"html-block\"><table class=\"spec-table\">\n  <thead>\n    <tr><th>Feature</th><th>Status</th></tr>\n  </thead>\n  <tbody>\n    <tr><td>Search</td><td>Ready</td></tr>\n    <tr><td>Export</td><td>Ready</td></tr>\n  </tbody>\n</table></div>\n<p><strong>Diagrams:</strong></p>\n<pre><code class=\"language-mermaid\">sequenceDiagram\n    User-&gt;&gt;API: Request\n    API-&gt;&gt;DB: Query\n    DB--&gt;&gt;API: Results\n    API--&gt;&gt;User: Response</code></pre>\n<h3 id=\"customize-theme\">Customize Theme</h3>\n<p>Adjust colors in `config.json`:</p>\n<table><thead><tr><th style=\"text-align: left\">Color</th><th style=\"text-align: left\">Purpose</th><th style=\"text-align: left\">Example</th></tr></thead><tbody><tr><td style=\"text-align: left\">`accentColor`</td><td style=\"text-align: left\">Links, buttons, highlights</td><td style=\"text-align: left\">`#3B82F6` (blue)</td></tr><tr><td style=\"text-align: left\">`surfaceColor`</td><td style=\"text-align: left\">Page background</td><td style=\"text-align: left\">`#F8FAFC` (off-white)</td></tr></tbody></table>\n<h3 id=\"deploy\">Deploy</h3>\n<p>Your built site is in `dist/my-docs/`. Deploy it anywhere that serves static files:</p>\n<ul>\n<li><strong>Netlify/Vercel</strong>: Point to `dist/my-docs/`</li>\n<li><strong>S3/GCS</strong>: Upload the folder</li>\n<li><strong>Docker</strong>: Use the included Caddy setup</li>\n</ul>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<h3 id=\"content-not-appearing\">Content not appearing?</h3>\n<p>1. Check that `manifest.json` references the correct file paths</p>\n<p>2. Verify files exist in `content/`</p>\n<p>3. Run `npm run build:tenants my-docs` and check for errors</p>\n<h3 id=\"styles-not-applied\">Styles not applied?</h3>\n<p>1. Verify `config.json` is valid JSON</p>\n<p>2. Check color values are valid hex codes (e.g., `#3B82F6`)</p>\n<h3 id=\"search-not-working\">Search not working?</h3>\n<p>Search indexes content on first use. Wait for &quot;Indexing content...&quot; to complete.</p>\n<h2 id=\"resources\">Resources</h2>\n<ul>\n<li><a href=\"#tenant-config\">Tenant Configuration</a> - All config options</li>\n<li><a href=\"#architecture\">Architecture</a> - How it works</li>\n<li><a href=\"#api\">API Reference</a> - Module documentation</li>\n<li><a href=\"#deployment\">Deployment</a> - Hosting guide</li>\n</ul>\n  </div>\n</section>" };
+}

package/site/sections/section-templates.js

@@ -0,0 +1 @@
+import{inferCategory as n,titleFromId as e}from"../lib/categories.js";const t={welcome:{summary:"Template for a hero-led welcome page with highlight cards and onboarding calls to action.",render:n=>`\n<section class="section doc" data-template="welcome">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Welcome template</p>\n      <h1>${n}</h1>\n      <p class="lead">Introduce the tenant offering with a crisp positioning statement and a primary action.</p>\n    </header>\n    <div>\n      <h2>Value pillars</h2>\n      <ul>\n        <li>Summarize the first benefit in one focused sentence.</li>\n        <li>Highlight a differentiator that matters to your audience.</li>\n        <li>Call out an operational promise (support, scale, cost, or speed).</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Launch checklist</h2>\n      <ol>\n        <li>Define the promise in a single headline.</li>\n        <li>List one call to action for new visitors.</li>\n        <li>Showcase three quick proof points or partner logos.</li>\n      </ol>\n    </div>\n    <aside>\n      <h3>Quick links</h3>\n      <ul>\n        <li><a href="#">{{ Primary guide }}</a></li>\n        <li><a href="#">{{ Pricing or packaging }}</a></li>\n        <li><a href="#">{{ Support channel }}</a></li>\n      </ul>\n    </aside>\n    <blockquote>\n      <p>Use a short testimonial, mission statement, or founder quote to reinforce credibility.</p>\n    </blockquote>\n  </div>\n</section>\n    `.trim()},guide:{summary:"Template for introductory guides with prerequisites, phased steps, and success criteria.",render:n=>`\n<section class="section doc" data-template="guide">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Guide template</p>\n      <h1>${n}</h1>\n      <p class="lead">Use this structure to walk new tenants through concepts or setup flows without assuming prior context.</p>\n    </header>\n    <div>\n      <h2>Audience</h2>\n      <p>Define who should use this guide and what they should already know.</p>\n      <ul>\n        <li>Primary persona and role.</li>\n        <li>Target environment or tooling.</li>\n        <li>Expected time to complete the guide.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Prerequisites</h2>\n      <ul>\n        <li>{{ Accounts or credentials }}</li>\n        <li>{{ Access to sandbox tools }}</li>\n        <li>{{ Required hardware or environment }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Implementation steps</h2>\n      <ol>\n        <li><strong>Phase 1:</strong> Outline the initial decisions or configurations.</li>\n        <li><strong>Phase 2:</strong> Describe the hands-on tasks with expected outcomes.</li>\n        <li><strong>Phase 3:</strong> Document validation, roll-out, and next actions.</li>\n      </ol>\n    </div>\n    <div>\n      <h2>Success checks</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Checkpoint</th>\n            <th>How to test</th>\n            <th>Owner</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Configuration saved }}</td>\n            <td>{{ Command or UI indicator }}</td>\n            <td>{{ Persona }}</td>\n          </tr>\n          <tr>\n            <td>{{ Connectivity verified }}</td>\n            <td>{{ Metric or log }}</td>\n            <td>{{ Persona }}</td>\n          </tr>\n          <tr>\n            <td>{{ Feature enabled }}</td>\n            <td>{{ Screenshot or report }}</td>\n            <td>{{ Persona }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</section>\n    `.trim()},reference:{summary:"Template for technical reference pages that capture concepts, constraints, and integration notes.",render:n=>`\n<section class="section doc" data-template="reference">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Reference template</p>\n      <h1>${n}</h1>\n      <p class="lead">Document the underlying concepts, invariants, and responsibilities that engineers must respect.</p>\n    </header>\n    <div>\n      <h2>Concept summary</h2>\n      <p>Describe the the core idea in two or three sentences. Keep it factual and implementation oriented.</p>\n      <ul>\n        <li>State the problem that this component solves.</li>\n        <li>Outline what makes the approach distinctive.</li>\n        <li>Clarify the boundary of the component.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Implementation notes</h2>\n      <p>Break down how this element behaves in production environments.</p>\n      <ul>\n        <li>Lifecycle stages or state transitions.</li>\n        <li>Performance considerations.</li>\n        <li>Failure modes and protective measures.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Integration matrix</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Dependency</th>\n            <th>Interaction</th>\n            <th>Notes</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Upstream service }}</td>\n            <td>{{ Data exchanged }}</td>\n            <td>{{ Contract version }}</td>\n          </tr>\n          <tr>\n            <td>{{ Downstream client }}</td>\n            <td>{{ Protocol or channel }}</td>\n            <td>{{ Rate limits }}</td>\n          </tr>\n          <tr>\n            <td>{{ Operational contact }}</td>\n            <td>{{ SLA or escalation }}</td>\n            <td>{{ Ownership }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</section>\n    `.trim()},technical:{summary:"Template for system architecture or deep dive documents with diagram callouts and layered explanations.",render:n=>`\n<section class="section doc" data-template="technical">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Architecture template</p>\n      <h1>${n}</h1>\n      <p class="lead">Capture the layered view of the platform with clear responsibilities and communication paths.</p>\n    </header>\n    <div>\n      <h2>Layered overview</h2>\n      <p>Detail each layer of the system from the entry point down to persistence or integrations.</p>\n      <ol>\n        <li>{{ Experience or API layer }}</li>\n        <li>{{ Orchestration or service layer }}</li>\n        <li>{{ Infrastructure or data layer }}</li>\n      </ol>\n    </div>\n    <div>\n      <h2>Diagram callouts</h2>\n      <ul>\n        <li>Insert diagram filename or location.</li>\n        <li>List the components to label.</li>\n        <li>Note any external dependencies.</li>\n      </ul>\n      <pre><code class="language-mermaid">graph TD\n  A[Client] --\x3e|{{ Protocol }}| B[Gateway]\n  B --\x3e C[Service Cluster]\n  C --\x3e D[Data or Time Authority]\n</code></pre>\n    </div>\n    <div>\n      <h2>Operational summary</h2>\n      <blockquote>\n        <p>Summarize the most important runtime behaviors, including scaling levers and recovery hooks.</p>\n      </blockquote>\n    </div>\n  </div>\n</section>\n    `.trim()},developer:{summary:"Template for developer-focused material featuring code examples, API usage, and quick start commands.",render:n=>`\n<section class="section doc" data-template="developer">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Developer template</p>\n      <h1>${n}</h1>\n      <p class="lead">Guide engineers through integrating with the platform using concise examples and copyable snippets.</p>\n    </header>\n    <div>\n      <h2>Before you begin</h2>\n      <ul>\n        <li>{{ Install the preferred SDK }}</li>\n        <li>{{ Configure environment variables }}</li>\n        <li>{{ Retrieve test credentials }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Sample workflow</h2>\n      <pre><code class="language-javascript">import { Client } from '@tenant/sdk';\n\nconst client = new Client({ endpoint: process.env.TENANT_API });\nconst response = await client.connect({\n  workspace: '{{ workspace-id }}',\n  token: process.env.TENANT_TOKEN,\n});\n\nconsole.log('Connected:', response.status);\n</code></pre>\n    </div>\n    <div>\n      <h2>Key methods</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Method</th>\n            <th>Purpose</th>\n            <th>Notes</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td><code>initialize()</code></td>\n            <td>Set up configuration and authentication.</td>\n            <td>Call once per application lifecycle.</td>\n          </tr>\n          <tr>\n            <td><code>submitTask()</code></td>\n            <td>Send a time-sensitive job to the network.</td>\n            <td>Include idempotency keys.</td>\n          </tr>\n          <tr>\n            <td><code>watchStatus()</code></td>\n            <td>Subscribe to updates and react to state changes.</td>\n            <td>Handles retries internally.</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Next steps</h2>\n      <ul>\n        <li>Link to extended examples.</li>\n        <li>Point to sandbox or mock services.</li>\n        <li>Outline production readiness checks.</li>\n      </ul>\n    </div>\n  </div>\n</section>\n    `.trim()},governance:{summary:"Template for governance documentation covering decision models, roles, and proposal lifecycles.",render:n=>`\n<section class="section doc" data-template="governance">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Governance template</p>\n      <h1>${n}</h1>\n      <p class="lead">Explain how decisions are made, who participates, and how outcomes are recorded across tenants.</p>\n    </header>\n    <div>\n      <h2>Decision model</h2>\n      <p>Summarize the governance structure in plain language.</p>\n      <ul>\n        <li>{{ Council or committee scope }}</li>\n        <li>{{ Voting mechanism }}</li>\n        <li>{{ Quorum or approval threshold }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Roles and responsibilities</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Role</th>\n            <th>Accountabilities</th>\n            <th>Tenure</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Operator }}</td>\n            <td>{{ Executes approved changes }}</td>\n            <td>{{ Duration or rotation }}</td>\n          </tr>\n          <tr>\n            <td>{{ Reviewer }}</td>\n            <td>{{ Evaluates proposals }}</td>\n            <td>{{ Duration or rotation }}</td>\n          </tr>\n          <tr>\n            <td>{{ Treasurer }}</td>\n            <td>{{ Manages budget or reserves }}</td>\n            <td>{{ Duration or rotation }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Proposal lifecycle</h2>\n      <ol>\n        <li>Draft and collect supporting context.</li>\n        <li>Publish for review and comment.</li>\n        <li>Formal vote and implementation planning.</li>\n        <li>Retrospective and transparent reporting.</li>\n      </ol>\n    </div>\n  </div>\n</section>\n    `.trim()},product:{summary:"Template for product-oriented pages showing positioning, features, and packaging options.",render:n=>`\n<section class="section doc" data-template="product">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Product template</p>\n      <h1>${n}</h1>\n      <p class="lead">Capture how this offer solves a customer problem and how it is packaged across tenants.</p>\n    </header>\n    <div>\n      <h2>Positioning</h2>\n      <p>Describe what the product does, who it is for, and the primary outcomes.</p>\n      <ul>\n        <li>Problem statement.</li>\n        <li>Solution narrative.</li>\n        <li>Proof or validation.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Feature highlights</h2>\n      <ul>\n        <li><strong>{{ Feature name }}</strong> — Explain the capability in a single sentence.</li>\n        <li><strong>{{ Feature name }}</strong> — Outline what makes it distinct.</li>\n        <li><strong>{{ Feature name }}</strong> — Tie back to measurable outcomes.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Packaging</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Plan</th>\n            <th>Includes</th>\n            <th>Notes</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Starter }}</td>\n            <td>{{ Core features }}</td>\n            <td>{{ Ideal audience }}</td>\n          </tr>\n          <tr>\n            <td>{{ Growth }}</td>\n            <td>{{ Advanced options }}</td>\n            <td>{{ Volume considerations }}</td>\n          </tr>\n          <tr>\n            <td>{{ Enterprise }}</td>\n            <td>{{ Custom commitments }}</td>\n            <td>{{ Contact channel }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</section>\n    `.trim()},resource:{summary:"Template for resource collections such as FAQs, glossaries, or download libraries.",render:n=>`\n<section class="section doc" data-template="resource">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Resource template</p>\n      <h1>${n}</h1>\n      <p class="lead">Share supporting materials, definitions, and reference links for tenant operators.</p>\n    </header>\n    <div>\n      <h2>Collections</h2>\n      <ul>\n        <li>{{ Guide or handbook }} — Brief description.</li>\n        <li>{{ Policy or playbook }} — Brief description.</li>\n        <li>{{ Template or worksheet }} — Brief description.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Document index</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Resource</th>\n            <th>Format</th>\n            <th>Owner</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Starter kit }}</td>\n            <td>PDF</td>\n            <td>{{ Team }}</td>\n          </tr>\n          <tr>\n            <td>{{ API checklist }}</td>\n            <td>Spreadsheet</td>\n            <td>{{ Team }}</td>\n          </tr>\n          <tr>\n            <td>{{ Messaging assets }}</td>\n            <td>Archive</td>\n            <td>{{ Team }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Support channels</h2>\n      <ul>\n        <li>Email: <code>support@example.com</code></li>\n        <li>Slack: <code>#tenant-help</code></li>\n        <li>Office hours: {{ Weekly cadence }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n    `.trim()},security:{summary:"Template for security pages detailing trust posture, controls, and reporting processes.",render:n=>`\n<section class="section doc" data-template="security">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Security template</p>\n      <h1>${n}</h1>\n      <p class="lead">Explain how the platform manages risk, handles incidents, and communicates with stakeholders.</p>\n    </header>\n    <div>\n      <h2>Security posture</h2>\n      <ul>\n        <li>Shared responsibility model.</li>\n        <li>Data classification guidelines.</li>\n        <li>Identity and access policies.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Controls</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Control</th>\n            <th>Objective</th>\n            <th>Evidence</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Monitoring }}</td>\n            <td>{{ Detect drift }}</td>\n            <td>{{ Dashboard link }}</td>\n          </tr>\n          <tr>\n            <td>{{ Incident playbook }}</td>\n            <td>{{ Contain impact }}</td>\n            <td>{{ Checklist reference }}</td>\n          </tr>\n          <tr>\n            <td>{{ Vendor review }}</td>\n            <td>{{ Assess third parties }}</td>\n            <td>{{ Report cadence }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Reporting</h2>\n      <p>Describe how to disclose vulnerabilities and how communication flows during an incident.</p>\n      <blockquote>\n        <p>Example email: <code>security@example.com</code></p>\n      </blockquote>\n    </div>\n  </div>\n</section>\n    `.trim()},tutorial:{summary:"Template for actionable, step-by-step tutorials with prerequisites and validation tasks.",render:n=>`\n<section class="section doc" data-template="tutorial">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Tutorial template</p>\n      <h1>${n}</h1>\n      <p class="lead">Walk through a structured exercise with clear checkpoints and expected outputs.</p>\n    </header>\n    <div>\n      <h2>Prerequisites</h2>\n      <ul>\n        <li>{{ Access token or credentials }}</li>\n        <li>{{ Local environment tools }}</li>\n        <li>{{ Sample project or dataset }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Steps</h2>\n      <ol>\n        <li><strong>Set up:</strong> Outline the initial command or configuration.</li>\n        <li><strong>Implement:</strong> Explain the core action the user should complete.</li>\n        <li><strong>Validate:</strong> Provide an observable success signal.</li>\n      </ol>\n    </div>\n    <div>\n      <h2>Code sample</h2>\n      <pre><code class="language-python">from tenant import Client\n\nclient = Client(api_key="{{ api-key }}")\nclient.schedule(\n    task="{{ task-name }}",\n    execute_at="{{ timestamp }}",\n)\n</code></pre>\n    </div>\n    <div>\n      <h2>Troubleshooting</h2>\n      <ul>\n        <li>{{ Symptom }} — {{ Likely fix }}</li>\n        <li>{{ Symptom }} — {{ Likely fix }}</li>\n        <li>{{ Symptom }} — {{ Likely fix }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n    `.trim()},"tutorial-overview":{summary:"Template for tutorial indexes highlighting available walkthroughs and learning paths.",render:n=>`\n<section class="section doc" data-template="tutorial-overview">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Tutorial index template</p>\n      <h1>${n}</h1>\n      <p class="lead">Provide curated learning paths so tenants can pick the right hands-on guide.</p>\n    </header>\n    <div>\n      <h2>Getting started first</h2>\n      <ul>\n        <li><strong>{{ Tutorial name }}</strong> — Onboarding fundamentals.</li>\n        <li><strong>{{ Tutorial name }}</strong> — Core integration walkthrough.</li>\n        <li><strong>{{ Tutorial name }}</strong> — Validation and deployment.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Choose a path</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Track</th>\n            <th>Includes</th>\n            <th>Outcome</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Builders</td>\n            <td>SDK setup, first data flow.</td>\n            <td>Prototype in sandbox.</td>\n          </tr>\n          <tr>\n            <td>Operators</td>\n            <td>Monitoring, alerting, runbooks.</td>\n            <td>Healthy day-two operations.</td>\n          </tr>\n          <tr>\n            <td>Analysts</td>\n            <td>Reporting, dashboards, exports.</td>\n            <td>Insights shared with stakeholders.</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Where to ask questions</h2>\n      <p>List channels (chat, office hours, email) and expected response times.</p>\n    </div>\n  </div>\n</section>\n    `.trim()},"use-case":{summary:"Template for use case narratives that connect personas, workflows, and success metrics.",render:n=>`\n<section class="section doc" data-template="use-case">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Use case template</p>\n      <h1>${n}</h1>\n      <p class="lead">Show how the platform supports a real scenario with tangible value and measurable outcomes.</p>\n    </header>\n    <div>\n      <h2>Scenario overview</h2>\n      <p>Describe the environment, triggers, and desired end state.</p>\n    </div>\n    <div>\n      <h2>Personas</h2>\n      <ul>\n        <li>{{ Persona }} — Motivation and core responsibility.</li>\n        <li>{{ Persona }} — Motivation and core responsibility.</li>\n        <li>{{ Persona }} — Motivation and core responsibility.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Workflow</h2>\n      <ol>\n        <li>Initiate the event and capture inputs.</li>\n        <li>Process through automation or smart logic.</li>\n        <li>Deliver outputs and confirm success signals.</li>\n      </ol>\n    </div>\n    <div>\n      <h2>Success metrics</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Metric</th>\n            <th>Target</th>\n            <th>How to measure</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Latency }}</td>\n            <td>{{ Goal }}</td>\n            <td>{{ Tool }}</td>\n          </tr>\n          <tr>\n            <td>{{ Accuracy }}</td>\n            <td>{{ Goal }}</td>\n            <td>{{ Tool }}</td>\n          </tr>\n          <tr>\n            <td>{{ Cost }}</td>\n            <td>{{ Goal }}</td>\n            <td>{{ Tool }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</section>\n    `.trim()},operations:{summary:"Template for operations runbooks with checklists, monitoring, and escalation paths.",render:n=>`\n<section class="section doc" data-template="operations">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Operations template</p>\n      <h1>${n}</h1>\n      <p class="lead">Provide practical guidance for running tenant infrastructure and maintaining uptime.</p>\n    </header>\n    <div>\n      <h2>Daily checklist</h2>\n      <ul>\n        <li>Review health dashboards.</li>\n        <li>Verify synchronization status.</li>\n        <li>Confirm alerting channels are green.</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Maintenance windows</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Activity</th>\n            <th>Frequency</th>\n            <th>Owner</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Software updates }}</td>\n            <td>{{ Weekly or monthly }}</td>\n            <td>{{ Team or person }}</td>\n          </tr>\n          <tr>\n            <td>{{ Hardware checks }}</td>\n            <td>{{ Frequency }}</td>\n            <td>{{ Team or person }}</td>\n          </tr>\n          <tr>\n            <td>{{ Backup validation }}</td>\n            <td>{{ Frequency }}</td>\n            <td>{{ Team or person }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div>\n      <h2>Escalation path</h2>\n      <ol>\n        <li>Identify severity and capture logs.</li>\n        <li>Notify primary on-call channel.</li>\n        <li>Engage platform support or vendor partner.</li>\n      </ol>\n    </div>\n    <div>\n      <h2>Reference commands</h2>\n      <pre><code class="language-bash"># Replace placeholders with tenant specific values\ncheck-sync --endpoint {{ endpoint }}\nvalidate-health --node {{ node-id }}\n</code></pre>\n    </div>\n  </div>\n</section>\n    `.trim()},archive:{summary:"Template for archival timelines and historical notes across releases or initiatives.",render:n=>`\n<section class="section doc" data-template="archive">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Archive template</p>\n      <h1>${n}</h1>\n      <p class="lead">Record key milestones, artifacts, and retrospective notes for posterity.</p>\n    </header>\n    <div>\n      <h2>Milestones</h2>\n      <dl>\n        <dt>{{ 2023-01 }}</dt>\n        <dd>Summarize the release or initiative.</dd>\n        <dt>{{ 2023-06 }}</dt>\n        <dd>Highlight notable learnings.</dd>\n        <dt>{{ 2023-12 }}</dt>\n        <dd>Capture outcomes and follow-up actions.</dd>\n      </dl>\n    </div>\n    <div>\n      <h2>Artifacts</h2>\n      <ul>\n        <li>{{ Link to design doc }}</li>\n        <li>{{ Link to demo recording }}</li>\n        <li>{{ Link to postmortem }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Future considerations</h2>\n      <blockquote>\n        <p>Document open questions or unresolved ideas worth revisiting.</p>\n      </blockquote>\n    </div>\n  </div>\n</section>\n    `.trim()},default:{summary:"Flexible documentation template to capture narrative, lists, and structured data.",render:n=>`\n<section class="section doc" data-template="general">\n  <div class="doc-content">\n    <header>\n      <p class="eyebrow">Documentation template</p>\n      <h1>${n}</h1>\n      <p class="lead">Adapt this flexible layout to communicate policies, notes, or supporting context.</p>\n    </header>\n    <div>\n      <h2>Overview</h2>\n      <p>Summarize the topic in one or two paragraphs.</p>\n    </div>\n    <div>\n      <h2>Key points</h2>\n      <ul>\n        <li>{{ Highlight a key decision }}</li>\n        <li>{{ Capture a supporting metric }}</li>\n        <li>{{ Reference a related doc }}</li>\n      </ul>\n    </div>\n    <div>\n      <h2>Details</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Item</th>\n            <th>Description</th>\n            <th>Owner</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>{{ Topic }}</td>\n            <td>{{ Notes }}</td>\n            <td>{{ Team }}</td>\n          </tr>\n          <tr>\n            <td>{{ Topic }}</td>\n            <td>{{ Notes }}</td>\n            <td>{{ Team }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</section>\n    `.trim()}};export function getSectionMetadata(i,a={}){const o=n(i),r=t[o]||t.default;return{id:i,title:a.title||e(i),summary:a.summary||r.summary,category:o}}export{titleFromId}from"../lib/categories.js";export function renderSectionTemplate({id:n,title:e}){const i=getSectionMetadata(n,{title:e}),a=t[i.category]||t.default,o=i.title;return a.render(o,i).trim()}export function ensureCategory(n){return getSectionMetadata(n).category}

package/site/sections/seo-strategy.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"seo-strategy-notes\">SEO Strategy Notes</h1>\n<p>Docs Toolkit is primarily an internal enablement asset, but clean metadata keeps shared links professional and predictable.</p>\n<h2 id=\"core-actions\">Core Actions</h2>\n<ul>\n<li>Maintain a descriptive `&lt;title&gt;` and `&lt;meta name=&quot;description&quot;&gt;` in `src/index.html`.</li>\n<li>Keep manifest summaries concise—these values power link previews and the export document.</li>\n<li>Use human-readable, hyphenated IDs in `manifest.js` so hash URLs remain friendly.</li>\n</ul>\n<h2 id=\"hash-routing-considerations\">Hash Routing Considerations</h2>\n<ul>\n<li>Hash routes (`#/page-id`) mean the host only serves `index.html`; the browser handles navigation.</li>\n<li>When sharing links, include the hash so teammates land directly on the intended section.</li>\n<li>Avoid uppercase or spaces in IDs to prevent encoding quirks.</li>\n</ul>\n<h2 id=\"optional-enhancements\">Optional Enhancements</h2>\n<ul>\n<li>Add JSON-LD when tenant offerings need richer preview cards.</li>\n<li>Inject Open Graph/Twitter meta tags if the docs will be shared outside the reseller organization.</li>\n<li>Monitor for broken links or missing content using the lint script or a CI crawler.</li>\n</ul>\n  </div>\n</section>" };
+}

package/site/sections/tenant-config.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"tenant-configuration-reference\">Tenant Configuration Reference</h1>\n<p>Complete reference for all tenant configuration options.</p>\n<h2 id=\"tenant-registry-tenantsjson\">Tenant Registry (tenants.json)</h2>\n<p>Located at `apps/publisher/tenants.json`, this file registers all tenants:</p>\n<pre><code class=\"language-json\">{\n  &quot;tenant-id&quot;: {\n    &quot;source&quot;: &quot;/path/to/content&quot;,\n    &quot;domain&quot;: &quot;docs.example.com&quot;\n  }\n}</code></pre>\n<h3 id=\"registry-properties\">Registry Properties</h3>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Required</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`source`</td><td style=\"text-align: left\">Yes</td><td style=\"text-align: left\">Path to tenant content directory</td></tr><tr><td style=\"text-align: left\">`domain`</td><td style=\"text-align: left\">No</td><td style=\"text-align: left\">Custom domain for Caddy routing</td></tr></tbody></table>\n<h3 id=\"source-types\">Source Types</h3>\n<p><strong>Local Path:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;my-docs&quot;: {\n    &quot;source&quot;: &quot;/home/user/my-docs&quot;\n  }\n}</code></pre>\n<p><strong>Git Repository:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;my-docs&quot;: {\n    &quot;source&quot;: &quot;git:https://github.com/org/my-docs.git#main&quot;\n  }\n}</code></pre>\n<p>Format: `git:&lt;repo-url&gt;#&lt;branch&gt;`</p>\n<p>Git sources are cloned to a cache directory and updated on each build.</p>\n<h2 id=\"tenant-directory-structure\">Tenant Directory Structure</h2>\n<pre><code>my-tenant/\n├── config.json           # Branding and theme (required)\n├── manifest.json         # Navigation structure (optional)\n├── content/              # Content files\n│   ├── *.md              # Markdown files\n│   ├── *.html            # HTML files\n│   ├── *.js              # JavaScript modules\n│   └── section/          # Nested directories\n│       └── _manifest.json\n├── .public/              # Static assets (optional)\n│   ├── favicon.ico       # Favicons copied to dist root\n│   ├── logo.svg          # Assets copied to dist/assets/\n│   └── icons/            # Subdirectories preserved\n└── overrides/            # Post-build replacements (optional)\n    └── styles.css        # Replace built files</code></pre>\n<h2 id=\"branding-configuration-configjson\">Branding Configuration (config.json)</h2>\n<h3 id=\"complete-example\">Complete Example</h3>\n<pre><code class=\"language-json\">{\n  &quot;title&quot;: &quot;ACME Documentation&quot;,\n  &quot;description&quot;: &quot;Complete guide to the ACME platform&quot;,\n  &quot;brandMark&quot;: &quot;ACME&quot;,\n  &quot;brandSub&quot;: &quot;Docs&quot;,\n  &quot;tagline&quot;: &quot;Build better, faster&quot;,\n  &quot;copyright&quot;: &quot;ACME Corporation&quot;,\n  &quot;accentColor&quot;: &quot;#6366F1&quot;,\n  &quot;surfaceColor&quot;: &quot;#F7FAFC&quot;\n}</code></pre>\n<h3 id=\"properties-reference\">Properties Reference</h3>\n<h4 id=\"site-metadata\">Site Metadata</h4>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Type</th><th style=\"text-align: left\">Default</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`title`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">&quot;Docs Toolkit&quot;</td><td style=\"text-align: left\">Browser tab title and header</td></tr><tr><td style=\"text-align: left\">`description`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">-</td><td style=\"text-align: left\">Meta description for SEO</td></tr></tbody></table>\n<h4 id=\"branding\">Branding</h4>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Type</th><th style=\"text-align: left\">Default</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`brandMark`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">&quot;DOCS&quot;</td><td style=\"text-align: left\">Primary brand text (bold, uppercase)</td></tr><tr><td style=\"text-align: left\">`brandSub`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">&quot;TOOLKIT&quot;</td><td style=\"text-align: left\">Secondary brand text (light weight)</td></tr><tr><td style=\"text-align: left\">`tagline`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">-</td><td style=\"text-align: left\">Subtitle displayed under brand</td></tr><tr><td style=\"text-align: left\">`copyright`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">&quot;Modular Documentation Toolkit&quot;</td><td style=\"text-align: left\">Footer copyright text</td></tr></tbody></table>\n<h4 id=\"theme-colors\">Theme Colors</h4>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Type</th><th style=\"text-align: left\">Default</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`accentColor`</td><td style=\"text-align: left\">hex string</td><td style=\"text-align: left\">&quot;#111111&quot;</td><td style=\"text-align: left\">Links, buttons, active states</td></tr><tr><td style=\"text-align: left\">`surfaceColor`</td><td style=\"text-align: left\">hex string</td><td style=\"text-align: left\">&quot;#ffffff&quot;</td><td style=\"text-align: left\">Page background color</td></tr></tbody></table>\n<p>Color values must be 6-digit hex codes (e.g., `#6366F1`).</p>\n<h2 id=\"navigation-manifest-manifestjson\">Navigation Manifest (manifest.json)</h2>\n<h3 id=\"root-manifest\">Root Manifest</h3>\n<p>Located at tenant root, defines top-level navigation:</p>\n<pre><code class=\"language-json\">[\n  {\n    &quot;id&quot;: &quot;welcome&quot;,\n    &quot;title&quot;: &quot;Welcome&quot;,\n    &quot;summary&quot;: &quot;Introduction to the platform&quot;,\n    &quot;file&quot;: &quot;welcome.md&quot;\n  },\n  {\n    &quot;id&quot;: &quot;guides&quot;,\n    &quot;title&quot;: &quot;Guides&quot;,\n    &quot;summary&quot;: &quot;Step-by-step tutorials&quot;,\n    &quot;subsections&quot;: [\n      {\n        &quot;id&quot;: &quot;guides/getting-started&quot;,\n        &quot;title&quot;: &quot;Getting Started&quot;,\n        &quot;summary&quot;: &quot;First steps&quot;,\n        &quot;file&quot;: &quot;guides/getting-started.md&quot;\n      },\n      {\n        &quot;id&quot;: &quot;guides/advanced&quot;,\n        &quot;title&quot;: &quot;Advanced&quot;,\n        &quot;file&quot;: &quot;guides/advanced.md&quot;\n      }\n    ]\n  }\n]</code></pre>\n<h3 id=\"section-properties\">Section Properties</h3>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Required</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`id`</td><td style=\"text-align: left\">Yes*</td><td style=\"text-align: left\">Unique section identifier (used in URLs)</td></tr><tr><td style=\"text-align: left\">`title`</td><td style=\"text-align: left\">Yes</td><td style=\"text-align: left\">Display title in navigation</td></tr><tr><td style=\"text-align: left\">`summary`</td><td style=\"text-align: left\">No</td><td style=\"text-align: left\">Description shown in search results</td></tr><tr><td style=\"text-align: left\">`file`</td><td style=\"text-align: left\">No**</td><td style=\"text-align: left\">Path to content file (relative to `content/`)</td></tr><tr><td style=\"text-align: left\">`url`</td><td style=\"text-align: left\">No**</td><td style=\"text-align: left\">External link URL (opens in new tab)</td></tr><tr><td style=\"text-align: left\">`subsections`</td><td style=\"text-align: left\">No</td><td style=\"text-align: left\">Array of child sections</td></tr><tr><td style=\"text-align: left\">`exclude`</td><td style=\"text-align: left\">No</td><td style=\"text-align: left\">Exclude from build (`true` to skip)</td></tr></tbody></table>\n<p>*Not required for external links</p>\n<p>**Use either `file` OR `url`, not both</p>\n<h3 id=\"external-links-in-navigation\">External Links in Navigation</h3>\n<p>Manifest entries can link to external resources using `url` instead of `id`/`file`:</p>\n<pre><code class=\"language-json\">[\n  {\n    &quot;id&quot;: &quot;docs&quot;,\n    &quot;title&quot;: &quot;Documentation&quot;,\n    &quot;file&quot;: &quot;docs.md&quot;\n  },\n  {\n    &quot;title&quot;: &quot;GitHub&quot;,\n    &quot;url&quot;: &quot;https://github.com/example/repo&quot;\n  },\n  {\n    &quot;title&quot;: &quot;Support Portal&quot;,\n    &quot;url&quot;: &quot;https://support.example.com&quot;\n  }\n]</code></pre>\n<p>External links automatically:</p>\n<ul>\n<li>Open in new tab (`target=&quot;_blank&quot;`)</li>\n<li>Display subtle arrow icon indicator (↗)</li>\n<li>Skip URL hash routing</li>\n</ul>\n<h3 id=\"section-manifest-manifestjson\">Section Manifest (_manifest.json)</h3>\n<p>Located in content subdirectories for nested navigation:</p>\n<pre><code class=\"language-json\">{\n  &quot;title&quot;: &quot;API Reference&quot;,\n  &quot;summary&quot;: &quot;Complete API documentation&quot;,\n  &quot;sections&quot;: [\n    {\n      &quot;id&quot;: &quot;overview&quot;,\n      &quot;title&quot;: &quot;Overview&quot;,\n      &quot;file&quot;: &quot;overview.md&quot;\n    },\n    {\n      &quot;id&quot;: &quot;endpoints&quot;,\n      &quot;title&quot;: &quot;Endpoints&quot;,\n      &quot;file&quot;: &quot;endpoints.md&quot;\n    }\n  ]\n}</code></pre>\n<h3 id=\"auto-generated-manifest\">Auto-Generated Manifest</h3>\n<p>If no `manifest.json` exists, the build system auto-generates navigation from the `content/` directory structure:</p>\n<ul>\n<li>Files become sections (filename → title)</li>\n<li>Directories become groups</li>\n<li>`_manifest.json` in directories customizes the group</li>\n</ul>\n<h2 id=\"bottom-navigation\">Bottom Navigation</h2>\n<p>Configure bottom navigation bar behavior in root `_manifest.json` or `manifest.json`:</p>\n<pre><code class=\"language-json\">{\n  &quot;bottomNav&quot;: &quot;always&quot;,\n  &quot;bottomNavSections&quot;: [&quot;getting-started&quot;, &quot;api-reference&quot;, &quot;faq&quot;],\n  &quot;sections&quot;: [\n    // ... section definitions\n  ]\n}</code></pre>\n<h3 id=\"bottom-navigation-properties\">Bottom Navigation Properties</h3>\n<table><thead><tr><th style=\"text-align: left\">Property</th><th style=\"text-align: left\">Type</th><th style=\"text-align: left\">Default</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`bottomNav`</td><td style=\"text-align: left\">string</td><td style=\"text-align: left\">`&quot;mobile&quot;`</td><td style=\"text-align: left\">When to show bottom nav: `&quot;mobile&quot;`, `&quot;always&quot;`, or `&quot;never&quot;`</td></tr><tr><td style=\"text-align: left\">`bottomNavSections`</td><td style=\"text-align: left\">string[]</td><td style=\"text-align: left\">`[]`</td><td style=\"text-align: left\">Section IDs to include (empty array = all sections)</td></tr></tbody></table>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>`&quot;mobile&quot;` - Show only on small screens (default)</li>\n<li>`&quot;always&quot;` - Show on all screen sizes</li>\n<li>`&quot;never&quot;` - Hide bottom navigation completely</li>\n</ul>\n<p><strong>Examples:</strong></p>\n<p>Show all sections on mobile only (default):</p>\n<pre><code class=\"language-json\">{\n  &quot;bottomNav&quot;: &quot;mobile&quot;\n}</code></pre>\n<p>Show specific sections always:</p>\n<pre><code class=\"language-json\">{\n  &quot;bottomNav&quot;: &quot;always&quot;,\n  &quot;bottomNavSections&quot;: [&quot;home&quot;, &quot;docs&quot;, &quot;api&quot;]\n}</code></pre>\n<p>Hide bottom navigation:</p>\n<pre><code class=\"language-json\">{\n  &quot;bottomNav&quot;: &quot;never&quot;\n}</code></pre>\n<h2 id=\"content-files\">Content Files</h2>\n<h3 id=\"markdown-md\">Markdown (.md)</h3>\n<p>Full CommonMark support plus:</p>\n<ul>\n<li>Fenced code blocks with syntax highlighting</li>\n<li>Mermaid diagrams with interactive controls</li>\n<li>Internal links via `#section-id`</li>\n<li>External links auto-open in new tab</li>\n</ul>\n<pre><code class=\"language-markdown\"># Page Title\n\nRegular markdown content.\n\n## Code Example\n\n\\`\\`\\`javascript\nconst x = 1;\n\\`\\`\\`\n\n## Diagram\n\n\\`\\`\\`mermaid\ngraph LR\n    A --&gt; B\n\\`\\`\\`\n\nSee also: [Getting Started](#guides/getting-started)\n\nLearn more: [GitHub](https://github.com/example)</code></pre>\n<h4 id=\"external-links-in-content\">External Links in Content</h4>\n<p>All HTTP/HTTPS links in markdown automatically:</p>\n<ul>\n<li>Open in new tab (`target=&quot;_blank&quot;`)</li>\n<li>Display subtle ↗ indicator via CSS</li>\n<li>Include security attributes (`rel=&quot;noopener noreferrer&quot;`)</li>\n</ul>\n<p><strong>Standard external link:</strong></p>\n<pre><code class=\"language-markdown\">Visit our [GitHub repository](https://github.com/example/repo).</code></pre>\n<p><strong>Prominent call-to-action link:</strong></p>\n<div class=\"html-block\"><a href=\"https://example.com/signup\" class=\"external-cta\">\n  Sign Up Now →\n</a></div>\n<p>The `.external-cta` class provides enhanced styling for important external links.</p>\n<h4 id=\"mermaid-diagrams\">Mermaid Diagrams</h4>\n<p>Mermaid diagrams render with interactive controls:</p>\n<p><strong>Features:</strong></p>\n<ul>\n<li><strong>Zoom controls</strong>: +/− buttons for zoom in/out</li>\n<li><strong>Reset button</strong>: ⊙ restores original view</li>\n<li><strong>Pan</strong>: Click and drag to move diagram</li>\n<li><strong>Pinch zoom</strong>: Touch devices support pinch gestures</li>\n<li><strong>Auto-scroll</strong>: Diagrams larger than viewport are scrollable</li>\n</ul>\n<p><strong>Supported diagram types:</strong></p>\n<ul>\n<li>Flowcharts (`graph`, `flowchart`)</li>\n<li>Sequence diagrams (`sequenceDiagram`)</li>\n<li>Class diagrams (`classDiagram`)</li>\n<li>State diagrams (`stateDiagram`)</li>\n<li>ER diagrams (`erDiagram`)</li>\n<li>User journey (`journey`)</li>\n<li>Gantt charts (`gantt`)</li>\n<li>And more (see Mermaid documentation)</li>\n</ul>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-markdown\">\\`\\`\\`mermaid\ngraph TD\n    A[Start] --&gt; B{Decision}\n    B --&gt;|Yes| C[Action 1]\n    B --&gt;|No| D[Action 2]\n    C --&gt; E[End]\n    D --&gt; E\n\\`\\`\\`</code></pre>\n<h3 id=\"html-html\">HTML (.html)</h3>\n<p>Direct HTML with access to built-in CSS classes:</p>\n<div class=\"html-block\"><section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n    <h1>Custom Section</h1>\n\n    <table class=\"spec-table\">\n      <thead>\n        <tr><th>Feature</th><th>Status</th></tr>\n      </thead>\n      <tbody>\n        <tr><td>Search</td><td>Ready</td></tr>\n      </tbody>\n    </table>\n\n    <div class=\"layer-stack\">\n      <div class=\"layer\">\n        <div class=\"layer-title\">Layer 1</div>\n        <div class=\"layer-desc\">Description</div>\n      </div>\n    </div>\n  </div>\n</section></div>\n<h3 id=\"javascript-js\">JavaScript (.js)</h3>\n<p>Dynamic content modules:</p>\n<pre><code class=\"language-javascript\">export async function load() {\n  // Fetch data, compute values, etc.\n  const data = await fetch(&#39;/api/data.json&#39;).then(r =&gt; r.json());\n\n  return {\n    html: `\n      &lt;section class=&quot;section doc&quot;&gt;\n        &lt;h1&gt;Dynamic Content&lt;/h1&gt;\n        &lt;p&gt;Value: ${data.value}&lt;/p&gt;\n      &lt;/section&gt;\n    `,\n    afterRender(container) {\n      // Optional: DOM manipulation after render\n      container.querySelector(&#39;button&#39;)?.addEventListener(&#39;click&#39;, () =&gt; {\n        // Handle click\n      });\n    }\n  };\n}</code></pre>\n<h2 id=\"css-classes-reference\">CSS Classes Reference</h2>\n<h3 id=\"layout\">Layout</h3>\n<table><thead><tr><th style=\"text-align: left\">Class</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`.section`</td><td style=\"text-align: left\">Section container</td></tr><tr><td style=\"text-align: left\">`.doc`</td><td style=\"text-align: left\">Document-style section</td></tr><tr><td style=\"text-align: left\">`.markdown`</td><td style=\"text-align: left\">Apply markdown typography</td></tr><tr><td style=\"text-align: left\">`.doc-content`</td><td style=\"text-align: left\">Content wrapper</td></tr></tbody></table>\n<h3 id=\"components\">Components</h3>\n<table><thead><tr><th style=\"text-align: left\">Class</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`.spec-table`</td><td style=\"text-align: left\">Styled data table</td></tr><tr><td style=\"text-align: left\">`.layer-stack`</td><td style=\"text-align: left\">Vertical layer diagram</td></tr><tr><td style=\"text-align: left\">`.layer`</td><td style=\"text-align: left\">Individual layer in stack</td></tr><tr><td style=\"text-align: left\">`.layer-title`</td><td style=\"text-align: left\">Layer heading</td></tr><tr><td style=\"text-align: left\">`.layer-desc`</td><td style=\"text-align: left\">Layer description</td></tr><tr><td style=\"text-align: left\">`.card`</td><td style=\"text-align: left\">Card component</td></tr><tr><td style=\"text-align: left\">`.card-grid`</td><td style=\"text-align: left\">Grid of cards</td></tr><tr><td style=\"text-align: left\">`.content-box`</td><td style=\"text-align: left\">Bordered content box</td></tr><tr><td style=\"text-align: left\">`.box-title`</td><td style=\"text-align: left\">Box heading</td></tr><tr><td style=\"text-align: left\">`.html-block`</td><td style=\"text-align: left\">HTML content wrapper</td></tr><tr><td style=\"text-align: left\">`.external-cta`</td><td style=\"text-align: left\">Prominent external link button</td></tr></tbody></table>\n<h3 id=\"typography\">Typography</h3>\n<table><thead><tr><th style=\"text-align: left\">Class</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`.doc-h1` through `.doc-h4`</td><td style=\"text-align: left\">Heading styles</td></tr><tr><td style=\"text-align: left\">`.doc-list`</td><td style=\"text-align: left\">Styled list</td></tr><tr><td style=\"text-align: left\">`.doc-grid`</td><td style=\"text-align: left\">Two-column grid</td></tr></tbody></table>\n<h2 id=\"overrides-directory\">Overrides Directory</h2>\n<p>Files in `overrides/` replace built files after the build completes:</p>\n<pre><code>my-tenant/\n└── overrides/\n    ├── styles.css      # Replace default styles\n    └── favicon.ico     # Custom favicon</code></pre>\n<p>Use for:</p>\n<ul>\n<li>Custom stylesheets</li>\n<li>Custom favicons</li>\n<li>Additional assets</li>\n</ul>\n<h2 id=\"static-assets-public\">Static Assets (.public/)</h2>\n<p>The `.public/` directory stores static assets (images, icons, logos) that should be included in the built tenant bundle.</p>\n<h3 id=\"directory-structure\">Directory Structure</h3>\n<pre><code>my-tenant/\n├── .public/              # Static assets directory\n│   ├── favicon.ico       # Copied to dist root\n│   ├── favicon.png       # Copied to dist root\n│   ├── logo.svg          # Copied to dist/assets/\n│   └── icons/            # Subdirectories preserved\n│       ├── discord.svg\n│       └── github.svg\n├── config.json\n├── content/\n└── ...</code></pre>\n<h3 id=\"build-behavior\">Build Behavior</h3>\n<p>During the build process:</p>\n<p>1. <strong>Assets directory creation</strong>: Contents are copied to `dist/&lt;tenant-id&gt;/assets/`</p>\n<p>2. <strong>Favicon handling</strong>: Files matching `favicon.*` (e.g., `favicon.ico`, `favicon.png`, `favicon.svg`) are copied to the dist root (`dist/&lt;tenant-id&gt;/`) for browser auto-detection</p>\n<p>3. <strong>Subdirectory preservation</strong>: Subdirectory structure within `.public/` is maintained in the output</p>\n<h3 id=\"referencing-assets-in-content\">Referencing Assets in Content</h3>\n<p><strong>In Markdown:</strong></p>\n<pre><code class=\"language-markdown\">![Company Logo](./assets/logo.svg)\n![Product Screenshot](./assets/screenshots/dashboard.png)</code></pre>\n<p><strong>In HTML content:</strong></p>\n<div class=\"html-block\"><img src=\"./assets/logo.svg\" alt=\"Company Logo\">\n<img src=\"./assets/icons/github.svg\" alt=\"GitHub\"></div>\n<p><strong>In CSS (via overrides):</strong></p>\n<pre><code class=\"language-css\">.custom-header {\n  background-image: url(./assets/logo.svg);\n}\n\n.icon-discord {\n  content: url(./assets/icons/discord.svg);\n}</code></pre>\n<h3 id=\"why-public-instead-of-public\">Why .public Instead of public?</h3>\n<p>The dot-prefix (`.public/`) was chosen to:</p>\n<ul>\n<li><strong>Avoid conflicts</strong>: Prevents naming collisions with user&#39;s conventional `public/` directories that might contain user-facing content</li>\n<li><strong>Clear separation</strong>: Distinguishes between tenant assets and potential user content directories</li>\n<li><strong>Build system clarity</strong>: Signals this is a build-time directive, not user-facing content</li>\n</ul>\n<h3 id=\"supported-file-formats\">Supported File Formats</h3>\n<p>The `.public/` directory supports all static file types:</p>\n<p><strong>Images:</strong></p>\n<ul>\n<li>PNG (`.png`)</li>\n<li>JPEG (`.jpg`, `.jpeg`)</li>\n<li>SVG (`.svg`)</li>\n<li>WebP (`.webp`)</li>\n<li>GIF (`.gif`)</li>\n</ul>\n<p><strong>Icons:</strong></p>\n<ul>\n<li>ICO (`.ico`)</li>\n<li>SVG (`.svg`)</li>\n</ul>\n<p><strong>Other static files:</strong></p>\n<ul>\n<li>Any additional static assets needed by your documentation</li>\n</ul>\n<h3 id=\"example-usage\">Example Usage</h3>\n<p><strong>Typical tenant structure with assets:</strong></p>\n<pre><code>acme-docs/\n├── config.json\n├── manifest.json\n├── .public/\n│   ├── favicon.ico              # Browser tab icon\n│   ├── favicon.svg              # Modern browsers\n│   ├── logo.svg                 # Company logo\n│   ├── logo-dark.svg            # Dark mode variant\n│   ├── screenshots/             # Product screenshots\n│   │   ├── dashboard.png\n│   │   └── settings.png\n│   └── icons/                   # Social/external icons\n│       ├── github.svg\n│       ├── discord.svg\n│       └── twitter.svg\n└── content/\n    └── welcome.md</code></pre>\n<p><strong>Referenced in welcome.md:</strong></p>\n<pre><code class=\"language-markdown\"># Welcome to ACME Docs\n\n![ACME Logo](./assets/logo.svg)\n\n## Quick Start\n\nCheck out our dashboard:\n\n![Dashboard Screenshot](./assets/screenshots/dashboard.png)\n\n## Community\n\nJoin us on:\n- ![GitHub](./assets/icons/github.svg) [GitHub](https://github.com/acme)\n- ![Discord](./assets/icons/discord.svg) [Discord](https://discord.gg/acme)</code></pre>\n<h2 id=\"environment-variables\">Environment Variables</h2>\n<table><thead><tr><th style=\"text-align: left\">Variable</th><th style=\"text-align: left\">Default</th><th style=\"text-align: left\">Description</th></tr></thead><tbody><tr><td style=\"text-align: left\">`BUILD_OUTPUT`</td><td style=\"text-align: left\">`dist/`</td><td style=\"text-align: left\">Output directory</td></tr><tr><td style=\"text-align: left\">`DOCS_TOOLKIT_PORT`</td><td style=\"text-align: left\">`80`</td><td style=\"text-align: left\">Caddy server port</td></tr><tr><td style=\"text-align: left\">`PORT`</td><td style=\"text-align: left\">`5173`</td><td style=\"text-align: left\">Dev server port</td></tr></tbody></table>\n<h2 id=\"build-modes\">Build Modes</h2>\n<h3 id=\"full-build\">Full Build</h3>\n<pre><code class=\"language-bash\">npm run build:tenants my-tenant</code></pre>\n<p>Rebuilds everything from scratch.</p>\n<h3 id=\"incremental-build\">Incremental Build</h3>\n<pre><code class=\"language-bash\">npm run build:incremental my-tenant</code></pre>\n<p>Only rebuilds files changed since last build (git-aware).</p>\n<h3 id=\"all-tenants\">All Tenants</h3>\n<pre><code class=\"language-bash\">npm run build:tenants</code></pre>\n<p>Builds all registered tenants.</p>\n  </div>\n</section>" };
+}

package/site/sections/welcome.js

@@ -0,0 +1,3 @@
+export async function load() {
+  return { html: "<section class=\"section doc markdown\">\n  <div class=\"doc-content\">\n<h1 id=\"where-documentation-takes-shape\">Where documentation takes shape</h1>\n<p>Pagenary is a multi-tenant documentation publishing platform that turns one</p>\n<p>shared set of templates into many branded, tenant-specific static sites. Zero</p>\n<p>runtime dependencies, hash-based routing, and a Git-aware build pipeline make</p>\n<p>it suited to white-label documentation portals — one source of truth, any</p>\n<p>number of published sites.</p>\n<p><strong>This portal is built by Pagenary, from Pagenary&#39;s own documentation.</strong> Every</p>\n<p>page you see here is the same publisher pipeline applied to the developer docs</p>\n<p>in the repository, served as a static single-page app.</p>\n<h2 id=\"start-here\">Start here</h2>\n<ul>\n<li><strong><a href=\"#quickstart\">Quickstart</a></strong> — install, build the default bundle, and serve it locally.</li>\n<li><strong><a href=\"#architecture\">Architecture</a></strong> — the static SPA pattern, build pipeline, and tenant content model.</li>\n<li><strong><a href=\"#tenant-config\">Tenant Configuration</a></strong> — every `config.json` option for branding, theming, and export.</li>\n</ul>\n<h2 id=\"how-a-tenant-works\">How a tenant works</h2>\n<p>A tenant is a thin layer — content, a `config.json`, and a `manifest.json` —</p>\n<p>over the shared template catalog. Branding, theming, and navigation are **data,</p>\n<p>not code**: a tenant changes its look through configuration, never by forking</p>\n<p>the generator. The build produces a self-contained bundle under</p>\n<p>`dist/&lt;tenant-id&gt;/` that you can host anywhere that serves files.</p>\n  </div>\n</section>" };
+}

package/site/seo.js

@@ -0,0 +1 @@
+function t(t,e){let n=document.querySelector(t);return n||(n=e(),document.head.appendChild(n)),n}function e(e,n,r){t(`meta[${e}="${n}"]`,()=>{const t=document.createElement("meta");return t.setAttribute(e,n),t}).setAttribute("content",r)}export function updateMetaTags({title:n,description:r,siteTitle:i,siteUrl:o,sectionId:c}){const a=i||"Docs Toolkit",l=n?`${n} · ${a}`:a;document.title=l;const s=r||"";if(e("name","description",s),e("property","og:title",n||a),e("property","og:description",s),e("property","og:type","article"),e("name","twitter:card","summary"),e("name","twitter:title",n||a),e("name","twitter:description",s),o){const n=c?`${o}/#${c}`:o;u=n,t(`link[rel="${"canonical"}"]`,()=>{const t=document.createElement("link");return t.setAttribute("rel","canonical"),t}).setAttribute("href",u),e("property","og:url",n)}var u}

package/site/sitemap.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>/</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>/pages/welcome.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>/pages/quickstart.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/developer-guide.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/tenant-config.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/extending.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/architecture.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/api.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/deployment.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>/pages/seo-strategy.html</loc>
+    <lastmod>2026-05-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>