Marcos Paulo
103 lines
5.1 KiB
Markdown
103 lines
5.1 KiB
Markdown
# Task 15d — Assemble /full-guide/
|
||
|
||
**Agent**: `page-migrator` · **Model**: **Codex** **Depends on**: 05b, 10, 13,
|
||
15a, 15b, 15c · **Parallel with**: 16 · **Blocks**: 15e, 18, 19 **Worktree**:
|
||
`.agents/scripts/worktree.sh start 15d page-full-guide`
|
||
|
||
## Goal
|
||
|
||
`src/pages/full-guide.astro`. 22 KB of HTML, bilingual throughout, everything
|
||
interactive already built by 15a/15b/15c and every block already built by
|
||
task 10. **This task is assembly.** If you find yourself writing a new island,
|
||
stop — it belongs to one of the earlier briefs and you should report the gap
|
||
instead.
|
||
|
||
Read the reports from 15a, 15b and 15c first. They state their props and the
|
||
language contract.
|
||
|
||
## Islands and nothing else
|
||
|
||
| Island | Directive | From |
|
||
| ------------------------------- | ---------------- | ---- |
|
||
| Guide selector (one, ×9 groups) | `client:visible` | 15a |
|
||
| Copy-prompt buttons + progress | `client:visible` | 15b |
|
||
| Language toggle | `client:idle` | 15c |
|
||
|
||
Everything else is server-rendered.
|
||
|
||
## Asserted by verify.mjs — all must survive
|
||
|
||
`const phases`, `const handsOnPrompts`, `const modelGuide`,
|
||
`const skillSources`, `const skillInstallPrompts`, `render('plan')`,
|
||
`renderTree`, `renderWorker`, `renderRoute`, `renderModelProvider`,
|
||
`renderEffort`, `renderSkillFile`, `renderSkillWorkflow`, `renderCommonSkill`,
|
||
`renderHandsOn`, `copyPrompt`, plus
|
||
`data-copy-target="prompt-install-skills|prompt-basic|prompt-skills"`,
|
||
`hands-on/starter/`, `additional-reading.md`, `role="tablist"`, `<table>`.
|
||
|
||
Implementation-detail assertions, deliberately. **Never delete one.** Task 19
|
||
re-points them to output-level checks; you do not.
|
||
|
||
## Watch for
|
||
|
||
- `hands-on/starter/` is a **lab fixture**. Link to it, ship it as a static
|
||
asset, do not componentize it. Same for `hands-on/rules/`.
|
||
- `renderHandsOn` takes no argument — it is not part of 15a's selector pattern.
|
||
Check whether 15a covered it; if not, it is yours, and say so in the report.
|
||
- Do not delete `responsive.css` here. That is 15e, and it needs screenshots.
|
||
|
||
## Done when
|
||
|
||
- [ ] Snapshot diff against `.agents/snapshots/` empty
|
||
- [ ] Every interaction works: all nine selector groups, both languages, all
|
||
three copy buttons
|
||
- [ ] Keyboard: arrows move between tabs; focus visible throughout
|
||
- [ ] JS payload **smaller** than today's 50 KB — content is static now
|
||
- [ ] Screenshots match at 560 / 800 / 1100 / 1600 px
|
||
- [ ] `pnpm run gate` green — the full gate, not `verify` + `audit-ui` alone
|
||
- [ ] 42 assertions intact
|
||
|
||
## What 15a, 15b and 15c actually shipped
|
||
|
||
Read `.agents/context/content-i18n.md` first — it is the language contract and
|
||
it is binding on this task.
|
||
|
||
- **`src/components/islands/GuideSelector.astro`** — one island, all nine
|
||
groups. Render it as
|
||
`<GuideSelector rootSelector="#full-guide" data={...} />`. `data` needs
|
||
`phases`, `workers`, `trees`, `routes`, `providers`, `efforts`, `skillFiles`,
|
||
`skillWorkflow`, `commonSkills` and a bilingual `labels` object; the
|
||
`GuideSelectorData` interface at the top of the file is the exact shape. You
|
||
server-render each group's shell and its initial detail panel, keeping today's
|
||
`data-*` hooks and `.active` state. Mark each group `role="tablist"` and its
|
||
controls `role="tab"` or the keyboard handler will not bind.
|
||
- **`src/components/islands/LanguageToggle.astro`** — render each localized
|
||
fragment twice, with `data-language-content="en"` or `"pt"` on the outer
|
||
element. The toggle flips `hidden` on those, sets `<html lang>`, and fires
|
||
`ai-for-dummies:languagechange` on `window`. It is a plain `.astro` island
|
||
that defers its own setup with `requestIdleCallback`; **do not** put
|
||
`client:idle` on it — that directive is framework-components only.
|
||
- **`src/components/islands/CopyPrompt.astro`** — one per button. Pass
|
||
`target="prompt-install-skills" | "prompt-basic" | "prompt-skills"`. Render
|
||
`<p id="copy-status" role="status" aria-live="polite">` exactly once on the
|
||
page; the island writes into it. Fill the `<pre><code id="prompt-…">` bodies
|
||
from the `handsOnPrompts` and `skillInstallPrompts` collections — 15b verified
|
||
those are byte-identical to the legacy `app.js` constants, and the clipboard
|
||
copies whatever you render, so do not reformat them.
|
||
- **`src/components/islands/ReadingProgress.astro`** — replaces the legacy
|
||
`<div class="reading-progress">` at the top of the page.
|
||
|
||
Nothing else is missing. If you are about to write an island, you are doing
|
||
another task's work — report the gap instead.
|
||
|
||
## Two things to expect
|
||
|
||
- **The snapshot will not match by construction.** Dual-locale rendering emits
|
||
both languages into the HTML where today's page emits English plus a
|
||
Portuguese map inside `app.js`. Compare _rendered, language-filtered_ output
|
||
against today's page, and if `.agents/snapshots/` needs regenerating, say so
|
||
explicitly in your report with what changed and why — do not quietly rewrite a
|
||
snapshot to make a diff go away.
|
||
- **`renderHandsOn` takes no argument** and is not part of GuideSelector's
|
||
nine-group pattern. It is yours. Its name is asserted by `verify.mjs`.
|