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
+90 -10
View File
@@ -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>
))
}