Two islands extracted from app.js for the full-guide migration (15d):
- CopyPrompt: one instance per button. Reads #<target>.textContent,
copies via navigator.clipboard.writeText with a document.execCommand
textarea fallback (kept because workshop venues serve the site over
plain HTTP, where the clipboard API is undefined — deleting the
fallback silently breaks the lab). Writes a bilingual result string
to the page-owned #copy-status live region and swaps the <span> to
COPIED/COPIADO for 1800ms. Language comes from document.documentElement
.lang via a MutationObserver, so 15c's toggle stays the single
mechanism.
- ReadingProgress: renders .reading-progress span and attaches a passive
scroll listener that mirrors the existing app.js line 406 handler.
Both scripts use <script is:inline> with a wire-once window flag, so a
page that mounts the same island multiple times still ends up with
exactly one set of listeners.
Not done in this task:
- app.js copyPrompt and reading-progress lines stay intact (verify.mjs
still asserts the copyPrompt token against app.js; the verification-
engineer owns that swap, scheduled for 15d)
- src/pages/full-guide.astro (15d)
- verify.mjs, tokens.css, src/content/config.ts
- reformat of app.js
For 15d:
- import CopyPrompt three times (one per target: prompt-install-skills,
prompt-basic, prompt-skills)
- render <p id="copy-status" role="status" aria-live="polite"></p>
once on the page; the island writes to it
- import ReadingProgress and place it where the current .reading-
progress div sits
- prompt bodies for the <pre><code id="prompt-..."> elements come
from src/content/{handsOnPrompts,skillInstallPrompts}; verified
byte-equal to app.js — what lands on the clipboard is whatever
those elements contain
For 15c:
- language mechanism is document.documentElement.lang via MutationObserver;
do not invent a parallel signal
Co-Authored-By: Claude Code <noreply@anthropic.com>
Marcos Paulo