lucasrguerra/ESPDocs
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat(i18n): Spanish localization (phase 4)
CI / Lint e auditorias (push) Successful in 1m31s
Details
CI / Trivy (dependências e segredos) (push) Successful in 10s
Details
CI / Imagem Docker (linux/arm64) (push) Successful in 2m23s
Details

Browse Source 
Complete implementation of Spanish (es-419) language support:
- Canonical catalogs and data: messages/es.json, data/es/**, lib/data/es/**, public/exemplos/es/**
- Canonical slugs: /es/series, /es/catalogo, /es/comparacion, /es/componentes, /es/diagnostico, /es/frameworks, /es/glosario, /es/selector, /es/acerca
- Dedicated search index at /api/busca/es with Spanish accent normalization
- Strict exclusion of book references in Spanish routes and catalogs
- Language selector and root negotiation with es active (ENABLED_LOCALES = ['pt', 'en', 'es'])
- Extended verification suite: check-i18n, smoke-imagem and verifica-vazamentos

Co-Authored-By: Antigravity <noreply@google.com>
This commit is contained in:
Lucas RayanandAntigravity committed 2026-11-01 19:50:20 -03:00
1 parent 0940814522
commit 660b28c09d
72 files changed
+17848 -947
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/ConnectionsDiagram.jsx
+72 -35
View File
@@ -56,6 +56,29 @@ const FILTER_CATEGORIES_EN = [
{ id: "Antena", name: "Antenna", color: "#06b6d4" },
];
const FILTER_CATEGORIES_ES = [
{ id: "All", name: "Todos", color: "#8b5cf6" },
{ id: "GND", name: "Tierra (GND)", color: "#64748b" },
{ id: "Power", name: "Alimentación", color: "#ef4444" },
{ id: "GPIO", name: "GPIO", color: "#22c55e" },
{ id: "Low Power", name: "GPIO LP", color: "#f59e0b" },
{ id: "ADC", name: "ADC", color: "#ec4899" },
{ id: "DAC", name: "DAC", color: "#a855f7" },
{ id: "Touch", name: "Touch", color: "#06b6d4" },
{ id: "UART", name: "UART", color: "#3b82f6" },
{ id: "SPI", name: "SPI", color: "#f43f5e" },
{ id: "USB", name: "USB", color: "#a855f7" },
{ id: "Clock", name: "Reloj", color: "#eab308" },
{ id: "JTAG", name: "JTAG", color: "#6366f1" },
{ id: "Strapping", name: "Arranque (Boot)", color: "#dc2626" },
{ id: "DSI", name: "Pantalla (DSI)", color: "#f97316" },
{ id: "CSI", name: "Cámara (CSI)", color: "#14b8a6" },
{ id: "Ethernet", name: "Ethernet", color: "#0284c7" },
{ id: "SD", name: "Tarjeta SD", color: "#10b981" },
{ id: "I2C", name: "I2C", color: "#f59e0b" },
{ id: "Antena", name: "Antena", color: "#06b6d4" },
];
const type_colors = {
power: "#ef4444", // high-voltage red
ground: "#64748b", // slate gray
@@ -82,6 +105,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
const params = useSearchParams();
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const router = useRouter();
const pinosFiltro = useMemo(() => new Set((params.get("pinos") ?? "").split(",").filter(Boolean)), [params]);
const motivoFiltro = params.get("motivo") ?? "";
@@ -93,7 +117,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
const dialogRef = useRef(null);
const gatilhoRef = useRef(null);
const filterCategories = isEn ? FILTER_CATEGORIES_EN : FILTER_CATEGORIES;
const filterCategories = isEn ? FILTER_CATEGORIES_EN : isEs ? FILTER_CATEGORIES_ES : FILTER_CATEGORIES;
useEffect(() => {
setMounted(true);
@@ -115,11 +139,15 @@ function ConnectionsDiagramInner({ connections, serie }) {
};
const nomeCategoria = (cat) => {
if (cat === "Strapping") return isEn ? "Boot mode" : "Inicialização";
if (cat === "Strapping") return isEn ? "Boot mode" : isEs ? "Arranque (Boot)" : "Inicialização";
if (isEn) {
const found = FILTER_CATEGORIES_EN.find((f) => f.id === cat);
if (found) return found.name;
}
if (isEs) {
const found = FILTER_CATEGORIES_ES.find((f) => f.id === cat);
if (found) return found.name;
}
return cat;
};
@@ -176,10 +204,10 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="px-4 py-14 text-center">
<Sliders className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
<p className="mt-4 font-display text-xl font-semibold text-ink">
{isEn ? "Pinout diagram unavailable" : "Diagrama de conexões indisponível"}
{isEn ? "Pinout diagram unavailable" : isEs ? "Diagrama de conexiones no disponible" : "Diagrama de conexões indisponível"}
</p>
<p className="mt-1 text-sm text-muted">
{isEn ? "This model does not yet have a detailed pinout and bus map." : "Este modelo ainda não tem um mapa detalhado de conexões e barramentos."}
{isEn ? "This model does not yet have a detailed pinout and bus map." : isEs ? "Este modelo todavía no dispone de un mapa detallado de conexiones y buses." : "Este modelo ainda não tem um mapa detalhado de conexões e barramentos."}
</p>
</div>
);
@@ -191,11 +219,13 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="space-y-6">
<div>
<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
{isEn ? "Interactive pinout diagram" : "Diagrama de conexões interativo"}
{isEn ? "Interactive pinout diagram" : isEs ? "Diagrama de conexiones interactivo" : "Diagrama de conexões interativo"}
</h2>
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted">
{isEn ? (
`All connections and multiplexing for the ${serie.nome_completo}. Search by name or number, filter by function, and open a pin to see details.`
) : isEs ? (
`Todas las conexiones y la multiplexación del ${serie.nome_completo}. Busque por nombre o número, filtre por función y abra un pin para ver los detalles.`
) : (
`Todas as conexões e a multiplexação do ${serie.nome_completo}. Busque por nome ou número, filtre por função e abra um pino para ver os detalhes.`
)}
@@ -205,11 +235,11 @@ function ConnectionsDiagramInner({ connections, serie }) {
{pinosFiltro.size > 0 && (
<div role="status" className="callout flex flex-wrap items-center justify-between gap-3">
<p className="text-sm text-ink">
<strong className="font-semibold">{isEn ? "Filtered by search:" : "Filtrado pela busca:"}</strong> {motivoFiltro || (isEn ? "selected pins" : "pinos selecionados")} ({pinosFiltro.size}{" "}
{pinosFiltro.size === 1 ? (isEn ? "pin" : "pino") : (isEn ? "pins" : "pinos")})
<strong className="font-semibold">{isEn ? "Filtered by search:" : isEs ? "Filtrado por la búsqueda:" : "Filtrado pela busca:"}</strong> {motivoFiltro || (isEn ? "selected pins" : isEs ? "pines seleccionados" : "pinos selecionados")} ({pinosFiltro.size}{" "}
{pinosFiltro.size === 1 ? (isEn ? "pin" : isEs ? "pin" : "pino") : (isEn ? "pins" : isEs ? "pines" : "pinos")})
</p>
<button type="button" onClick={mostrarTodos} className="btn btn-ghost btn-sm">
{isEn ? "Show all pins" : "Mostrar todos os pinos"}
{isEn ? "Show all pins" : isEs ? "Mostrar todos los pines" : "Mostrar todos os pinos"}
</button>
</div>
)}
@@ -217,43 +247,45 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="flex flex-col gap-3 sm:flex-row">
<div className="relative flex-1">
<label htmlFor="busca-pino" className="sr-only">
{isEn ? "Search connection by name or number" : "Buscar conexão por nome ou número"}
{isEn ? "Search connection by name or number" : isEs ? "Buscar conexión por nombre o número" : "Buscar conexão por nome ou número"}
</label>
<Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" aria-hidden="true" />
<input
id="busca-pino"
type="search"
placeholder={isEn ? "Search pin (e.g.: GPIO1, TXD, XTAL)" : "Buscar pino (ex.: GPIO1, TXD, XTAL)"}
placeholder={isEn ? "Search pin (e.g.: GPIO1, TXD, XTAL)" : isEs ? "Buscar pin (ej.: GPIO1, TXD, XTAL)" : "Buscar pino (ex.: GPIO1, TXD, XTAL)"}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
autoComplete="off"
className="field pl-11 pr-4 text-sm"
/>
</div>
<div role="group" aria-label={isEn ? "Display mode" : "Modo de exibição"} className="flex gap-2">
<div role="group" aria-label={isEn ? "Display mode" : isEs ? "Modo de visualización" : "Modo de exibição"} className="flex gap-2">
<button type="button" onClick={() => setViewMode("grid")} aria-pressed={viewMode === "grid"} className="chip-btn">
<Grid className="h-4 w-4" aria-hidden="true" />
{isEn ? "Grid" : "Grade"}
{isEn ? "Grid" : isEs ? "Cuadrícula" : "Grade"}
</button>
<button type="button" onClick={() => setViewMode("list")} aria-pressed={viewMode === "list"} className="chip-btn">
<List className="h-4 w-4" aria-hidden="true" />
{isEn ? "List" : "Lista"}
{isEn ? "List" : isEs ? "Lista" : "Lista"}
</button>
</div>
</div>
<div>
<div className="flex items-center justify-between gap-3">
<h3 className="text-sm font-semibold text-ink">{isEn ? "Pin function" : "Função do pino"}</h3>
<h3 className="text-sm font-semibold text-ink">{isEn ? "Pin function" : isEs ? "Función del pin" : "Função do pino"}</h3>
<p role="status" aria-live="polite" className="text-sm text-muted">
{isEn ? (
`${visibleConnections.length} of ${connections.length} pins`
) : isEs ? (
`${visibleConnections.length} de ${connections.length} pines`
) : (
`${visibleConnections.length} de ${connections.length} pinos`
)}
</p>
</div>
<div role="group" aria-label={isEn ? "Filter by function" : "Filtrar por função"} className="mt-3 flex flex-wrap gap-2">
<div role="group" aria-label={isEn ? "Filter by function" : isEs ? "Filtrar por función" : "Filtrar por função"} className="mt-3 flex flex-wrap gap-2">
{filterCategories.map((filter) => {
const isActive = activeFilter === filter.id;
const count = connections.filter((c) => (filter.id === "All" ? true : c.categorias.includes(filter.id))).length;
@@ -272,10 +304,10 @@ function ConnectionsDiagramInner({ connections, serie }) {
{visibleConnections.length === 0 ? (
<div className="rounded-2xl border border-dashed border-line-strong px-6 py-12 text-center">
<Search className="mx-auto h-8 w-8 text-muted" aria-hidden="true" />
<p className="mt-3 font-semibold text-ink">{isEn ? "No connections found" : "Nenhuma conexão encontrada"}</p>
<p className="mt-1 text-sm text-muted">{isEn ? "Adjust your search or return to all functions." : "Ajuste a busca ou volte para todas as funções."}</p>
<p className="mt-3 font-semibold text-ink">{isEn ? "No connections found" : isEs ? "No se encontraron conexiones" : "Nenhuma conexão encontrada"}</p>
<p className="mt-1 text-sm text-muted">{isEn ? "Adjust your search or return to all functions." : isEs ? "Ajuste la búsqueda o vuelva a todas las funciones." : "Ajuste a busca ou volte para todas as funções."}</p>
<button type="button" onClick={() => { setActiveFilter("All"); setSearchQuery(""); if (pinosFiltro.size) mostrarTodos(); }} className="btn btn-primary btn-sm mt-5">
Limpar busca e filtros
{isEn ? "Clear search and filters" : isEs ? "Limpiar búsqueda y filtros" : "Limpar busca e filtros"}
</button>
</div>
) : viewMode === "grid" ? (
@@ -288,7 +320,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
type="button"
onClick={(e) => abrir(connection, e)}
aria-haspopup="dialog"
aria-label={isEn ? `Pin ${connection.nome}, number ${connection.numero}${connection.avisos ? ", with usage restrictions" : ""}` : `Pino ${connection.nome}, número ${connection.numero}${connection.avisos ? ", com restrições de uso" : ""}`}
aria-label={isEn ? `Pin ${connection.nome}, number ${connection.numero}${connection.avisos ? ", with usage restrictions" : ""}` : isEs ? `Pin ${connection.nome}, número ${connection.numero}${connection.avisos ? ", con restricciones de uso" : ""}` : `Pino ${connection.nome}, número ${connection.numero}${connection.avisos ? ", com restrições de uso" : ""}`}
className="flex w-full flex-col items-center rounded-xl border border-line bg-surface p-3 transition-colors hover:bg-surface-2"
>
<span
@@ -317,14 +349,14 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="overflow-x-auto rounded-xl border border-line">
<table className="w-full min-w-[40rem] border-collapse text-left text-sm">
<caption className="sr-only">
{isEn ? `Connections of ${serie.nome_completo}` : `Conexões do ${serie.nome_completo}`}
{isEn ? `Connections of ${serie.nome_completo}` : isEs ? `Conexiones del ${serie.nome_completo}` : `Conexões do ${serie.nome_completo}`}
</caption>
<thead>
<tr className="border-b border-line bg-surface-2 text-muted">
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Pin" : "Pino"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Name" : "Nome"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Functions" : "Funções"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Usage" : "Uso"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Pin" : isEs ? "Pin" : "Pino"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Name" : isEs ? "Nombre" : "Nome"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Functions" : isEs ? "Funciones" : "Funções"}</th>
<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Usage" : isEs ? "Uso" : "Uso"}</th>
</tr>
</thead>
<tbody className="divide-y divide-line">
@@ -337,7 +369,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
type="button"
onClick={(e) => abrir(connection, e)}
aria-haspopup="dialog"
aria-label={isEn ? `Open pin details for ${connection.nome}, number ${connection.numero}` : `Abrir detalhes do pino ${connection.nome}, número ${connection.numero}`}
aria-label={isEn ? `Open pin details for ${connection.nome}, number ${connection.numero}` : isEs ? `Abrir detalles del pin ${connection.nome}, número ${connection.numero}` : `Abrir detalhes do pino ${connection.nome}, número ${connection.numero}`}
className="grid h-11 w-11 place-items-center rounded-full border-2 bg-surface text-sm font-semibold tabular-nums text-ink hover:bg-surface-2"
style={{ borderColor: baseColor }}
>
@@ -352,12 +384,12 @@ function ConnectionsDiagramInner({ connections, serie }) {
{connection.avisos ? (
<span className="inline-flex items-center gap-1.5 font-medium text-danger">
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
{isEn ? "Restricted" : "Restrito"}
{isEn ? "Restricted" : isEs ? "Restringido" : "Restrito"}
</span>
) : (
<span className="inline-flex items-center gap-1.5 text-ok">
<CheckCircle className="h-4 w-4" aria-hidden="true" />
{isEn ? "Free" : "Livre"}
{isEn ? "Free" : isEs ? "Libre" : "Livre"}
</span>
)}
</td>
@@ -373,13 +405,18 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="callout callout-warn flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-gold" aria-hidden="true" />
<div>
<p className="font-semibold text-ink">{isEn ? "Pinout notes" : "Notas sobre a pinagem"}</p>
<p className="font-semibold text-ink">{isEn ? "Pinout notes" : isEs ? "Notas sobre el patillaje" : "Notas sobre a pinagem"}</p>
<ul className="mt-1 list-disc space-y-1 pl-5">
{isEn ? (
<>
<li>Pins with a warning icon have special boot roles or analog limitations. Open the pin to see details.</li>
<li>Isolate capacitive touch traces from coupled RF noise.</li>
</>
) : isEs ? (
<>
<li>Los pines con icono de advertencia tienen un papel especial en el arranque o limitaciones analógicas. Abra el pin para ver los detalles.</li>
<li>Aísle las pistas táctiles capacitivas del ruido de RF acoplado.</li>
</>
) : (
<>
<li>Pinos com o ícone de alerta têm papel especial no boot ou limitações analógicas. Abra o pino para ver os detalhes.</li>
@@ -414,11 +451,11 @@ function ConnectionsDiagramInner({ connections, serie }) {
{selectedConnection.nome}
</h3>
<p className="text-sm text-muted">
{isEn ? `Physical pin ${selectedConnection.numero}` : `Pino físico ${selectedConnection.numero}`}
{isEn ? `Physical pin ${selectedConnection.numero}` : isEs ? `Pin físico ${selectedConnection.numero}` : `Pino físico ${selectedConnection.numero}`}
</p>
</div>
</div>
<button type="button" onClick={fechar} aria-label={isEn ? "Close pin details" : "Fechar detalhes do pino"} className="grid h-11 w-11 shrink-0 place-items-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-ink">
<button type="button" onClick={fechar} aria-label={isEn ? "Close pin details" : isEs ? "Cerrar detalles del pin" : "Fechar detalhes do pino"} className="grid h-11 w-11 shrink-0 place-items-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-ink">
<X className="h-5 w-5" aria-hidden="true" />
</button>
</div>
@@ -426,7 +463,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="flex-1 space-y-6 overflow-y-auto p-5 sm:p-7">
{selectedConnection.categorias.length > 0 && (
<section>
<h4 className="text-sm font-semibold text-ink">{isEn ? "Categories" : "Categorias"}</h4>
<h4 className="text-sm font-semibold text-ink">{isEn ? "Categories" : isEs ? "Categorías" : "Categorias"}</h4>
<ul className="mt-3 flex flex-wrap gap-2">
{selectedConnection.categorias.map((cat) => (
<li key={cat} className="chip">
@@ -442,7 +479,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
<Zap className="h-4 w-4 text-danger" aria-hidden="true" />
{isEn ? "Power domain" : "Domínio de alimentação"}
{isEn ? "Power domain" : isEs ? "Dominio de alimentación" : "Domínio de alimentação"}
</h4>
<ul className="tile mt-3 space-y-2">
{selectedConnection.alimentacao.map((source) => (
@@ -453,7 +490,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
)}
<section>
<h4 className="text-sm font-semibold text-ink">{isEn ? "Available functions" : "Funções disponíveis"}</h4>
<h4 className="text-sm font-semibold text-ink">{isEn ? "Available functions" : isEs ? "Funciones disponibles" : "Funções disponíveis"}</h4>
<ul className="tile mt-3 grid gap-2.5 sm:grid-cols-2">
{selectedConnection.funcoes.map((func) => (
<li key={func} className="flex items-center gap-2.5 text-sm text-ink-soft">
@@ -468,7 +505,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
<section className="callout callout-danger">
<h4 className="flex items-center gap-2 font-semibold text-ink">
<AlertTriangle className="h-4 w-4 text-danger" aria-hidden="true" />
{isEn ? "Engineering notes" : "Avisos de engenharia"}
{isEn ? "Engineering notes" : isEs ? "Notas de ingeniería" : "Avisos de engenharia"}
</h4>
<ul className="mt-2 list-disc space-y-1.5 pl-5">
{selectedConnection.avisos.map((aviso) => (
@@ -481,7 +518,7 @@ function ConnectionsDiagramInner({ connections, serie }) {
<div className="border-t border-line p-4 sm:px-7">
<button type="button" onClick={fechar} className="btn btn-primary w-full">
{isEn ? "Close" : "Fechar"}
{isEn ? "Close" : isEs ? "Cerrar" : "Fechar"}
</button>
</div>
</div>