netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blocks): add Localized type support to full-guide blocks

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/PhasePanel.astro
+81 -9
View File
@@ -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>