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
2026-09-05 21:59:29 +00:00
parent a5d9630dd8
commit cac1115035
6 changed files with 311 additions and 39 deletions
+56 -8
View File
@@ -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>
<h2 set:html={orchestrator.title} />
<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>
))