feat(blocks): add Localized type support to full-guide blocks
Widens prose props on FleetDiagram, HandoffTable, PhasePanel, RouteTable, SkillPackage, and WorktreeMap to accept {en, pt} as well as string, and conditionally renders language spans. Non-prose props (id, code, etc) were left as strings.
This commit is contained in:
Marcos Paulo
@@ -9,22 +9,24 @@
|
||||
// hairlines between worker cards; the parent background is an off-token seam
|
||||
// colour marked inline with `token-gap`.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface Worker {
|
||||
/** Used as the `data-worker` hook and the key in the source. */
|
||||
id: string;
|
||||
/** Short label rendered uppercase, e.g. "UI". */
|
||||
label: string;
|
||||
label: string | Localized;
|
||||
/** Body copy describing the worker's remit. */
|
||||
strong: string;
|
||||
strong: string | Localized;
|
||||
/** Path label, e.g. "agent/ui". */
|
||||
code: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
orchestrator: {
|
||||
eyebrow: string;
|
||||
eyebrow: string | Localized;
|
||||
/** May contain inline `<br>`; rendered with `set:html`. */
|
||||
title: string;
|
||||
title: string | Localized;
|
||||
code: string;
|
||||
};
|
||||
workers: Worker[];
|
||||
@@ -36,8 +38,32 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
|
||||
|
||||
<div class="fleet-grid">
|
||||
<article class="captain">
|
||||
<span class="captain-eyebrow">{orchestrator.eyebrow}</span>
|
||||
<span class="captain-eyebrow">
|
||||
{
|
||||
typeof orchestrator.eyebrow === 'string' ? (
|
||||
orchestrator.eyebrow
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{orchestrator.eyebrow.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{orchestrator.eyebrow.pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</span>
|
||||
{
|
||||
typeof orchestrator.title === 'string' ? (
|
||||
<h2 set:html={orchestrator.title} />
|
||||
) : (
|
||||
<>
|
||||
<h2 data-language-content="en" set:html={orchestrator.title.en} />
|
||||
<h2 data-language-content="pt" hidden set:html={orchestrator.title.pt} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<code>{orchestrator.code}</code>
|
||||
</article>
|
||||
<div class="arrow" aria-hidden="true">→</div>
|
||||
@@ -49,8 +75,30 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
|
||||
data-worker={worker.id}
|
||||
aria-pressed={worker.id === initial}
|
||||
>
|
||||
<span>{worker.label}</span>
|
||||
<strong>{worker.strong}</strong>
|
||||
<span>
|
||||
{typeof worker.label === 'string' ? (
|
||||
worker.label
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{worker.label.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{worker.label.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<strong>
|
||||
{typeof worker.strong === 'string' ? (
|
||||
worker.strong
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{worker.strong.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{worker.strong.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</strong>
|
||||
<code>{worker.code}</code>
|
||||
</button>
|
||||
))
|
||||
|
||||
@@ -7,18 +7,20 @@
|
||||
// muted body) and lives here so the next page that needs it gets the same
|
||||
// beat for free.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface Row {
|
||||
/** The package name, rendered as a `<th>` (column 1). */
|
||||
package: string;
|
||||
package: string | Localized;
|
||||
/** What the package contains (column 2). */
|
||||
contains: string;
|
||||
contains: string | Localized;
|
||||
/** Why this matters (column 3). */
|
||||
why: string;
|
||||
why: string | Localized;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/** Column headers in render order. */
|
||||
columns: [string, string, string];
|
||||
columns: [string | Localized, string | Localized, string | Localized];
|
||||
rows: Row[];
|
||||
}
|
||||
|
||||
@@ -28,18 +30,96 @@ const { columns, rows } = Astro.props;
|
||||
<table class="handoff-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{columns[0]}</th>
|
||||
<th>{columns[1]}</th>
|
||||
<th>{columns[2]}</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[0] === 'string' ? (
|
||||
columns[0]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[0].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[0].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[1] === 'string' ? (
|
||||
columns[1]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[1].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[1].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[2] === 'string' ? (
|
||||
columns[2]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[2].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[2].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
rows.map((row) => (
|
||||
<tr>
|
||||
<th scope="row">{row.package}</th>
|
||||
<td>{row.contains}</td>
|
||||
<td>{row.why}</td>
|
||||
<th scope="row">
|
||||
{typeof row.package === 'string' ? (
|
||||
row.package
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.package.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.package.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</th>
|
||||
<td>
|
||||
{typeof row.contains === 'string' ? (
|
||||
row.contains
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.contains.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.contains.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{typeof row.why === 'string' ? (
|
||||
row.why
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.why.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.why.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -8,18 +8,20 @@
|
||||
//
|
||||
// Every `data-phase` value is asserted by `scripts/verify.mjs`.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
export type PhaseId = 'plan' | 'build' | 'review';
|
||||
|
||||
interface Phase {
|
||||
id: PhaseId;
|
||||
/** Two-letter label rendered in the tab, e.g. "PLAN". */
|
||||
label: string;
|
||||
label: string | Localized;
|
||||
/** Numeric prefix, e.g. "01". */
|
||||
number: string;
|
||||
title: string;
|
||||
body: string;
|
||||
title: string | Localized;
|
||||
body: string | Localized;
|
||||
/** Headline + small caption shown above the panel title. */
|
||||
meta: { deliverable: string; gate: string };
|
||||
meta: { deliverable: string | Localized; gate: string | Localized };
|
||||
/** Code-line evidence shown at the bottom of the panel. */
|
||||
evidence: string;
|
||||
}
|
||||
@@ -43,7 +45,17 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
|
||||
role="tab"
|
||||
aria-selected={phase.id === initial}
|
||||
>
|
||||
<b>{phase.number}</b> {phase.label}
|
||||
<b>{phase.number}</b>{' '}
|
||||
{typeof phase.label === 'string' ? (
|
||||
phase.label
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{phase.label.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{phase.label.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
}
|
||||
@@ -51,11 +63,71 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
|
||||
|
||||
<article class="phase-panel" id="phase-panel" aria-live="polite">
|
||||
<div class="phase-meta">
|
||||
<span>{active.meta.deliverable}</span>
|
||||
<small>{active.meta.gate}</small>
|
||||
<span>
|
||||
{
|
||||
typeof active.meta.deliverable === 'string' ? (
|
||||
active.meta.deliverable
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{active.meta.deliverable.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{active.meta.deliverable.pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</span>
|
||||
<small>
|
||||
{
|
||||
typeof active.meta.gate === 'string' ? (
|
||||
active.meta.gate
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{active.meta.gate.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{active.meta.gate.pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</small>
|
||||
</div>
|
||||
<h3>{active.title}</h3>
|
||||
<p>{active.body}</p>
|
||||
<h3>
|
||||
{
|
||||
typeof active.title === 'string' ? (
|
||||
active.title
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{active.title.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{active.title.pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</h3>
|
||||
<p>
|
||||
{
|
||||
typeof active.body === 'string' ? (
|
||||
active.body
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{active.body.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{active.body.pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</p>
|
||||
<code>{active.evidence}</code>
|
||||
</article>
|
||||
|
||||
|
||||
@@ -6,14 +6,16 @@
|
||||
// renders the column header + the four rows; task 15 will hydrate the
|
||||
// "route detail" panel to the right.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface Route {
|
||||
id: 'plan' | 'build' | 'explore' | 'review' | string;
|
||||
/** Strong label, e.g. "Plan". */
|
||||
strong: string;
|
||||
strong: string | Localized;
|
||||
/** Profile descriptor, e.g. "strong / broad". */
|
||||
profile: string;
|
||||
profile: string | Localized;
|
||||
/** Prompt shape copy. */
|
||||
prompt: string;
|
||||
prompt: string | Localized;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -37,9 +39,42 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
|
||||
data-route={route.id}
|
||||
aria-pressed={route.id === initial}
|
||||
>
|
||||
<strong>{route.strong}</strong>
|
||||
<b>{route.profile}</b>
|
||||
<small>{route.prompt}</small>
|
||||
<strong>
|
||||
{typeof route.strong === 'string' ? (
|
||||
route.strong
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{route.strong.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{route.strong.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</strong>
|
||||
<b>
|
||||
{typeof route.profile === 'string' ? (
|
||||
route.profile
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{route.profile.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{route.profile.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</b>
|
||||
<small>
|
||||
{typeof route.prompt === 'string' ? (
|
||||
route.prompt
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{route.prompt.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{route.prompt.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</small>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -7,12 +7,14 @@
|
||||
// paired with a `<article>` detail panel by the parent page; this component
|
||||
// renders only the picker.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface PackageFile {
|
||||
id: 'skill' | 'references' | 'scripts' | 'assets' | string;
|
||||
/** Path rendered inside `<code>`, e.g. "SKILL.md". */
|
||||
path: string;
|
||||
/** Helper copy under the path. */
|
||||
small: string;
|
||||
small: string | Localized;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -34,7 +36,18 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
|
||||
aria-selected={file.id === initial}
|
||||
>
|
||||
<code>{file.path}</code>
|
||||
<small>{file.small}</small>
|
||||
<small>
|
||||
{typeof file.small === 'string' ? (
|
||||
file.small
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{file.small.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{file.small.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</small>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -6,15 +6,17 @@
|
||||
// the `data-tree` hook asserted by `scripts/verify.mjs`. The `root` node and
|
||||
// the `initial` branch are marked selected.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface Branch {
|
||||
/** The `data-tree` hook, e.g. "ui", "tests", "docs". */
|
||||
id: string;
|
||||
/** Uppercase label, e.g. "UI AGENT". */
|
||||
label: string;
|
||||
label: string | Localized;
|
||||
/** Strong line, e.g. "agent/ui". */
|
||||
strong: string;
|
||||
/** Status small, e.g. "3 files · working". */
|
||||
small: string;
|
||||
small: string | Localized;
|
||||
/** CSS modifier so each branch picks up its tone. */
|
||||
tone: 'ui' | 'tests' | 'docs' | string;
|
||||
}
|
||||
@@ -50,9 +52,31 @@ const { branches, initial = 'main' } = Astro.props;
|
||||
aria-selected={branch.id === initial}
|
||||
>
|
||||
<>
|
||||
<span>{branch.label}</span>
|
||||
<span>
|
||||
{typeof branch.label === 'string' ? (
|
||||
branch.label
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{branch.label.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{branch.label.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<strong>{branch.strong}</strong>
|
||||
<small>{branch.small}</small>
|
||||
<small>
|
||||
{typeof branch.small === 'string' ? (
|
||||
branch.small
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{branch.small.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{branch.small.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</small>
|
||||
</>
|
||||
</button>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user