[taras]

Why

Home.dc.html in the Home design project is the current design for executable.md's landing page, and the repo was still serving the previous one. This imports it.

What changes

Before: the home page opened on "Turn documentation into repeatable workflows" and ran through How it works, See it, Economics, Where it fits, One document two models, Get started, and Early, and open — sections built around an instruction-review example. The header linked #how, #example, and #economics.

After: the page opens on "Stop rolling the dice in your workflows" and runs through #readme (the README as a CLI), #agent, #runtime, #compose, #durability, and #install. The header is down to Docs, GitHub, and the theme toggle — the in-page section anchors are gone, since repeating a short page's own sections in the chrome is noise. The ids stay, so deep links still land and the hero's Install button still reaches #install.

No stylesheet change. The design system's _ds/tokens/* and _ds/patterns/* are transcribed verbatim from site/assets/styles.css, and every class the mock reaches for — .section, .section-head, .panel, .code-panel, .card, .grid, .eyebrow-mark, .pill, .chip, .link-rule, .btn-*, .tok-* — already exists there.

How it works

Home.dc.html <x-import …> → the class each DS component emits → existing site/components

The mock composes <x-import component-from-global-scope="…Header | Button | Panel | Card | CodeBlock | CommandBlock">. _ds_bundle.js is the authority on what each expands to, so the mapping is mechanical: Button variant="primary" size="lg" is btn btn-primary btn-lg push, Panel title= is .panel > .panel-head + .panel-body, CodeBlock is the repo's <CodeBlock>, and CommandBlock in its children form (the only form this mock uses) is <CodeBlock command>.

The mock's style-hover is a design-canvas pseudo-state, not CSS. The one place it appears — the version chip's link, which inherits the eyebrow's --dim and picks up the accent on hover — becomes a page-local .release-link rule.

Review guide

Start with: site/routes/index.tsx, the Source component and the Tok type

Then review:

1. Source / Terminal — how document source and terminal slabs reach <pre><code>
2. The *_MD token arrays — the twenty-one code samples, as data
3. The section markup, in mock order: hero, #readme, #agent, #runtime, #compose, #durability, #install
4. site/components/Header.tsx — the nav, now Docs / GitHub / toggle

Look carefully at:

• Whitespace inside <pre>. JSX drops whitespace-only text that contains a newline, so lines are joined with explicit {"\n"} and every leading indent lives inside a token string. A stray literal space or newline in that markup is invisible in review and visible on the page — the rendered-output check below is what catches it.

Scope

Included

• The home route, rewritten from Home.dc.html.
• The header nav, trimmed to Docs and GitHub.

Intentionally unchanged

• site/assets/styles.css — the design system holds no rule the repo lacks.
• The shared footer. The mock replaces it with a minimal Made with ❤️ Effection. bar. That is applied to the home route only, so /docs still renders the full <Footer> and the two now differ. Extending it to docs is a separate call.
• routes/_app.tsx metadata — the title and description still read "turn documentation into repeatable workflows". The mock says nothing about <head>.
• islands/CopyCommand.tsx — left in place, but now unreferenced; see below.
• Home-print.dc.html and Recipes.dc.html in the same design project.

New abstractions

• Source + the Tok token type exist because the mock carries twenty-one code samples. The previous page hand-wrote two of them as span trees (ReviewDocument, HelloWorld); at this count that stops being readable. Consumers are every CodeBlock on the page.

• Terminal, Chain, Descent, Step, Prompt, Term are small named pieces of repeated mock markup, each used two or more times.

• Each new abstraction has multiple concrete uses or a clear justification.

• No speculative functionality is included.

How to verify it

• deno fmt --check . && deno lint . && deno check and deno task build in site/ — green. (The four root deno tasks skip site/; it has its own gate.)
• Rendered-output check: served the production build and extracted every <pre><code> from /. All twenty-one blocks come out matching the mock exactly, with no stray blank lines or leading spaces — this is what fails if the JSX whitespace handling above is wrong.
• Prose and section order extracted from the same response and compared against the mock; all six section ids resolve, and #install is the only remaining in-page anchor link.
• /docs and /docs/reference still return 200, since Header is shared.

Risks and limitations

• The install command lost its copy button. The mock uses CommandBlock's children form everywhere, which is a plain terminal slab; the previous page used the CopyCommand island for curl … | sh. Implemented as designed, but it is a real usability loss on the one command people are meant to copy. The design system's CommandBlock supports a lines + copyable variant if we want it back; islands/CopyCommand.tsx is still in the tree for that reason.
• Two different footers across the site until the docs question above is settled.
• Dropping the section anchors means the only way to reach a section is scrolling or a link from elsewhere. That is the intent, but it is the piece most likely to be missed.
• The hero's version chip is hardcoded to v0.8.1, matching packages/cli/deno.json. It will need bumping with the next release.

Scope confirmation

• Every changed file supports the purpose described above.
• Unrelated cleanup and formatting changes are excluded.
• Generated or mechanical changes are clearly identified.
• The description matches the final diff and test results.

[github-actions]

PR #529: 🎨 Rebuild the home page from its design canvas, and aim the nav at its sections

2 files, +888 / -645

Scope

🔴 PR has 1533 lines changed. Split into focused PRs.

🟡 1533 lines changed. PRs under 400 receive more thorough review.

🟡 Large PR with no linked issue.

Structural

✅ No structural bloat detected.

Slop

✅ Slop indicators look low.

Static Analysis

✅ Oxlint found no issues.

Correctness

No extraneous code patterns detected.