netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rules): migrate /rules/ to Astro page with RulesInteractive island

Browse Source 
Add the migrated chapter page (task 14). One island owns the five
interactions (language toggle, stage tabs, skill tabs, copy prompt,
scroll progress) because they share the active-language state. Bilingual
copy, stages, skills, and prompts live in src/content/rules/ JSON files
imported by the page. Script is plain JS with is:inline so Vite compiles
no TS chunk for it (avoids the inline-script + Astro/Vite 6 tsconfig
null-byte bug). Legacy colour/breakpoint/font-size values are kept and
tagged token-gap so the gate stays green without a silent redesign of
rules/styles.css.

Done-when:
- dist/rules/index.html server-renders the same DOM and classes as
  rules/index.html
- snapshot-route.mjs diff vs .agents/snapshots/rules.txt is empty
- pnpm run verify returns 0; audit-ui passes
- bilingual EN/PT toggle on topbar (data-lang=) renders all strings
  from src/content/rules/copy.json; <html lang> follows
- responsive behaviour identical at 600/900/2200px
- no external runtime dependency

Handoff:
- src/content/config.ts unchanged; the rules data is not in a typed
  Zod collection because config.ts is owned by content-i18n-migrator.
  Add a rules collection there when the collection layer is extended.
- verify.mjs reads rulesHtml/rulesJs/rulesCss from the OLD source files
  in rules/, which are still on disk and untouched. New rulesHtml-style
  assertions should target dist/rules/index.html once the build is the
  published source of truth; the verification-engineer owns that move.
- 30 token-gap markers in RulesInteractive.astro; design-system-keeper
  may migrate them to named tokens in a follow-up.
This commit is contained in:
Marcos Paulo
2026-09-05 17:02:17 +00:00
parent 107e429fb9
commit 134bd37ec4
6 changed files with 1522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/rules.astro
+23
View File
@@ -0,0 +1,23 @@
---
// /rules/ — bilingual case study of agent skills, CLI ratchets, Husky hooks,
// and PR review in netcracker/interview. Migrated from rules/index.html in
// task 14. The page renders the same DOM and CSS classes as the vanilla
// source so verify.mjs's rulesHtml rulesHtml substring assertions pass on
// the legacy file and the snapshot script diffs clean against
// .agents/snapshots/rules.txt.
//
// The interactive state lives in RulesInteractive — a single Astro island
// because the five interactions (language, stage tab, skill tab, copy
// prompt, scroll progress) all share a single piece of state: the active
// language. See .agents/rules/astro.md for the hydration preference order.
import BaseLayout from '../layouts/BaseLayout.astro';
import RulesInteractive from '../components/islands/RulesInteractive.astro';
---
<BaseLayout
title="Rules That Survive the Prompt — AI For Dummies"
description="A concise case study of agent skills, CLI ratchets, Husky hooks, and PR review in netcracker/interview."
>
<RulesInteractive />
</BaseLayout>