feat: migrate chapter pages models, agents, skills to Astro
Migrate the three remaining chapter pages to Astro routes, sharing
ChapterLayout and ChapterHero/TopBar/SiteFooter blocks. /summary/
already in place from task 12.
- /models/ -> src/pages/models.astro (zero JS)
- /agents/ -> src/pages/agents.astro (zero JS)
- /skills/ -> src/pages/skills.astro (one island: SkillPackageExplorer)
SkillPackageExplorer is the only JS across the four chapter pages;
moves vanilla skills/app.js content verbatim into the island. Uses
data-skill-file as the new hook (vanilla used data-package-file;
verify.mjs still asserts that on the legacy index.html).
Copy lives in src/content/chapters/{models,agents,skills}.json. All
four pages pass empty-text snapshot diffs against
.agents/snapshots/{models,agents,skills,summary}.txt. pnpm run verify
green: verify.mjs (16 sections), audit-ui.mjs, and check-tokens.mjs
(212 marked token-gap markers, 0 unsuppressed).
Did not touch ChapterLayout, the verification suite, contents of the
summary.astro file (it shipped with task 12), or the vanilla
chapters' HTML files at the repo root (verify.mjs still reads those).
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
---
|
||||
// /agents/ — chapter page. Migrated from agents/index.html in task 13.
|
||||
// Identical URL (/agents/), zero client JS, copy lives in
|
||||
// src/content/chapters/agents.json.
|
||||
|
||||
import { getEntry } from 'astro:content';
|
||||
import ChapterLayout from '../layouts/ChapterLayout.astro';
|
||||
import ChapterHero from '../components/blocks/ChapterHero.astro';
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
const chapter = await getEntry('chapters', 'agents');
|
||||
const lede = chapter.data.lede.en;
|
||||
const title = chapter.data.title.en;
|
||||
const eyebrow = chapter.data.eyebrow.en;
|
||||
const cards = chapter.data.cards ?? [];
|
||||
const sections = chapter.data.sections ?? [];
|
||||
const treeSection = sections[0];
|
||||
const handoffSection = sections[1];
|
||||
---
|
||||
|
||||
<ChapterLayout title="AI For Dummies — Agents and trees" description={lede.replace(/<[^>]+>/g, '')}>
|
||||
<a slot="top-previous" href={`${base}summary/`}>← ROUTE MAP</a>
|
||||
<span slot="top-center">02 / AGENTS & TREES</span>
|
||||
<a slot="top-next" href={`${base}full-guide/`}>field guide ↗</a>
|
||||
|
||||
<ChapterHero eyebrow={eyebrow}>
|
||||
<span slot="title" set:html={title} />
|
||||
<p>{lede}</p>
|
||||
</ChapterHero>
|
||||
|
||||
<section class="pipeline">
|
||||
<div>
|
||||
<p class="eyebrow">{treeSection.eyebrow.en}</p>
|
||||
<h2 set:html={treeSection.title.en} />
|
||||
</div>
|
||||
<div class="panel">
|
||||
<strong>{treeSection.panelLabel.en}</strong>
|
||||
<code>{treeSection.panelCode.en}</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
{
|
||||
cards.map((card) => (
|
||||
<article class="card">
|
||||
<b>{card.label.en}</b>
|
||||
<h2>{card.title.en}</h2>
|
||||
<p>{card.copy.en}</p>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="practice">
|
||||
<div>
|
||||
<p class="eyebrow">{handoffSection.eyebrow.en}</p>
|
||||
<h2 set:html={handoffSection.title.en} />
|
||||
</div>
|
||||
<div class="steps">
|
||||
{
|
||||
handoffSection.steps.map((step, index) => (
|
||||
<article>
|
||||
<b>{String(index + 1).padStart(2, '0')}</b>
|
||||
<div>
|
||||
<strong>{step.label.en}</strong>
|
||||
<span>{step.copy.en}</span>
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav slot="footer-links" class="links" aria-label="Chapter navigation">
|
||||
<a href={`${base}models/`}>Previous: models →</a>
|
||||
<a href={`${base}rules/`}>Rules case study →</a>
|
||||
<a href={`${base}hands-on/rules/`}>Try the rules lab →</a>
|
||||
</nav>
|
||||
</ChapterLayout>
|
||||
Reference in New Issue
Block a user