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:
@@ -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>
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user