Marcos Paulo
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
---
|
|
// Chapter page template — for the numbered chapters (models, agents, skills,
|
|
// rules). These ship ZERO JavaScript today and must continue to.
|
|
//
|
|
// Copy to src/pages/<slug>.astro. The route must match the existing URL
|
|
// exactly, trailing slash included.
|
|
|
|
import ChapterLayout from '../layouts/ChapterLayout.astro';
|
|
import GridGroup from '../components/blocks/GridGroup.astro';
|
|
import StaticBlock from '../components/blocks/StaticBlock.astro';
|
|
import { getEntry } from 'astro:content';
|
|
|
|
// Content comes from a collection, never hard-coded in the page.
|
|
// Both `en` and `pt` are required by the schema.
|
|
const chapter = await getEntry('chapters', 'models');
|
|
const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
|
|
---
|
|
|
|
<ChapterLayout
|
|
number={chapter.data.number}
|
|
title={chapter.data.title[lang]}
|
|
description={chapter.data.description[lang]}
|
|
>
|
|
<section class="hero">
|
|
<p class="eyebrow">{chapter.data.eyebrow[lang]}</p>
|
|
<h1 set:html={chapter.data.heading[lang]} />
|
|
<p class="lede">{chapter.data.lede[lang]}</p>
|
|
</section>
|
|
|
|
<GridGroup label="Chapter sections" columns={3}>
|
|
{
|
|
chapter.data.sections.map((section) => (
|
|
<StaticBlock
|
|
eyebrow={section.eyebrow[lang]}
|
|
title={section.title[lang]}
|
|
body={section.body[lang]}
|
|
/>
|
|
))
|
|
}
|
|
</GridGroup>
|
|
</ChapterLayout>
|
|
|
|
<style>
|
|
/* Page-level layout only. Anything reusable belongs in a component. */
|
|
.hero {
|
|
max-width: 780px;
|
|
padding: clamp(75px, 12vh, 145px) 0 85px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 16px 0 24px;
|
|
font-size: var(--step-display);
|
|
line-height: 0.86;
|
|
letter-spacing: -0.08em;
|
|
}
|
|
|
|
/* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
|
|
See .agents/context/design-system.md */
|
|
h1 :global(em) {
|
|
color: var(--blue);
|
|
font-family: Georgia, serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.lede {
|
|
max-width: 570px;
|
|
color: var(--muted);
|
|
line-height: 1.65;
|
|
}
|
|
</style>
|