npm - generator-white-label - Versions diffs - 8.0.0 → 10.0.0 - Mend

generator-white-label 8.0.0 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/CLI.md +16 -20
package/EXISTING_APPLICATIONS.md +155 -0
package/PACKAGE_MANAGERS.md +6 -4
package/README.md +136 -126
package/app/404.ts +28 -0
package/app/README.md +45 -7
package/{scaffold/no-jsx/app → app}/assets/script/index.ts +1 -0
package/app/assets/script/tasks/TaskApplication.ts +11 -11
package/app/assets/script/tasks/TaskMediator.ts +6 -11
package/app/assets/script/tasks/TaskRouter.ts +1 -1
package/{scaffold/no-jsx/app → app}/assets/script/tasks/TaskView.ts +1 -1
package/app/assets/view/CodeBlock.ts +15 -0
package/app/assets/view/examples/tasks/TaskExample.ts +50 -0
package/app/assets/view/examples/tasks/task-state.ts +1 -1
package/app/assets/view/layout/SiteFooter.ts +11 -0
package/app/assets/view/layout/SiteHeader.ts +17 -0
package/app/assets/view/page-data.ts +2 -2
package/app/assets/view/sections/GettingStartedSection.ts +26 -0
package/app/assets/view/sections/HeroSection.ts +15 -0
package/app/assets/view/sections/LiveExampleSection.ts +24 -0
package/app/assets/view/sections/PackageDocsSection.ts +69 -0
package/app/assets/view/sections/{SourceGuideSection.tsx → SourceGuideSection.ts} +11 -16
package/app/index.ts +50 -0
package/cli/index.ts +6 -42
package/dist/app/404.d.ts +1 -1
package/dist/app/404.js +18 -2
package/dist/app/404.js.map +1 -1
package/dist/app/assets/script/index.d.ts +1 -6
package/dist/app/assets/script/index.js +1 -6
package/dist/app/assets/script/index.js.map +1 -1
package/dist/app/assets/script/tasks/TaskApplication.js +11 -11
package/dist/app/assets/script/tasks/TaskApplication.js.map +1 -1
package/dist/app/assets/script/tasks/TaskMediator.d.ts +5 -10
package/dist/app/assets/script/tasks/TaskMediator.js.map +1 -1
package/dist/app/assets/script/tasks/TaskRouter.js +1 -1
package/dist/app/assets/script/tasks/TaskRouter.js.map +1 -1
package/dist/app/assets/script/tasks/TaskView.d.ts +1 -6
package/dist/app/assets/script/tasks/TaskView.js +2 -8
package/dist/app/assets/script/tasks/TaskView.js.map +1 -1
package/dist/app/assets/view/CodeBlock.d.ts +3 -3
package/dist/app/assets/view/CodeBlock.js +4 -2
package/dist/app/assets/view/CodeBlock.js.map +1 -1
package/dist/app/assets/view/examples/tasks/TaskExample.d.ts +2 -8
package/dist/app/assets/view/examples/tasks/TaskExample.js +41 -9
package/dist/app/assets/view/examples/tasks/TaskExample.js.map +1 -1
package/dist/app/assets/view/examples/tasks/task-state.d.ts +1 -1
package/dist/app/assets/view/examples/tasks/task-state.js.map +1 -1
package/dist/app/assets/view/layout/SiteFooter.d.ts +2 -2
package/dist/app/assets/view/layout/SiteFooter.js +8 -3
package/dist/app/assets/view/layout/SiteFooter.js.map +1 -1
package/dist/app/assets/view/layout/SiteHeader.d.ts +2 -8
package/dist/app/assets/view/layout/SiteHeader.js +14 -9
package/dist/app/assets/view/layout/SiteHeader.js.map +1 -1
package/dist/app/assets/view/page-data.d.ts +2 -2
package/dist/app/assets/view/page-data.js.map +1 -1
package/dist/app/assets/view/sections/GettingStartedSection.d.ts +1 -1
package/dist/app/assets/view/sections/GettingStartedSection.js +21 -6
package/dist/app/assets/view/sections/GettingStartedSection.js.map +1 -1
package/dist/app/assets/view/sections/HeroSection.d.ts +2 -8
package/dist/app/assets/view/sections/HeroSection.js +12 -9
package/dist/app/assets/view/sections/HeroSection.js.map +1 -1
package/dist/app/assets/view/sections/LiveExampleSection.d.ts +2 -6
package/dist/app/assets/view/sections/LiveExampleSection.js +17 -7
package/dist/app/assets/view/sections/LiveExampleSection.js.map +1 -1
package/dist/app/assets/view/sections/PackageDocsSection.d.ts +1 -1
package/dist/app/assets/view/sections/PackageDocsSection.js +57 -20
package/dist/app/assets/view/sections/PackageDocsSection.js.map +1 -1
package/dist/app/assets/view/sections/SourceGuideSection.d.ts +2 -7
package/dist/app/assets/view/sections/SourceGuideSection.js +20 -8
package/dist/app/assets/view/sections/SourceGuideSection.js.map +1 -1
package/dist/app/index.d.ts +2 -8
package/dist/app/index.js +36 -11
package/dist/app/index.js.map +1 -1
package/dist/cli/index.d.ts +0 -3
package/dist/cli/index.js +6 -37
package/dist/cli/index.js.map +1 -1
package/dist/scaffold/index.d.ts +2 -13
package/dist/scaffold/index.js +36 -56
package/dist/scaffold/index.js.map +1 -1
package/dist/scripts/build.js +97 -28
package/dist/scripts/build.js.map +1 -1
package/dist/server/handler.d.ts +7 -0
package/dist/server/handler.js +60 -0
package/dist/server/handler.js.map +1 -0
package/package.json +25 -24
package/pnpm-workspace.yaml +0 -1
package/scaffold/AGENTS.md +23 -0
package/scaffold/index.ts +32 -60
package/scripts/build.ts +90 -30
package/server/handler.ts +2 -10
package/template-test/site.test.js +3 -1
package/tsconfig.site.json +1 -4
package/app/404.tsx +0 -28
package/app/assets/script/index.tsx +0 -13
package/app/assets/script/tasks/TaskView.tsx +0 -24
package/app/assets/view/CodeBlock.tsx +0 -17
package/app/assets/view/examples/tasks/TaskExample.tsx +0 -63
package/app/assets/view/layout/SiteFooter.tsx +0 -11
package/app/assets/view/layout/SiteHeader.tsx +0 -23
package/app/assets/view/sections/GettingStartedSection.tsx +0 -27
package/app/assets/view/sections/HeroSection.tsx +0 -21
package/app/assets/view/sections/LiveExampleSection.tsx +0 -29
package/app/assets/view/sections/PackageDocsSection.tsx +0 -69
package/app/index.tsx +0 -54
package/scaffold/no-jsx/README.md +0 -47
package/scaffold/no-jsx/app/404.ts +0 -10
package/scaffold/no-jsx/app/assets/view/examples/tasks/TaskExample.ts +0 -39
package/scaffold/no-jsx/app/index.ts +0 -58
package/tsconfig.site.no-jsx.json +0 -24

package/app/404.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import {html} from 'white-label-view/html';
+interface PageData {
+    cdn: string;
+    version: string;
+    www: string;
+}
+export default function NotFoundPage(data: Record<string, unknown>) {
+    const page = data as unknown as PageData;
+    return html`<html lang="en-US" dir="ltr">
+            <head>
+                <meta charset="utf-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="robots" content="noindex,follow">
+                <title>Page not found | White Label</title>
+                <link rel="stylesheet" href="${page.cdn}release/${page.version}/assets/style/global.css">
+            </head>
+            <body>
+                <a class="skip-link" href="#main">Skip to the message</a>
+                <main id="main" tabindex="-1" class="mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8">
+                    <h1 class="text-5xl font-extrabold tracking-tight">Page not found</h1>
+                    <p class="mt-6 text-lg">The requested page does not exist.</p>
+                    <p class="mt-6"><a class="font-bold underline" href="${page.www}">Return to the White Label starter</a></p>
+                </main>
+            </body>
+        </html>`;
+}

package/app/README.md CHANGED Viewed

@@ -1,10 +1,22 @@
 # White Label starter application
-This static starter was generated with the **JSX/TSX** template option. It uses TypeScript and the White Label JSX runtime for page and client-side View rendering, with Tailwind CSS 4 for styling. It makes no API or service calls.
+This static starter uses ordinary TypeScript and White Label View's first-party tagged HTML templates, with Tailwind CSS 4 for styling. It makes no API or service calls.
-JSX is optional in White Label. If you prefer plain TypeScript or want a third-party template engine to own rendering, generate with `--no-jsx` (or answer **No** to the generator's JSX question), then install and call that renderer from the View `template` function. The Model, View, Router, Mediator, progressive-enhancement behavior, and generated feature set remain equivalent.
+The rendering path is intentionally small and explicit:
-See [Template engines and JSX options](https://whitelabeljs.org/docs/view/#template-engines) for the tested third-party engines, rendering contract, and no-JSX setup.
+```ts
+import {html} from 'white-label-view/html';
+export default function Page(data: {title: string}) {
+    return html`<main><h1>${data.title}</h1></main>`;
+}
+```
+Dynamic text and quoted-attribute values are HTML-escaped by default. Use `attributes()` for conditional/opening-tag attributes. `unsafeHTML()` is an explicit trust boundary for application-owned content that is already trusted or sanitized; it is not a sanitizer.
+White Label View remains template-engine agnostic. If the application prefers JSX, Handlebars, Eta, EJS, Mustache, Nunjucks, Pug, or another renderer, add it to the application and return its rendered output from View's `template` function. JSX is a tested third-party option rather than a White Label runtime requirement.
+See [Template engines](https://whitelabeljs.org/docs/view/#template-engines) for tested integrations and rendering/security boundaries.
 ## Start developing
@@ -42,11 +54,37 @@ python3 -m http.server 8080 --directory _deploy
 Open `http://localhost:8080/`.
-Serve `_deploy` as the web server's document root. Do **not** browse to `_deploy/index.html` through a server rooted at the project directory (for example, `/white-label-site/_deploy/index.html`), because generated asset URLs such as `/release/local/assets/style/global.css` are intentionally rooted at the deployed site's origin and will otherwise return 404 responses.
+Serve `_deploy` as the web server's document root. Do **not** browse to `_deploy/index.html` through a server rooted at the project directory, because generated asset URLs such as `/release/local/assets/style/global.css` are intentionally rooted at the deployed site's origin.
-The build output is `_deploy`. The test suite checks the starter content, progressive interaction, production build, accessibility/indexability signals, serverless request isolation, Web-standard bundling, and serverless size/startup budgets.
+The build output is `_deploy`. The test suite checks starter content, progressive interaction, production build behavior, accessibility/indexability signals, serverless request isolation, Web-standard bundling, and serverless size/startup budgets.
+Pages live in `app/*.ts`, page data lives in `app/assets/data/view`, browser code lives in `app/assets/script`, the provider-neutral serverless example lives in `server/handler.ts`, and shared styles live in `app/assets/style`.
+## Simple View click event
+View lifecycle hooks are the simplest place to own a browser listener:
+```ts
+import View from 'white-label-view';
+class ButtonView extends View {
+    handleClick = () => {
+        console.log('Clicked');
+    };
+    addListeners() {
+        this.element.addEventListener('click', this.handleClick);
+        return this;
+    }
+    removeListeners() {
+        this.element.removeEventListener('click', this.handleClick);
+        return this;
+    }
+}
+```
-Pages live in `app/*.tsx`, page data lives in `app/assets/data/view`, browser code lives in `app/assets/script`, the provider-neutral serverless example lives in `server/handler.ts`, and shared styles live in `app/assets/style`. TypeScript is configured with `jsx: react-jsx` and `jsxImportSource: white-label-view`, so this scaffold's JSX does not require React.
+The same callback reference is used for both registration and cleanup. View calls `removeListeners()` before replacement or destruction.
 ## Serverless / function runtimes
@@ -74,4 +112,4 @@ npm run build -- --version=release-1 --production=true --site-url=https://www.ex
 Build flags use `--key=value`. `--www` and `--cdn` default to `/`; `--version` selects `_deploy/release/<version>/assets`; without a version, the current timestamp is used. Production builds require a real HTTPS `--site-url` for canonical, Open Graph, robots, and sitemap output. Each build replaces `_deploy`.
-Edit TypeScript/TSX sources, not `dist`. JSX expressions are escaped by the White Label runtime; reserve `raw()` for trusted application-authored markup. Replace the starter copy with application content while retaining the tested accessibility and progressive-enhancement patterns.
+Edit TypeScript sources, not `dist`. Keep untrusted values in normal `html` interpolations; use `unsafeHTML()` only when the application has deliberately established trust or sanitization. Replace the starter copy with application content while retaining the tested accessibility and progressive-enhancement patterns.

package/{scaffold/no-jsx/app → app}/assets/script/index.ts RENAMED Viewed

@@ -1,6 +1,7 @@
 /** @module app/assets/script/index */
 import {initializeTaskApplication} from './tasks/TaskApplication.js';
+/** Start the feature composition for this document. */
 export {initializeTaskApplication} from './tasks/TaskApplication.js';
 export {normalizeTaskFilter} from './tasks/TaskRouter.js';

package/app/assets/script/tasks/TaskApplication.ts CHANGED Viewed

@@ -32,25 +32,25 @@ export function initializeTaskApplication(documentRoot: Document): TaskApplicati
     const status = parentElement.querySelector<HTMLElement>('[data-task-status]')!;
     const updateStatus = (): void => {status.textContent = describeTaskStatus(model.get());};
-    const addTask = (title: string): void => {model.add(title); updateStatus();};
-    const toggleTask = (id: number): void => {model.toggle(id); updateStatus();};
-    const setFilter = (filter: 'all' | 'active' | 'completed'): void => {model.setFilter(filter); updateStatus();};
-    mediator.on('task:add', addTask);
-    mediator.on('task:toggle', toggleTask);
-    mediator.on('task:filter', setFilter);
+    const addTask = (event: CustomEvent<string>): void => {model.add(event.detail); updateStatus();};
+    const toggleTask = (event: CustomEvent<number>): void => {model.toggle(event.detail); updateStatus();};
+    const setFilter = (event: CustomEvent<'all' | 'active' | 'completed'>): void => {model.setFilter(event.detail); updateStatus();};
+    mediator.addEventListener('task:add', addTask);
+    mediator.addEventListener('task:toggle', toggleTask);
+    mediator.addEventListener('task:filter', setFilter);
     const delegated = view.delegate(parentElement);
     delegated.on('submit', '[data-task-form]', (event: Event) => {
         event.preventDefault();
         const form = event.target as HTMLFormElement;
         const input = form.querySelector<HTMLInputElement>('[name="task"]')!;
-        mediator.emit('task:add', input.value);
+        mediator.dispatchEvent(new CustomEvent('task:add', {detail: input.value}));
         parentElement.querySelector<HTMLInputElement>('[name="task"]')!.focus();
     });
     delegated.on('change', '[data-task-toggle]', (event: Event) => {
         const input = event.target as HTMLInputElement;
         const id = Number(input.dataset.taskId);
-        mediator.emit('task:toggle', id);
+        mediator.dispatchEvent(new CustomEvent('task:toggle', {detail: id}));
         const focusTarget = parentElement.querySelector<HTMLInputElement>(`[data-task-id="${id}"]`)
             ?? parentElement.querySelector<HTMLAnchorElement>('[data-task-filter][aria-current="page"]')!;
         focusTarget.focus();
@@ -66,9 +66,9 @@ export function initializeTaskApplication(documentRoot: Document): TaskApplicati
         destroy() {
             delegated.clear();
             router.destroy();
-            mediator.removeListener('task:add', addTask);
-            mediator.removeListener('task:toggle', toggleTask);
-            mediator.removeListener('task:filter', setFilter);
+            mediator.removeEventListener('task:add', addTask);
+            mediator.removeEventListener('task:toggle', toggleTask);
+            mediator.removeEventListener('task:filter', setFilter);
             view.destroy();
             model.destroy();
             mediator.destroy();

package/app/assets/script/tasks/TaskMediator.ts CHANGED Viewed

@@ -1,20 +1,15 @@
 import Mediator from 'white-label-mediator';
 import type {TaskFilter} from '../../view/examples/tasks/task-state.js';
-/**
- * Document the event protocol in one place even though the currently installed
- * Mediator exposes the EventEmitter-compatible runtime without a generic map.
- * Keeping names and payloads explicit still gives learners one clear contract
- * to follow when tracing the example.
- */
+/** Application event vocabulary shared by the generated task modules. */
 export type TaskEvents = {
-    'task:add': [title: string];
-    'task:filter': [filter: TaskFilter];
-    'task:toggle': [id: number];
+    'task:add': string;
+    'task:filter': TaskFilter;
+    'task:toggle': number;
 };
-export type TaskMediator = Mediator;
+export type TaskMediator = Mediator<TaskEvents>;
 export function createTaskMediator(): TaskMediator {
-    return new Mediator().initialize();
+    return new Mediator<TaskEvents>().initialize();
 }

package/app/assets/script/tasks/TaskRouter.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export function createTaskRouter(documentRoot: Document, mediator: TaskMediator)
     const route = (_scope: Element | null, location: {data: {query: Record<string, string>}}): void => {
         const filter = normalizeTaskFilter(location.data.query.tasks);
         const restoreFocus = documentRoot.activeElement?.hasAttribute('data-task-filter') === true;
-        mediator.emit('task:filter', filter);
+        mediator.dispatchEvent(new CustomEvent('task:filter', {detail: filter}));
         if (restoreFocus) {documentRoot.querySelector<HTMLAnchorElement>(`[data-task-filter="${filter}"]`)!.focus();}
     };
     router.routes = {'/': route, defaultRoute: route};

package/{scaffold/no-jsx/app → app}/assets/script/tasks/TaskView.ts RENAMED Viewed

@@ -3,7 +3,7 @@ import TaskExample from '../../view/examples/tasks/TaskExample.js';
 import type {TaskState} from '../../view/examples/tasks/task-state.js';
 import type TaskModel from './TaskModel.js';
-/** Create the task view without JSX/TSX syntax. */
+/** Adopt the build-time task root and reuse the same tagged template for model updates. */
 export function createTaskView(parentElement: HTMLElement, model: TaskModel): View {
     const element = parentElement.querySelector<HTMLElement>('[data-task-app]');
     if (!element) {throw new TypeError('Task example requires its static task-app root');}

package/app/assets/view/CodeBlock.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import {html, type HTMLMarkup} from 'white-label-view/html';
+export const syntax = {
+    keyword: 'code-syntax-keyword',
+    type: 'code-syntax-type',
+    value: 'code-syntax-value',
+    muted: 'code-syntax-muted'
+};
+/** Render a readable code example with stable line numbers and caller-supplied syntax spans. */
+export default function CodeBlock({lines}: {lines: HTMLMarkup[]}) {
+    return html`<pre class="code-block"><code>${lines.map((line, index) => html`<span class="code-block__line">
+                <span aria-hidden="true" class="code-block__number">${index + 1}</span><span>${line}</span>
+            </span>`)}</code></pre>`;
+}

package/app/assets/view/examples/tasks/TaskExample.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import {attributes, html} from 'white-label-view/html';
+import {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';
+const filters: TaskFilter[] = ['all', 'active', 'completed'];
+/** Render the task example from state for both build-time HTML and browser updates. */
+export default function TaskExample({state}: {state: TaskState}) {
+    const visibleTasks = getVisibleTasks(state);
+    const completed = state.tasks.filter(task => task.complete).length;
+    return html`<section class="task-app" data-task-app aria-label="Interactive task example">
+            <form class="task-form" data-task-form action="#example" method="get">
+                <label for="task-title">New task</label>
+                <div class="task-form__controls">
+                    <input id="task-title" name="task" type="text" autocomplete="off" required>
+                    <button type="submit">Add task</button>
+                </div>
+            </form>
+            <nav class="task-filters" aria-label="Filter tasks">
+                ${filters.map(filter => html`<a ${attributes({
+                    href: `/?tasks=${filter}#example`,
+                    'data-task-filter': filter,
+                    'data-pushstate': true,
+                    'aria-current': state.filter === filter ? 'page' : 'false'
+                })}>${filter.charAt(0).toUpperCase()}${filter.slice(1)}</a>`)}
+            </nav>
+            <ul class="task-list">
+                ${visibleTasks.map(task => html`<li>
+                        <label>
+                            <input ${attributes({
+                                type: 'checkbox',
+                                checked: task.complete,
+                                'data-task-toggle': true,
+                                'data-task-id': task.id
+                            })}>
+                            <span>${task.title}</span>
+                        </label>
+                    </li>`)}
+            </ul>
+            <dl class="demo__trace">
+                <div><dt>Router</dt><dd>/?tasks=${state.filter}</dd></div>
+                <div><dt>Mediator</dt><dd>task:* application events</dd></div>
+                <div><dt>Model</dt><dd>${state.tasks.length} tasks · ${completed} complete</dd></div>
+                <div><dt>View</dt><dd>${visibleTasks.length} tasks rendered</dd></div>
+            </dl>
+        </section>`;
+}

package/app/assets/view/examples/tasks/task-state.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/** Shared state shape used by build-time JSX and the browser application. */
+/** Shared state shape used by build-time tagged HTML and the browser application. */
 export type TaskFilter = 'all' | 'active' | 'completed';
 export interface TaskItem {

package/app/assets/view/layout/SiteFooter.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import {html} from 'white-label-view/html';
+/** Keep reusable static page chrome as a small tagged-template function. */
+export default function SiteFooter() {
+    return html`<footer class="site-footer">
+            <div class="container site-footer__inner">
+                <p>White Label. Framework-independent TypeScript building blocks.</p>
+                <a href="#top">Back to top</a>
+            </div>
+        </footer>`;
+}

package/app/assets/view/layout/SiteHeader.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import {html} from 'white-label-view/html';
+/** Static navigation remains ordinary crawlable HTML; JavaScript enhances only opted-in links. */
+export default function SiteHeader() {
+    return html`<header class="site-header">
+            <div class="container site-header__inner">
+                <a class="wordmark" href="#top">White Label</a>
+                <nav aria-label="Primary navigation">
+                    <a href="#example">Example</a>
+                    <a href="#packages">Packages</a>
+                    <a href="#source">Source</a>
+                    <a href="#start">Get started</a>
+                    <a href="https://github.com/bshack/white-label">GitHub</a>
+                </nav>
+            </div>
+        </header>`;
+}

package/app/assets/view/page-data.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 /**
  * Build-time data available to every page template.
  *
- * Keeping this contract separate from the page component makes the top-level
- * JSX read like application composition instead of deployment plumbing.
+ * Keeping this contract separate from the renderer keeps top-level tagged
+ * HTML focused on application composition instead of deployment plumbing.
  */
 export interface PageData {
     cdn: string;

package/app/assets/view/sections/GettingStartedSection.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import {html} from 'white-label-view/html';
+import CodeBlock, {syntax} from '../CodeBlock.js';
+/** Keep the shortest path from generator install to a verified local build visible. */
+export default function GettingStartedSection() {
+    return html`<section class="section" id="start" aria-labelledby="start-title">
+            <div class="container start-grid">
+                <div class="section-intro">
+                    <p class="eyebrow">Get started</p>
+                    <h2 id="start-title">Create a project with the generator.</h2>
+                    <p>The generated project is static-first, TypeScript-first, accessible by default, and ready for application-specific code.</p>
+                </div>
+                <div>
+                    <p class="code-label">Create a project</p>
+                    ${CodeBlock({lines: [html`<span class="${syntax.type}">npx</span> generator-white-label`]})}
+                    <p class="code-label">Then develop</p>
+                    ${CodeBlock({lines: [
+                        html`<span class="${syntax.type}">npm</span> ci`,
+                        html`<span class="${syntax.type}">npm</span> test`,
+                        html`<span class="${syntax.type}">npm</span> run build -- --version=<span class="${syntax.value}">local</span>`
+                    ]})}
+                    <p><a href="https://github.com/bshack/white-label#readme">Read the complete generator documentation</a></p>
+                </div>
+            </div>
+        </section>`;
+}

package/app/assets/view/sections/HeroSection.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import {html} from 'white-label-view/html';
+/** Static presentation stays a plain tagged-template function; View is only needed for lifecycle/state. */
+export default function HeroSection() {
+    return html`<section class="hero" id="top" aria-labelledby="hero-title">
+            <div class="container hero__inner">
+                <h1 id="hero-title">Small pieces.<br>Complete applications.</h1>
+                <p class="hero__lede">Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation.</p>
+                <div class="hero__links">
+                    <a class="primary-link" href="#example">See the example</a>
+                    <a href="#start">Install the generator</a>
+                </div>
+            </div>
+        </section>`;
+}

package/app/assets/view/sections/LiveExampleSection.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import {html} from 'white-label-view/html';
+import TaskExample from '../examples/tasks/TaskExample.js';
+import {createInitialTaskState, describeTaskStatus} from '../examples/tasks/task-state.js';
+/** Render useful initial HTML with the same tagged template reused by Browser View. */
+export default function LiveExampleSection() {
+    const state = createInitialTaskState();
+    return html`<section class="section" id="example" aria-labelledby="example-title">
+            <div class="container">
+                <div class="section-intro">
+                    <p class="eyebrow">Live example</p>
+                    <h2 id="example-title">Four packages. One small application.</h2>
+                    <p>Add a task, toggle its state, or change the filter. Router translates the URL into intent, Mediator coordinates actions, Model owns state, and View keeps the interface in sync.</p>
+                </div>
+                <div class="demo" data-task-example>
+                    ${TaskExample({state})}
+                    <p class="visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-task-status>
+                        ${describeTaskStatus(state)}
+                    </p>
+                </div>
+            </div>
+        </section>`;
+}

package/app/assets/view/sections/PackageDocsSection.ts ADDED Viewed

@@ -0,0 +1,69 @@
+import {html} from 'white-label-view/html';
+import CodeBlock, {syntax} from '../CodeBlock.js';
+const repositories = {
+    mediator: 'https://github.com/bshack/white-label-mediator',
+    model: 'https://github.com/bshack/white-label-model',
+    router: 'https://github.com/bshack/white-label-router',
+    view: 'https://github.com/bshack/white-label-view'
+};
+/** Package documentation stays close to the example it describes. */
+export default function PackageDocsSection() {
+    return html`<section class="section" id="packages" aria-labelledby="packages-title">
+            <div class="container">
+                <div class="section-intro">
+                    <p class="eyebrow">Documentation</p>
+                    <h2 id="packages-title">The core flow stays explicit.</h2>
+                    <p>Each package has one job, can be used independently, and stays easy to replace or test because application concerns are not hidden behind a framework.</p>
+                </div>
+                <div class="architecture"><ol>
+                    <li><strong>Router</strong><span>turns a URL into application intent</span></li>
+                    <li><strong>Mediator</strong><span>coordinates that intent between modules</span></li>
+                    <li><strong>Model</strong><span>stores and publishes application state</span></li>
+                    <li><strong>View</strong><span>renders the resulting interface</span></li>
+                </ol></div>
+                <div class="docs-grid">
+                    <article>
+                        <p class="eyebrow">Model</p><h3>State is observable, not magical.</h3>
+                        ${CodeBlock({lines: [
+                            html`<span class="${syntax.keyword}">const</span> model = <span class="${syntax.keyword}">new</span> <span class="${syntax.type}">Model</span>({count: 0});`,
+                            html`model.addEventListener(<span class="${syntax.value}">'change'</span>, event =&gt; render(event.detail));`,
+                            html`model.update({count: 1});`
+                        ]})}
+                        <p><a href="${repositories.model}">Model documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">View</p><h3>Tagged HTML is the first-party template syntax.</h3>
+                        ${CodeBlock({lines: [
+                            html`<span class="${syntax.keyword}">import</span> {html} from <span class="${syntax.value}">'white-label-view/html'</span>;`,
+                            html`<span class="${syntax.keyword}">const</span> view = <span class="${syntax.keyword}">new</span> <span class="${syntax.type}">View</span>({`,
+                            html`  model,`,
+                            html`  template: state =&gt; html\`${'<p>'}\${state.count}${'</p>'}\``,
+                            html`}).initialize();`
+                        ]})}
+                        <p><a href="${repositories.view}">View documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">Mediator</p><h3>Modules communicate through events.</h3>
+                        ${CodeBlock({lines: [
+                            html`mediator.addEventListener(<span class="${syntax.value}">'counter:increment'</span>, increment);`,
+                            html`mediator.dispatchEvent(<span class="${syntax.keyword}">new</span> <span class="${syntax.type}">CustomEvent</span>(<span class="${syntax.value}">'counter:increment'</span>));`
+                        ]})}
+                        <p><a href="${repositories.mediator}">Mediator documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">Router</p><h3>Routes describe intent.</h3>
+                        ${CodeBlock({lines: [
+                            html`router.routes = {`,
+                            html`  <span class="${syntax.value}">'/'</span>: (_scope, location) =&gt; {`,
+                            html`    mediator.dispatchEvent(<span class="${syntax.keyword}">new</span> <span class="${syntax.type}">CustomEvent</span>(<span class="${syntax.value}">'filter:set'</span>, {detail: location.data.query.filter}));`,
+                            html`  }`,
+                            html`};`
+                        ]})}
+                        <p><a href="${repositories.router}">Router documentation</a></p>
+                    </article>
+                </div>
+            </div>
+        </section>`;
+}

package/app/assets/view/sections/{SourceGuideSection.tsx → SourceGuideSection.ts} RENAMED Viewed

@@ -1,28 +1,23 @@
-/**
- * Point learners at the implementation itself.
- *
- * The landing page is intentionally organized so each path answers a different
- * question: composition, rendering, state, coordination, routing, or testing.
- */
+import {html} from 'white-label-view/html';
+/** Point learners at the implementation paths that demonstrate each responsibility. */
 export default function SourceGuideSection() {
-    return (
-        <section className="section" id="source" aria-labelledby="source-title">
-            <div className="container start-grid">
-                <div className="section-intro">
-                    <p className="eyebrow">Read the source</p>
+    return html`<section class="section" id="source" aria-labelledby="source-title">
+            <div class="container start-grid">
+                <div class="section-intro">
+                    <p class="eyebrow">Read the source</p>
                     <h2 id="source-title">This site is part of the documentation.</h2>
                     <p>The landing page is built with the same White Label packages it teaches. Start at the page composition, then follow the imports into the interactive example.</p>
                 </div>
-                <div className="source-paths">
+                <div class="source-paths">
                     <dl>
-                        <div><dt>Page composition</dt><dd><code>app/index.tsx</code></dd></div>
-                        <div><dt>Static JSX views</dt><dd><code>app/assets/view/</code></dd></div>
+                        <div><dt>Page composition</dt><dd><code>app/index.ts</code></dd></div>
+                        <div><dt>Tagged HTML views</dt><dd><code>app/assets/view/</code></dd></div>
                         <div><dt>Task application</dt><dd><code>app/assets/script/tasks/</code></dd></div>
                         <div><dt>Integration tests</dt><dd><code>test/app.test.js</code></dd></div>
                     </dl>
                     <p><a href="https://github.com/bshack/white-label/tree/master/app">Browse the application source</a></p>
                 </div>
             </div>
-        </section>
-    );
+        </section>`;
 }

package/app/index.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import {html, unsafeHTML} from 'white-label-view/html';
+import SiteFooter from './assets/view/layout/SiteFooter.js';
+import SiteHeader from './assets/view/layout/SiteHeader.js';
+import type {PageData} from './assets/view/page-data.js';
+import GettingStartedSection from './assets/view/sections/GettingStartedSection.js';
+import HeroSection from './assets/view/sections/HeroSection.js';
+import LiveExampleSection from './assets/view/sections/LiveExampleSection.js';
+import PackageDocsSection from './assets/view/sections/PackageDocsSection.js';
+import SourceGuideSection from './assets/view/sections/SourceGuideSection.js';
+function structuredDataScript(value: unknown) {
+    const json = JSON.stringify(value).replaceAll('<', '\\u003c');
+    return unsafeHTML(`<script type="application/ld+json">${json}</script>`);
+}
+/** Compose the static page from small tagged-template functions. */
+export default function IndexPage(data: Record<string, unknown>) {
+    const page = data as unknown as PageData;
+    return html`<html id="index" lang="en-US" dir="ltr">
+            <head>
+                <meta charset="utf-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <title>${page.title}</title>
+                <meta name="description" content="${page.meta.description}">
+                <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
+                <link rel="canonical" href="${page.siteUrl}/">
+                <meta property="og:title" content="${page.title}">
+                <meta property="og:description" content="${page.meta.description}">
+                <meta property="og:type" content="website">
+                <meta property="og:url" content="${page.siteUrl}/">
+                <link rel="stylesheet" href="${page.cdn}release/${page.version}/assets/style/global.css" media="all">
+                <link rel="stylesheet" href="${page.cdn}release/${page.version}/assets/style/print.css" media="print">
+                ${structuredDataScript(page.structuredData)}
+            </head>
+            <body itemscope itemtype="https://schema.org/WebPage">
+                <a class="skip-link" href="#main">Skip to content</a>
+                ${SiteHeader()}
+                <main id="main" tabindex="-1">
+                    ${HeroSection()}
+                    ${LiveExampleSection()}
+                    ${PackageDocsSection()}
+                    ${SourceGuideSection()}
+                    ${GettingStartedSection()}
+                </main>
+                ${SiteFooter()}
+                <script src="${page.cdn}release/${page.version}/assets/script/index.compiled.js" defer></script>
+            </body>
+        </html>`;
+}