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

feat(i18n): French and German localization (phase 5)
CI / Lint e auditorias (push) Successful in 49s
Details
CI / Trivy (dependências e segredos) (push) Successful in 11s
Details
CI / Imagem Docker (linux/arm64) (push) Successful in 3m14s
Details

Browse Source 
- Add full message catalogs and content for French (fr) and German (de)
- Implement ASCII canonical slugs for French and German routes
- Add language-specific search endpoints (/api/busca/fr, /api/busca/de)
- Configure strict 404 responses for /fr/livro and /de/livro
- Localize SEO, OpenGraph (fr_FR, de_DE), Twitter and JSON-LD schemas
- Add localized code example comments across 14 examples for fr and de
- Enable 'fr' and 'de' in ENABLED_LOCALES with root negotiation and redirect
- Extend test suite in 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 22:06:36 -03:00
1 parent 7b673aeb4b
commit 7fce46b9e1
104 files changed
+33369 -686
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/[locale]/catalogo/layout.jsx
+21 -5
View File
@@ -4,12 +4,18 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEn ? "ESP32 Board Catalog" : isEs ? "Catálogo de placas ESP32" : "Catálogo de placas ESP32",
titulo: isEn ? "ESP32 Board Catalog" : isEs ? "Catálogo de placas ESP32" : isFr ? "Catalogue de cartes ESP32" : isDe ? "ESP32-Board-Katalog" : "Catálogo de placas ESP32",
descricao: isEn
? "ESP32 development boards and DevKits available in Brazil, with filters by series, connector, and USB-serial converter."
: isEs
? "Placas de desarrollo y DevKits con ESP32, con filtros por serie, conector y conversor USB-serial."
: isFr
? "Cartes de développement et DevKits ESP32, avec filtres par série, connecteur et convertisseur USB-série."
: isDe
? "ESP32-Entwicklungsboards und DevKits, mit Filtern nach Serie, Anschluss und USB-Seriell-Wandler."
: "Placas de desenvolvimento com ESP32 disponíveis no Brasil, com filtro por série, conector e conversor USB-serial.",
caminho: "/catalogo",
locale,
@@ -17,6 +23,10 @@ export async function generateMetadata({ params }) {
? ["ESP32 boards", "ESP32 DevKit", "buy ESP32", "ESP32 DevKitC"]
: isEs
? ["placas ESP32", "DevKit ESP32", "comprar ESP32", "ESP32 DevKitC"]
: isFr
? ["cartes ESP32", "DevKit ESP32", "acheter ESP32", "ESP32 DevKitC"]
: isDe
? ["ESP32 Boards", "ESP32 DevKit", "ESP32 kaufen", "ESP32 DevKitC"]
: ["placas ESP32", "DevKit ESP32", "comprar ESP32", "ESP32 DevKitC"],
});
}
@@ -25,7 +35,9 @@ export default async function Layout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const canonPath = isEn ? "/en/catalog" : isEs ? "/es/catalogo" : "/catalogo";
const isFr = locale === "fr";
const isDe = locale === "de";
const canonPath = isEn ? "/en/catalog" : isEs ? "/es/catalogo" : isFr ? "/fr/catalogue" : isDe ? "/de/katalog" : "/catalogo";
return (
<>
@@ -34,11 +46,15 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.aplicacaoWeb({
nome: isEn ? "ESP32 Development Board Catalog" : isEs ? "Catálogo de placas de desarrollo ESP32" : "Catálogo de Placas ESP32",
nome: isEn ? "ESP32 Development Board Catalog" : isEs ? "Catálogo de placas de desarrollo ESP32" : isFr ? "Catalogue de cartes de développement ESP32" : isDe ? "Katalog für ESP32-Entwicklungsboards" : "Catálogo de Placas ESP32",
descricao: isEn
? "Interactive guide and catalog of development boards and DevKits featuring ESP32 microcontrollers."
: isEs
? "Guía y catálogo interactivo de placas de desarrollo y DevKits con microcontroladores ESP32."
: isFr
? "Guide interactif et catalogue de cartes de développement et DevKits avec microcontrôleurs ESP32."
: isDe
? "Interaktiver Leitfaden und Katalog für Entwicklungsboards und DevKits mit ESP32-Mikrocontrollern."
: "Guia e catálogo interativo de placas de desenvolvimento e DevKits com microcontroladores ESP32.",
caminho: canonPath,
locale,
@@ -51,8 +67,8 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEn ? "Home" : isEs ? "Inicio" : "Início", caminho: isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isEn ? "Board Catalog" : isEs ? "Catálogo de placas" : "Catálogo de Placas", caminho: canonPath },
{ nome: isEn ? "Home" : isEs ? "Inicio" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEn ? "/en" : isEs ? "/es" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: isEn ? "Board Catalog" : isEs ? "Catálogo de placas" : isFr ? "Catalogue de cartes" : isDe ? "Board-Katalog" : "Catálogo de Placas", caminho: canonPath },
])
),
}}
app/[locale]/catalogo/page.jsx
+88 -18
View File
@@ -58,10 +58,62 @@ const VALUE_MAP_ES = {
"Opcional": "Opcional",
};
const HEADER_MAP_FR = {
"Nome": "Nom",
"Descrição": "Description",
"Série": "Série",
"Loja Oficial": "Boutique officielle",
"Fabricante": "Fabricant",
"Processador": "Processeur",
"Memória Flash": "Mémoire Flash",
"PSRAM": "PSRAM",
"Conector USB": "Connecteur USB",
"Interface USB": "Interface USB",
"Antena": "Antenne",
"Bateria": "Batterie",
"Display": "Écran",
"Sensores": "Capteurs",
"Botões": "Boutons",
"LEDs": "LEDs",
};
const VALUE_MAP_FR = {
"Sim": "Oui",
"Não": "Non",
"Opcional": "Optionnel",
};
const HEADER_MAP_DE = {
"Nome": "Name",
"Descrição": "Beschreibung",
"Série": "Serie",
"Loja Oficial": "Offizieller Store",
"Fabricante": "Hersteller",
"Processador": "Prozessor",
"Memória Flash": "Flash-Speicher",
"PSRAM": "PSRAM",
"Conector USB": "USB-Anschluss",
"Interface USB": "USB-Schnittstelle",
"Antena": "Antenne",
"Bateria": "Batterie",
"Display": "Display",
"Sensores": "Sensoren",
"Botões": "Tasten",
"LEDs": "LEDs",
};
const VALUE_MAP_DE = {
"Sim": "Ja",
"Não": "Nein",
"Opcional": "Optional",
};
export default function PlacasPage() {
const pathname = usePathname() || "";
const isEn = pathname === "/en" || pathname.startsWith("/en/");
const isEs = pathname === "/es" || pathname.startsWith("/es/");
const isFr = pathname === "/fr" || pathname.startsWith("/fr/");
const isDe = pathname === "/de" || pathname.startsWith("/de/");
const [boards, setBoards] = useState([]);
const [filteredBoards, setFilteredBoards] = useState([]);
@@ -90,7 +142,7 @@ export default function PlacasPage() {
const response = await fetch("/api/placas");
if (!response.ok) {
throw new Error(isEn ? "Failed to load board data" : isEs ? "Error al cargar los datos de las placas" : "Erro ao carregar dados das placas");
throw new Error(isEn ? "Failed to load board data" : isEs ? "Error al cargar los datos de las placas" : isFr ? "Erreur lors du chargement des données des cartes" : isDe ? "Fehler beim Laden der Board-Daten" : "Erro ao carregar dados das placas");
}
const result = await response.json();
@@ -195,15 +247,21 @@ export default function PlacasPage() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEn ? "Board Catalog" : isEs ? "Catálogo de placas" : "Catálogo de placas" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEn ? "Board Catalog" : isEs ? "Catálogo de placas" : isFr ? "Catalogue de cartes" : isDe ? "Board-Katalog" : "Catálogo de placas" }]}
icon={ShoppingCart}
label={isEn ? "Real DevKits and modules" : isEs ? "DevKits y módulos reales" : "DevKits e módulos reais"}
title={isEn ? "ESP32 Board Catalog" : isEs ? "Catálogo de placas ESP32" : "Catálogo de placas ESP32"}
label={isEn ? "Real DevKits and modules" : isEs ? "DevKits y módulos reales" : isFr ? "DevKits et modules réels" : isDe ? "Echte DevKits und Module" : "DevKits e módulos reais"}
title={isEn ? "ESP32 Board Catalog" : isEs ? "Catálogo de placas ESP32" : isFr ? "Catalogue de cartes ESP32" : isDe ? "ESP32-Board-Katalog" : "Catálogo de placas ESP32"}
lede={
isEn
? "Compare official and third-party boards for your project: USB interface, on-board sensors and direct store links."
: isEs
? "Compare placas oficiales y alternativas para su proyecto: interfaz USB, sensores integrados y enlace directo a la tienda."
: isFr
? "Comparez les cartes officielles et alternatives pour votre projet : interface USB, capteurs intégrés et lien direct vers la boutique."
: isDe
? "Vergleichen Sie offizielle und Drittanbieter-Boards für Ihr Projekt: USB-Schnittstelle, integrierte Sensoren und direkter Store-Link."
: "Compare placas oficiais e alternativas para o seu projeto: interface USB, sensores integrados e link direto para a loja."
}
/>
@@ -215,14 +273,14 @@ export default function PlacasPage() {
<Header />
<main id="conteudo">
{hero}
<section className="shell section pt-10" aria-busy="true" aria-label={isEn ? "Loading boards" : isEs ? "Cargando placas" : "Carregando placas"}>
<section className="shell section pt-10" aria-busy="true" aria-label={isEn ? "Loading boards" : isEs ? "Cargando placas" : isFr ? "Chargement des cartes" : isDe ? "Boards werden geladen" : "Carregando placas"}>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="card h-72 animate-pulse bg-surface-2" />
))}
</div>
<p role="status" className="mt-6 text-center text-sm text-muted">
{isEn ? "Querying boards database…" : isEs ? "Consultando la base de datos de placas…" : "Consultando o banco de placas…"}
{isEn ? "Querying boards database…" : isEs ? "Consultando la base de datos de placas…" : isFr ? "Consultation de la base de cartes…" : isDe ? "Board-Datenbank wird abgefragt…" : "Consultando o banco de placas…"}
</p>
</section>
</main>
@@ -242,14 +300,14 @@ export default function PlacasPage() {
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-danger" aria-hidden="true" />
<div>
<p className="font-semibold text-ink">
{isEn ? "Could not load boards" : isEs ? "No se pudieron cargar las placas" : "Não foi possível carregar as placas"}
{isEn ? "Could not load boards" : isEs ? "No se pudieron cargar las placas" : isFr ? "Impossible de charger les cartes" : isDe ? "Boards konnten nicht geladen werden" : "Não foi possível carregar as placas"}
</p>
<p className="mt-1">
{error}. {isEn ? "Check your connection and try again." : isEs ? "Compruebe la conexión y vuelva a intentarlo." : "Verifique a conexão e tente de novo."}
{error}. {isEn ? "Check your connection and try again." : isEs ? "Compruebe la conexión y vuelva a intentarlo." : isFr ? "Vérifiez votre connexion et réessayez." : isDe ? "Prüfen Sie Ihre Verbindung und versuchen Sie es erneut." : "Verifique a conexão e tente de novo."}
</p>
<button type="button" onClick={fetchBoards} className="btn btn-primary btn-sm mt-4">
<RefreshCw className="h-4 w-4" aria-hidden="true" />
{isEn ? "Try again" : isEs ? "Reintentar" : "Tentar novamente"}
{isEn ? "Try again" : isEs ? "Reintentar" : isFr ? "Réessayer" : isDe ? "Erneut versuchen" : "Tentar novamente"}
</button>
</div>
</div>
@@ -264,14 +322,14 @@ export default function PlacasPage() {
<div className="space-y-6">
<div>
<label htmlFor="busca-placa" className="text-sm font-semibold text-ink">
{isEn ? "Search board" : isEs ? "Buscar placa" : "Buscar placa"}
{isEn ? "Search board" : isEs ? "Buscar placa" : isFr ? "Rechercher une carte" : isDe ? "Board suchen" : "Buscar placa"}
</label>
<div className="relative mt-2">
<Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" aria-hidden="true" />
<input
id="busca-placa"
type="search"
placeholder={isEn ? "Name or description" : isEs ? "Nombre o descripción" : "Nome ou descrição"}
placeholder={isEn ? "Name or description" : isEs ? "Nombre o descripción" : isFr ? "Nom ou description" : isDe ? "Name oder Beschreibung" : "Nome ou descrição"}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="field pl-10 text-sm"
@@ -282,7 +340,7 @@ export default function PlacasPage() {
{filterableColumns.map((column) => {
const filterData = filterOptions[column];
if (!filterData) return null;
const colLabel = isEn ? (HEADER_MAP_EN[column] || column) : isEs ? (HEADER_MAP_ES[column] || column) : column;
const colLabel = isEn ? (HEADER_MAP_EN[column] || column) : isEs ? (HEADER_MAP_ES[column] || column) : isFr ? (HEADER_MAP_FR[column] || column) : isDe ? (HEADER_MAP_DE[column] || column) : column;
if (filterData.isBinary) {
return (
@@ -306,7 +364,7 @@ export default function PlacasPage() {
</legend>
<div className="mt-2 max-h-44 space-y-0.5 overflow-y-auto pr-1">
{filterData.values.map((option) => {
const optLabel = isEn ? (VALUE_MAP_EN[option] || option) : isEs ? (VALUE_MAP_ES[option] || option) : option;
const optLabel = isEn ? (VALUE_MAP_EN[option] || option) : isEs ? (VALUE_MAP_ES[option] || option) : isFr ? (VALUE_MAP_FR[option] || option) : isDe ? (VALUE_MAP_DE[option] || option) : option;
return (
<label key={option} className="flex min-h-10 cursor-pointer items-center gap-3 rounded-lg px-2 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-ink">
<input
@@ -333,14 +391,14 @@ export default function PlacasPage() {
<main id="conteudo">
{hero}
<section className="shell section pt-10 sm:pt-12" aria-label={isEn ? "Boards" : isEs ? "Placas" : "Placas"}>
<section className="shell section pt-10 sm:pt-12" aria-label={isEn ? "Boards" : isEs ? "Placas" : isFr ? "Cartes" : isDe ? "Boards" : "Placas"}>
<div className="grid gap-8 lg:grid-cols-[17rem_1fr] lg:gap-10">
<aside className="lg:sticky lg:top-28 lg:self-start">
<details className="panel" open={filtrosAbertos} onToggle={(e) => setFiltrosAbertos(e.currentTarget.open)}>
<summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-5 py-3 lg:cursor-default">
<span className="flex items-center gap-2 text-sm font-semibold text-ink">
<SlidersHorizontal className="h-4 w-4 text-accent" aria-hidden="true" />
{isEn ? "Filters" : isEs ? "Filtros" : "Filtros"}
{isEn ? "Filters" : isEs ? "Filtros" : isFr ? "Filtres" : isDe ? "Filter" : "Filtros"}
{activeFilterCount > 0 && <span className="chip chip-accent px-2 py-0">{activeFilterCount}</span>}
</span>
{activeFilterCount > 0 && (
@@ -352,7 +410,7 @@ export default function PlacasPage() {
}}
className="text-sm font-medium text-accent hover:text-accent-strong"
>
{isEn ? "Clear" : isEs ? "Limpiar" : "Limpar"}
{isEn ? "Clear" : isEs ? "Limpiar" : isFr ? "Effacer" : isDe ? "Zurücksetzen" : "Limpar"}
</button>
)}
</summary>
@@ -371,6 +429,14 @@ export default function PlacasPage() {
? filteredBoards.length === 1
? "placa encontrada"
: "placas encontradas"
: isFr
? filteredBoards.length === 1
? "carte trouvée"
: "cartes trouvées"
: isDe
? filteredBoards.length === 1
? "Board gefunden"
: "Boards gefunden"
: filteredBoards.length === 1
? "placa encontrada"
: "placas encontradas"}
@@ -380,17 +446,21 @@ export default function PlacasPage() {
<div className="card mt-4 px-6 py-14 text-center">
<Search className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
<h2 className="mt-4 font-display text-xl font-semibold text-ink">
{isEn ? "No boards match these filters" : isEs ? "Ninguna placa coincide con estos filtros" : "Nenhuma placa com esses filtros"}
{isEn ? "No boards match these filters" : isEs ? "Ninguna placa coincide con estos filtros" : isFr ? "Aucune carte ne correspond à ces filtres" : isDe ? "Keine Boards entsprechen diesen Filtern" : "Nenhuma placa com esses filtros"}
</h2>
<p className="mx-auto mt-2 max-w-md text-sm text-muted">
{isEn
? "Remove some filters or search by another name."
: isEs
? "Elimine algunos filtros o busque por otro nombre."
: isFr
? "Supprimez certains filtres ou recherchez un autre nom."
: isDe
? "Entfernen Sie einige Filter oder suchen Sie nach einem anderen Namen."
: "Remova alguns filtros ou busque por outro nome."}
</p>
<button type="button" onClick={clearFilters} className="btn btn-primary mt-6">
{isEn ? "Clear filters" : isEs ? "Limpiar filtros" : "Limpar filtros"}
{isEn ? "Clear filters" : isEs ? "Limpiar filtros" : isFr ? "Effacer les filtres" : isDe ? "Filter zurücksetzen" : "Limpar filtros"}
</button>
</div>
) : (
app/[locale]/comparacao/layout.jsx
+52 -6
View File
@@ -4,12 +4,18 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEn ? "Compare ESP32 Series: Side-by-Side Table" : isEs ? "Comparar series ESP32: tabla comparativa" : "Comparar séries ESP32",
titulo: isEn ? "Compare ESP32 Series: Side-by-Side Table" : isEs ? "Comparar series ESP32: tabla comparativa" : isFr ? "Comparer les séries ESP32 : tableau comparatif" : isDe ? "ESP32-Serien vergleichen: Vergleichstabelle" : "Comparar séries ESP32",
descricao: isEn
? "Compare up to four ESP32 series side by side: processor, Wi-Fi, Bluetooth, memory, GPIO, peripherals, and hardware security, with official datasheet data."
: isEs
? "Compare hasta cuatro series de ESP32 frente a frente: procesador, Wi-Fi, Bluetooth, memoria, GPIO, periféricos y seguridad en hardware, con datos de hojas de datos oficiales."
: isFr
? "Comparez jusqu'à quatre séries d'ESP32 côte à côte : processeur, Wi-Fi, Bluetooth, mémoire, GPIO, périphériques et sécurité matérielle, avec les données des fiches techniques officielles."
: isDe
? "Vergleichen Sie bis zu vier ESP32-Serien nebeneinander: Prozessor, Wi-Fi, Bluetooth, Speicher, GPIO, Peripherie und Hardware-Sicherheit mit Daten aus offiziellen Datenblättern."
: "Compare até quatro séries de ESP32 lado a lado: processador, Wi-Fi, Bluetooth, memória, GPIO, periféricos e segurança em hardware, com os dados dos datasheets oficiais.",
caminho: "/comparacao",
locale,
@@ -17,6 +23,10 @@ export async function generateMetadata({ params }) {
? ["compare ESP32", "ESP32 vs ESP32-S3", "ESP32 comparison table", "which ESP32 is best"]
: isEs
? ["comparar ESP32", "ESP32 vs ESP32-S3", "tabla comparativa ESP32", "cuál ESP32 es mejor"]
: isFr
? ["comparer ESP32", "ESP32 vs ESP32-S3", "tableau comparatif ESP32", "quel ESP32 choisir"]
: isDe
? ["ESP32 vergleichen", "ESP32 vs ESP32-S3", "ESP32 Vergleichstabelle", "welcher ESP32 ist der beste"]
: ["comparar ESP32", "ESP32 vs ESP32-S3", "tabela comparativa ESP32", "qual ESP32 é melhor"],
});
}
@@ -66,12 +76,44 @@ const faqsEs = [
},
];
const faqsFr = [
{
pergunta: "Comment comparer les microcontrôleurs ESP32 côte à côte ?",
resposta: "Le comparateur d'ESPDocs vous permet de sélectionner jusqu'à quatre séries simultanément pour confronter architecture, fréquence d'horloge, mémoire SRAM/PSRAM, normes radio (Wi-Fi 4/6, Bluetooth 5/6, 802.15.4), interfaces de périphériques et blocs de sécurité matérielle.",
},
{
pergunta: "Quelle est la différence entre l'ESP32 classique et l'ESP32-S3 ?",
resposta: "L'ESP32 classique utilise des cœurs Xtensa LX6 et le Bluetooth classique/LE. L'ESP32-S3 intègre des cœurs Xtensa LX7 avec instructions vectorielles pour l'intelligence artificielle (TinyML), l'USB natif OTG, davantage de GPIOs (45 contre 36) et le Bluetooth 5.0 LE.",
},
{
pergunta: "Quelle est la différence entre l'ESP32-C3 et l'ESP32-C6 ?",
resposta: "L'ESP32-C3 est un microcontrôleur RISC-V avec Wi-Fi 4 et Bluetooth 5 LE. L'ESP32-C6 évolue vers le Wi-Fi 6 (802.11ax), le Bluetooth 5.4 LE, une radio IEEE 802.15.4 pour Zigbee 3.0 et Thread 1.3, ainsi qu'un coprocesseur à ultra-faible consommation.",
},
];
const faqsDe = [
{
pergunta: "Wie lassen sich ESP32-Mikrocontroller im direkten Vergleich gegenüberstellen?",
resposta: "Der ESPDocs-Vergleich ermöglicht es Ihnen, bis zu vier Serien gleichzeitig auszuwählen, um Architektur, Taktfrequenz, SRAM/PSRAM-Speicher, Funkstandards (Wi-Fi 4/6, Bluetooth 5/6, 802.15.4), Peripherieschnittstellen und Hardware-Sicherheitsblöcke zu vergleichen.",
},
{
pergunta: "Was ist der Unterschied zwischen dem klassischen ESP32 und dem ESP32-S3?",
resposta: "Der klassische ESP32 nutzt Xtensa-LX6-Kerne und klassisches Bluetooth/LE. Der ESP32-S3 bietet Xtensa-LX7-Kerne mit Vektoranweisungen für künstliche Intelligenz (TinyML), natives USB-OTG, mehr GPIOs (45 gegenüber 36) und Bluetooth 5.0 LE.",
},
{
pergunta: "Was ist der Unterschied zwischen ESP32-C3 und ESP32-C6?",
resposta: "Der ESP32-C3 ist ein RISC-V-Mikrocontroller mit Wi-Fi 4 und Bluetooth 5 LE. Der ESP32-C6 erweitert dies um Wi-Fi 6 (802.11ax), Bluetooth 5.4 LE, ein IEEE-802.15.4-Funkmodul für Zigbee 3.0 und Thread 1.3 sowie einen extrem stromsparenden Coprozessor.",
},
];
export default async function Layout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const faqs = isEn ? faqsEn : isEs ? faqsEs : faqsPt;
const canonPath = isEn ? "/en/compare" : isEs ? "/es/comparacion" : "/comparacao";
const isFr = locale === "fr";
const isDe = locale === "de";
const faqs = isEn ? faqsEn : isEs ? faqsEs : isFr ? faqsFr : isDe ? faqsDe : faqsPt;
const canonPath = isEn ? "/en/compare" : isEs ? "/es/comparacion" : isFr ? "/fr/comparaison" : isDe ? "/de/vergleich" : "/comparacao";
return (
<>
@@ -80,11 +122,15 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.aplicacaoWeb({
nome: isEn ? "ESP32 Series Comparator" : isEs ? "Comparador de series ESP32" : "Comparador de Séries ESP32",
nome: isEn ? "ESP32 Series Comparator" : isEs ? "Comparador de series ESP32" : isFr ? "Comparateur de séries ESP32" : isDe ? "ESP32-Serien-Vergleich" : "Comparador de Séries ESP32",
descricao: isEn
? "Technical comparison table to analyze specifications, pinouts, and features of multiple ESP32 series."
: isEs
? "Tabla comparativa técnica para analizar especificaciones, patillaje y características de múltiples series de ESP32."
: isFr
? "Tableau comparatif technique pour analyser les spécifications, le brochage et les fonctionnalités de plusieurs séries ESP32."
: isDe
? "Technische Vergleichstabelle zur Analyse von Spezifikationen, Pinbelegungen und Merkmalen mehrerer ESP32-Serien."
: "Tabela comparativa técnica para analisar especificações, pinagens e recursos de múltiplas séries de ESP32.",
caminho: canonPath,
locale,
@@ -97,8 +143,8 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEn ? "Home" : isEs ? "Inicio" : "Início", caminho: isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isEn ? "Compare Series" : isEs ? "Comparar series" : "Comparar Séries", caminho: canonPath },
{ nome: isEn ? "Home" : isEs ? "Inicio" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEn ? "/en" : isEs ? "/es" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: isEn ? "Compare Series" : isEs ? "Comparar series" : isFr ? "Comparer les séries" : isDe ? "Serien vergleichen" : "Comparar Séries", caminho: canonPath },
])
),
}}
app/[locale]/comparacao/page.jsx
+211 -21
View File
@@ -9,6 +9,8 @@ import Link from "next/link";
import seriesDataPt from "@/public/series.json";
import seriesDataEn from "@/data/en/series.json";
import seriesDataEs from "@/data/es/series.json";
import seriesDataFr from "@/data/fr/series.json";
import seriesDataDe from "@/data/de/series.json";
import { getLocalizedHref } from "@/i18n/links";
import { ArrowRight, ArrowUpRight, Check, ChevronDown, Scale } from "lucide-react";
@@ -257,19 +259,179 @@ const COMPARE_FIELDS_ES = [
]},
];
const COMPARE_FIELDS_FR = [
{ category: "Général", fields: [
{ key: "nome_completo", label: "Nom complet" },
{ key: "descricao", label: "Description" },
]},
{ category: "Disponibilité et outils", fields: [
{ key: "esp_idf_minimo", label: "ESP-IDF minimum" },
{ key: "arduino_core", label: "Core Arduino" },
{ key: "depuracao", label: "Débogage / JTAG" },
{ key: "encapsulamento", label: "Boîtier" },
{ key: "modulos", label: "Modules disponibles" },
]},
{ category: "Processeur", fields: [
{ key: "arquitetura", label: "Architecture" },
{ key: "nucleos", label: "Cœurs" },
{ key: "frequencia", label: "Fréquence" },
{ key: "coprocessador_ulp", label: "Coprocesseur ULP" },
{ key: "aceleradores_ia", label: "Accélérateurs IA" },
]},
{ category: "Connectivité", fields: [
{ key: "wifi", label: "Wi-Fi" },
{ key: "bluetooth", label: "Bluetooth" },
{ key: "zigbee_thread", label: "Zigbee/Thread" },
{ key: "matter", label: "Matter" },
{ key: "ethernet", label: "Ethernet" },
]},
{ category: "Mémoire", fields: [
{ key: "memoria_sram", label: "SRAM" },
{ key: "memoria_sram_rtc", label: "SRAM RTC" },
{ key: "memoria_rom", label: "ROM" },
{ key: "flash_externa", label: "Flash externe" },
{ key: "psram_externa", label: "PSRAM externe" },
]},
{ category: "Périphériques numériques", fields: [
{ key: "gpio", label: "GPIO" },
{ key: "uart", label: "UART" },
{ key: "spi", label: "SPI" },
{ key: "i2c", label: "I²C" },
{ key: "i2s", label: "I²S" },
{ key: "pwm", label: "PWM" },
{ key: "can", label: "CAN" },
{ key: "usb", label: "USB" },
{ key: "depuracao", label: "Débogage / JTAG" },
{ key: "sdio", label: "SDIO" },
]},
{ category: "Périphériques analogiques", fields: [
{ key: "adc", label: "ADC" },
{ key: "dac", label: "DAC" },
{ key: "touch", label: "Touch capacitif" },
{ key: "sensor_hall", label: "Capteur Hall" },
{ key: "sensor_temperatura", label: "Capteur de température" },
]},
{ category: "Sécurité", fields: [
{ key: "seguranca.aes", label: "AES" },
{ key: "seguranca.sha", label: "SHA" },
{ key: "seguranca.rsa", label: "RSA / MPI" },
{ key: "seguranca.ecc", label: "ECC (courbes elliptiques)" },
{ key: "seguranca.ecdsa", label: "ECDSA matériel" },
{ key: "seguranca.hmac", label: "HMAC" },
{ key: "seguranca.assinatura_digital", label: "Signature numérique (DS)" },
{ key: "seguranca.key_manager", label: "Key Manager" },
{ key: "seguranca.rng", label: "Générateur aléatoire (TRNG)" },
{ key: "seguranca.criptografia_flash", label: "Chiffrement de flash" },
{ key: "seguranca.secure_boot", label: "Secure Boot" },
{ key: "seguranca.protecao_dpa", label: "Protection contre DPA" },
]},
{ category: "Interfaces spéciales", fields: [
{ key: "lcd", label: "LCD" },
{ key: "camera", label: "Caméra" },
{ key: "mipi_csi", label: "MIPI CSI" },
{ key: "mipi_dsi", label: "MIPI DSI" },
{ key: "ethernet_mac", label: "Ethernet MAC" },
]},
{ category: "Spécifications environnementales", fields: [
{ key: "temperatura_operacao", label: "Temp. de fonctionnement" },
{ key: "temperatura_armazenamento", label: "Temp. de stockage" },
]},
];
const COMPARE_FIELDS_DE = [
{ category: "Allgemein", fields: [
{ key: "nome_completo", label: "Vollständiger Name" },
{ key: "descricao", label: "Beschreibung" },
]},
{ category: "Verfügbarkeit und Werkzeuge", fields: [
{ key: "esp_idf_minimo", label: "Mindest-ESP-IDF" },
{ key: "arduino_core", label: "Arduino-Core" },
{ key: "depuracao", label: "Debugging / JTAG" },
{ key: "encapsulamento", label: "Gehäuse" },
{ key: "modulos", label: "Verfügbare Module" },
]},
{ category: "Prozessor", fields: [
{ key: "arquitetura", label: "Architektur" },
{ key: "nucleos", label: "Kerne" },
{ key: "frequencia", label: "Taktfrequenz" },
{ key: "coprocessador_ulp", label: "ULP-Coprozessor" },
{ key: "aceleradores_ia", label: "KI-Beschleuniger" },
]},
{ category: "Konnektivität", fields: [
{ key: "wifi", label: "Wi-Fi" },
{ key: "bluetooth", label: "Bluetooth" },
{ key: "zigbee_thread", label: "Zigbee/Thread" },
{ key: "matter", label: "Matter" },
{ key: "ethernet", label: "Ethernet" },
]},
{ category: "Speicher", fields: [
{ key: "memoria_sram", label: "SRAM" },
{ key: "memoria_sram_rtc", label: "RTC-SRAM" },
{ key: "memoria_rom", label: "ROM" },
{ key: "flash_externa", label: "Externer Flash" },
{ key: "psram_externa", label: "Externer PSRAM" },
]},
{ category: "Digitale Peripherie", fields: [
{ key: "gpio", label: "GPIO" },
{ key: "uart", label: "UART" },
{ key: "spi", label: "SPI" },
{ key: "i2c", label: "I²C" },
{ key: "i2s", label: "I²S" },
{ key: "pwm", label: "PWM" },
{ key: "can", label: "CAN" },
{ key: "usb", label: "USB" },
{ key: "depuracao", label: "Debugging / JTAG" },
{ key: "sdio", label: "SDIO" },
]},
{ category: "Analoge Peripherie", fields: [
{ key: "adc", label: "ADC" },
{ key: "dac", label: "DAC" },
{ key: "touch", label: "Kapazitiver Touch" },
{ key: "sensor_hall", label: "Hall-Sensor" },
{ key: "sensor_temperatura", label: "Temperatursensor" },
]},
{ category: "Sicherheit", fields: [
{ key: "seguranca.aes", label: "AES" },
{ key: "seguranca.sha", label: "SHA" },
{ key: "seguranca.rsa", label: "RSA / MPI" },
{ key: "seguranca.ecc", label: "ECC (Elliptische Kurven)" },
{ key: "seguranca.ecdsa", label: "Hardware-ECDSA" },
{ key: "seguranca.hmac", label: "HMAC" },
{ key: "seguranca.assinatura_digital", label: "Digitale Signatur (DS)" },
{ key: "seguranca.key_manager", label: "Key Manager" },
{ key: "seguranca.rng", label: "Zufallsgenerator (TRNG)" },
{ key: "seguranca.criptografia_flash", label: "Flash-Verschlüsselung" },
{ key: "seguranca.secure_boot", label: "Secure Boot" },
{ key: "seguranca.protecao_dpa", label: "DPA-Schutz" },
]},
{ category: "Spezielle Schnittstellen", fields: [
{ key: "lcd", label: "LCD" },
{ key: "camera", label: "Kamera" },
{ key: "mipi_csi", label: "MIPI CSI" },
{ key: "mipi_dsi", label: "MIPI DSI" },
{ key: "ethernet_mac", label: "Ethernet MAC" },
]},
{ category: "Umgebungsbedingungen", fields: [
{ key: "temperatura_operacao", label: "Betriebstemp." },
{ key: "temperatura_armazenamento", label: "Lagertemp." },
]},
];
export default function Comparacao() {
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const compareFields = isEs ? COMPARE_FIELDS_ES : isEn ? COMPARE_FIELDS_EN : COMPARE_FIELDS_PT;
const isFr = pathname?.startsWith("/fr");
const isDe = pathname?.startsWith("/de");
const currentLocale = isEs ? "es" : isEn ? "en" : isFr ? "fr" : isDe ? "de" : "pt";
const seriesData = isEs ? seriesDataEs : isEn ? seriesDataEn : isFr ? seriesDataFr : isDe ? seriesDataDe : seriesDataPt;
const compareFields = isEs ? COMPARE_FIELDS_ES : isEn ? COMPARE_FIELDS_EN : isFr ? COMPARE_FIELDS_FR : isDe ? COMPARE_FIELDS_DE : COMPARE_FIELDS_PT;
const [selectedSeries, setSelectedSeries] = useState(["ESP32", "ESP32-S3"]);
const [soDiferencas, setSoDiferencas] = useState(false);
const [collapsedCategories, setCollapsedCategories] = useState(() => ({
[isEs ? "Interfaces especiales" : isEn ? "Special Interfaces" : "Interfaces Especiais"]: true,
[isEs ? "Especificaciones ambientales" : isEn ? "Environmental Specifications" : "Especificações Ambientais"]: true,
[isEs ? "Interfaces especiales" : isEn ? "Special Interfaces" : isFr ? "Interfaces spéciales" : isDe ? "Spezielle Schnittstellen" : "Interfaces Especiais"]: true,
[isEs ? "Especificaciones ambientales" : isEn ? "Environmental Specifications" : isFr ? "Spécifications environnementales" : isDe ? "Umgebungsbedingungen" : "Especificações Ambientais"]: true,
}));
const series = Object.entries(seriesData);
@@ -295,19 +457,19 @@ export default function Comparacao() {
};
const renderValue = (value) => {
if (!value || value === "Não" || value === "No") return <span className="text-muted">{isEs || isEn ? "No" : "Não"}</span>;
if (value === "Sim" || value === "Yes" || value === "Sí") {
if (!value || value === "Não" || value === "No" || value === "Non" || value === "Nein") return <span className="text-muted">{isEs || isEn ? "No" : isFr ? "Non" : isDe ? "Nein" : "Não"}</span>;
if (value === "Sim" || value === "Yes" || value === "Sí" || value === "Oui" || value === "Ja") {
return (
<span className="inline-flex items-center gap-1.5 font-medium text-ok">
<Check className="h-4 w-4" aria-hidden="true" />
{isEs ? "Sí" : isEn ? "Yes" : "Sim"}
{isEs ? "Sí" : isEn ? "Yes" : isFr ? "Oui" : isDe ? "Ja" : "Sim"}
</span>
);
}
return <span className="font-medium text-ink">{value}</span>;
};
const valores = (key) => selectedSeries.map((k) => String(valorDe(seriesData[k], key) ?? (isEs || isEn ? "No" : "Não")));
const valores = (key) => selectedSeries.map((k) => String(valorDe(seriesData[k], key) ?? (isEs || isEn ? "No" : isFr ? "Non" : isDe ? "Nein" : "Não")));
const diferem = (key) => new Set(valores(key)).size > 1;
return (
@@ -318,15 +480,21 @@ export default function Comparacao() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Comparador" : isEn ? "Comparator" : "Comparador" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEs ? "Comparador" : isEn ? "Comparator" : isFr ? "Comparateur" : isDe ? "Vergleich" : "Comparador" }]}
icon={Scale}
label={isEs ? "Hasta cuatro series lado a lado" : isEn ? "Up to four series side by side" : "Até quatro séries lado a lado"}
title={isEs ? "Comparador de series ESP32" : isEn ? "ESP32 Series Comparator" : "Comparador de séries"}
label={isEs ? "Hasta cuatro series lado a lado" : isEn ? "Up to four series side by side" : isFr ? "Jusqu'à quatre séries côte à côte" : isDe ? "Bis zu vier Serien im Vergleich" : "Até quatro séries lado a lado"}
title={isEs ? "Comparador de series ESP32" : isEn ? "ESP32 Series Comparator" : isFr ? "Comparateur de séries ESP32" : isDe ? "ESP32-Serien-Vergleich" : "Comparador de séries"}
lede={
isEs
? "Ponga núcleos, radio, memoria, periféricos y seguridad en la misma tabla y vea lo que realmente cambia de un chip a otro."
: isEn
? "Put cores, radio, memory, peripherals, and security in the same table and see what really changes from chip to chip."
: isFr
? "Placez les cœurs, la radio, la mémoire, les périphériques et la sécurité dans le même tableau et voyez ce qui change réellement d'une puce à l'autre."
: isDe
? "Stellen Sie Kerne, Funk, Speicher, Peripherie und Sicherheit in derselben Tabelle gegenüber und sehen Sie, was sich wirklich von Chip zu Chip ändert."
: "Coloque núcleos, rádio, memória, periféricos e segurança na mesma tabela e veja o que realmente muda de um chip para outro."
}
/>
@@ -340,6 +508,10 @@ export default function Comparacao() {
<>Elija de {MIN_SERIES} a {MAX_SERIES} series</>
) : isEn ? (
<>Choose {MIN_SERIES} to {MAX_SERIES} series</>
) : isFr ? (
<>Choisissez de {MIN_SERIES} à {MAX_SERIES} séries</>
) : isDe ? (
<>Wählen Sie {MIN_SERIES} bis {MAX_SERIES} Serien</>
) : (
<>Escolha de {MIN_SERIES} a {MAX_SERIES} séries</>
)}
@@ -355,6 +527,16 @@ export default function Comparacao() {
{selectedSeries.length} of {MAX_SERIES} selected
{selectedSeries.length === MAX_SERIES && ". Remove one to switch."}
</>
) : isFr ? (
<>
{selectedSeries.length} sur {MAX_SERIES} sélectionnées
{selectedSeries.length === MAX_SERIES && ". Supprimez-en une pour en changer."}
</>
) : isDe ? (
<>
{selectedSeries.length} von {MAX_SERIES} ausgewählt
{selectedSeries.length === MAX_SERIES && ". Entfernen Sie eine zum Wechseln."}
</>
) : (
<>
{selectedSeries.length} de {MAX_SERIES} selecionadas
@@ -389,7 +571,7 @@ export default function Comparacao() {
<section className="shell mt-8" aria-labelledby="tabela-titulo">
<div className="flex flex-wrap items-center justify-between gap-3">
<h2 id="tabela-titulo" className="text-base font-semibold text-ink">
{isEs ? "Especificaciones" : isEn ? "Specifications" : "Especificações"}
{isEs ? "Especificaciones" : isEn ? "Specifications" : isFr ? "Spécifications" : isDe ? "Spezifikationen" : "Especificações"}
</h2>
<label className="flex min-h-11 cursor-pointer items-center gap-2.5 text-sm font-medium text-ink-soft">
<input
@@ -398,7 +580,7 @@ export default function Comparacao() {
onChange={(e) => setSoDiferencas(e.target.checked)}
className="h-5 w-5 cursor-pointer accent-[var(--accent)]"
/>
{isEs ? "Mostrar solo diferencias" : isEn ? "Show differences only" : "Mostrar só as diferenças"}
{isEs ? "Mostrar solo diferencias" : isEn ? "Show differences only" : isFr ? "Afficher uniquement les différences" : isDe ? "Nur Unterschiede anzeigen" : "Mostrar só as diferenças"}
</label>
</div>
@@ -410,6 +592,10 @@ export default function Comparacao() {
<>Comparación de las series {selectedSeries.join(", ")}</>
) : isEn ? (
<>Comparison of series {selectedSeries.join(", ")}</>
) : isFr ? (
<>Comparaison des séries {selectedSeries.join(", ")}</>
) : isDe ? (
<>Vergleich der Serien {selectedSeries.join(", ")}</>
) : (
<>Comparação das séries {selectedSeries.join(", ")}</>
)}
@@ -417,7 +603,7 @@ export default function Comparacao() {
<thead>
<tr className="border-b border-line bg-surface-2">
<th scope="col" className="sticky left-0 z-20 w-28 bg-surface-2 px-4 py-4 text-left font-semibold text-muted sm:w-52 sm:px-6">
{isEs ? "Especificación" : isEn ? "Specification" : "Especificação"}
{isEs ? "Especificación" : isEn ? "Specification" : isFr ? "Spécification" : isDe ? "Spezifikation" : "Especificação"}
</th>
{selectedSeries.map((seriesKey) => (
<th key={seriesKey} scope="col" className="min-w-40 px-4 py-4 text-left sm:px-6">
@@ -474,7 +660,7 @@ export default function Comparacao() {
<section className="shell section" aria-labelledby="docs-titulo">
<h2 id="docs-titulo" className="section-title">
{isEs ? "Documentación oficial" : isEn ? "Official documentation" : "Documentação oficial"}
{isEs ? "Documentación oficial" : isEn ? "Official documentation" : isFr ? "Documentation officielle" : isDe ? "Offizielle Dokumentation" : "Documentação oficial"}
</h2>
<div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
{selectedSeries.map((seriesKey) => {
@@ -486,13 +672,13 @@ export default function Comparacao() {
</Link>
{seriesItem.datasheet ? (
<a href={seriesItem.datasheet} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
{isEs ? "Datasheet oficial" : isEn ? "Official datasheet" : "Datasheet oficial"}
{isEs ? "Datasheet oficial" : isEn ? "Official datasheet" : isFr ? "Fiche technique officielle" : isDe ? "Offizielles Datenblatt" : "Datasheet oficial"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : "(abre em nova aba)"}</span>
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : isFr ? "(ouvre un nouvel onglet)" : isDe ? "(öffnet in neuem Tab)" : "(abre em nova aba)"}</span>
</a>
) : (
<span className="text-sm text-muted">
{isEs ? "Datasheet aún no publicado" : isEn ? "Datasheet not yet published" : "Datasheet ainda não publicado"}
{isEs ? "Datasheet aún no publicado" : isEn ? "Datasheet not yet published" : isFr ? "Fiche technique pas encore publiée" : isDe ? "Datenblatt noch nicht veröffentlicht" : "Datasheet ainda não publicado"}
</span>
)}
</div>
@@ -503,18 +689,22 @@ export default function Comparacao() {
<div className="panel mt-10 flex flex-col items-start justify-between gap-6 p-7 sm:p-10 md:flex-row md:items-center">
<div className="max-w-2xl">
<h2 className="section-title">
{isEs ? "¿Desea probar en banco?" : isEn ? "Want to test on the bench?" : "Quer testar na bancada?"}
{isEs ? "¿Desea probar en banco?" : isEn ? "Want to test on the bench?" : isFr ? "Envie de tester sur l'établi ?" : isDe ? "Möchten Sie es auf dem Prüfplatz testen ?" : "Quer testar na bancada?"}
</h2>
<p className="mt-3 text-base text-muted">
{isEs
? "Vea las placas de desarrollo con patillaje, periféricos y enlace a la tienda oficial."
: isEn
? "Explore development boards with pinouts, peripherals, and official store links."
: isFr
? "Découvrez les cartes de développement avec brochage, périphériques et lien vers la boutique officielle."
: isDe
? "Entdecken Sie die Entwicklungsboards mit Pinbelegung, Peripherie und Link zum offiziellen Store."
: "Veja as placas de desenvolvimento com pinagem, periféricos e link para a loja."}
</p>
</div>
<Link href={getLocalizedHref("/catalogo", currentLocale)} className="btn btn-primary shrink-0">
{isEs ? "Ver catálogo de placas" : isEn ? "View boards catalog" : "Ver catálogo de placas"}
{isEs ? "Ver catálogo de placas" : isEn ? "View boards catalog" : isFr ? "Voir le catalogue de cartes" : isDe ? "Board-Katalog ansehen" : "Ver catálogo de placas"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
app/[locale]/componentes/layout.jsx
+84 -9
View File
@@ -4,16 +4,18 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEs
? "ESP Component Registry & IDF Component Manager · ESPDocs"
: isEn
? "ESP Component Registry & IDF Component Manager · ESPDocs"
: "ESP Component Registry & IDF Component Manager · ESPDocs",
titulo: "ESP Component Registry & IDF Component Manager · ESPDocs",
descricao: isEs
? "Catálogo interactivo del ESP Component Registry: controladores de pantalla, LVGL, reconocimiento de voz ESP-SR, RainMaker, BSPs y generador de idf_component.yml."
: isEn
? "Official interactive catalog of the ESP Component Registry: display drivers, LVGL, ESP-SR voice recognition, RainMaker, BSPs, and idf_component.yml generator."
: isFr
? "Catalogue interactif du ESP Component Registry : pilotes d'écran, LVGL, reconnaissance vocale ESP-SR, RainMaker, BSPs et générateur d'idf_component.yml."
: isDe
? "Interaktiver Katalog der ESP Component Registry: Display-Treiber, LVGL, ESP-SR-Sprachkennung, RainMaker, BSPs und idf_component.yml-Generator."
: "Catálogo oficial e interativo do ESP Component Registry: drivers de displays, LVGL, reconhecimento de voz ESP-SR, RainMaker, BSPs e gerador de idf_component.yml.",
caminho: "/componentes",
locale,
@@ -41,6 +43,30 @@ export async function generateMetadata({ params }) {
"espressif esp-sr",
"ESP-IDF libraries",
]
: isFr
? [
"ESP Component Registry",
"IDF Component Manager",
"idf_component.yml",
"idf.py add-dependency",
"composants ESP32",
"espressif esp_lvgl_port",
"espressif esp_rainmaker",
"espressif esp-sr",
"bibliothèques ESP-IDF",
]
: isDe
? [
"ESP Component Registry",
"IDF Component Manager",
"idf_component.yml",
"idf.py add-dependency",
"ESP32 Komponenten",
"espressif esp_lvgl_port",
"espressif esp_rainmaker",
"espressif esp-sr",
"ESP-IDF Bibliotheken",
]
: [
"ESP Component Registry",
"IDF Component Manager",
@@ -112,11 +138,52 @@ const faqsEs = [
},
];
const faqsFr = [
{
pergunta: "Qu'est-ce que l'ESP Component Registry et l'IDF Component Manager ?",
resposta: "L'ESP Component Registry (components.espressif.com) est le dépôt officiel de paquets modulaires d'Espressif. L'IDF Component Manager est l'outil intégré à ESP-IDF (dès la v4.4 et standard en v5.x+) qui télécharge, compile et résout automatiquement les versions des dépendances à partir du manifeste idf_component.yml.",
},
{
pergunta: "Comment ajouter un composant à mon projet ESP-IDF ?",
resposta: "Vous pouvez exécuter la commande 'idf.py add-dependency \"namespace/composant^version\"' dans le terminal de votre projet (par exemple : idf.py add-dependency \"espressif/esp_lvgl_port^2.4.0\") ou modifier directement le fichier main/idf_component.yml.",
},
{
pergunta: "Quelle est la différence entre le Component Registry et les sous-modules git ?",
resposta: "Le Component Registry élimine la complexité de gestion des sous-modules Git volumineux et des versions manuelles. Il apporte le versionnement sémantique (^ et ~), la résolution automatique des dépendances transitives et la compilation modulaire à la demande.",
},
{
pergunta: "Puis-je créer et publier mes propres composants ?",
resposta: "Oui, tout développeur ou entreprise peut publier des composants publics ou privés sur l'ESP Component Registry à l'aide de l'outil officiel Compote CLI (pip install idf-component-manager).",
},
];
const faqsDe = [
{
pergunta: "Was sind die ESP Component Registry und der IDF Component Manager?",
resposta: "Die ESP Component Registry (components.espressif.com) ist das offizielle Repository für modulare Espressif-Pakete. Der IDF Component Manager ist das in ESP-IDF (ab v4.4 und Standard in v5.x+) integrierte Werkzeug, das Abhängigkeiten anhand des idf_component.yml-Manifests automatisch herunterlädt, kompiliert und auflöst.",
},
{
pergunta: "Wie füge ich eine Komponente zu meinem ESP-IDF-Projekt hinzu?",
resposta: "Sie können den Befehl 'idf.py add-dependency \"namespace/komponente^version\"' im Projektterminal ausführen (z. B.: idf.py add-dependency \"espressif/esp_lvgl_port^2.4.0\") oder direkt die Datei main/idf_component.yml bearbeiten.",
},
{
pergunta: "Was ist der Unterschied zwischen der Component Registry und Git-Submodulen?",
resposta: "Die Component Registry beseitigt die Komplexität schwerfälliger Git-Submodule und manueller Versionsverwaltung. Sie bietet semantische Versionierung (^ und ~), automatische transitive Abhängigkeitsauflösung und modulare On-Demand-Kompilierung.",
},
{
pergunta: "Kann ich eigene Komponenten erstellen und veröffentlichen?",
resposta: "Ja, Entwickler und Unternehmen können öffentliche oder private Komponenten mit dem offiziellen Compote-CLI-Tool (pip install idf-component-manager) in der ESP Component Registry veröffentlichen.",
},
];
export default async function ComponentesLayout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const faqs = isEs ? faqsEs : isEn ? faqsEn : faqsPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const faqs = isEs ? faqsEs : isEn ? faqsEn : isFr ? faqsFr : isDe ? faqsDe : faqsPt;
const canonPath = isEs ? "/es/componentes" : isEn ? "/en/components" : isFr ? "/fr/composants" : isDe ? "/de/komponenten" : "/componentes";
return (
<>
@@ -125,8 +192,8 @@ export default async function ComponentesLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: "ESP Component Registry", caminho: isEs ? "/es/componentes" : isEn ? "/en/components" : "/componentes" },
{ nome: isEs ? "Inicio" : isEn ? "Home" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: "ESP Component Registry", caminho: canonPath },
])
),
}}
@@ -146,13 +213,21 @@ export default async function ComponentesLayout({ children, params }) {
? "Hub de ESP Component Registry & Generador de Manifiesto"
: isEn
? "ESP Component Registry Hub & Manifest Builder"
: isFr
? "Hub de l'ESP Component Registry & Générateur de Manifeste"
: isDe
? "ESP Component Registry Hub & Manifest-Generator"
: "Hub do ESP Component Registry & Construtor de Manifesto",
descricao: isEs
? "Catálogo curado y generador de manifiesto idf_component.yml para componentes modulares de ESP-IDF."
: isEn
? "Curated catalog and idf_component.yml manifest generator for modular ESP-IDF components."
: isFr
? "Catalogue sélectionné et générateur de manifeste idf_component.yml pour les composants modulaires d'ESP-IDF."
: isDe
? "Kuratierter Katalog und idf_component.yml-Manifest-Generator für modulare ESP-IDF-Komponenten."
: "Catálogo curado e gerador de manifesto idf_component.yml para componentes modulares do ESP-IDF.",
caminho: isEs ? "/es/componentes" : isEn ? "/en/components" : "/componentes",
caminho: canonPath,
locale,
})
),
app/[locale]/componentes/page.jsx
+75 -35
View File
@@ -9,6 +9,8 @@ import SectionHead from "@/components/SectionHead";
import * as componentesPt from "@/lib/componentRegistryData";
import * as componentesEn from "@/lib/data/en/componentes";
import * as componentesEs from "@/lib/data/es/componentes";
import * as componentesFr from "@/lib/data/fr/componentes";
import * as componentesDe from "@/lib/data/de/componentes";
import {
ArrowUpRight,
Box,
@@ -46,7 +48,9 @@ export default function ComponentRegistryPage() {
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const { CATEGORIAS_COMPONENTES, COMPONENTES_REGISTRY, GUIA_COMPONENT_MANAGER } = isEs ? componentesEs : isEn ? componentesEn : componentesPt;
const isFr = pathname?.startsWith("/fr");
const isDe = pathname?.startsWith("/de");
const { CATEGORIAS_COMPONENTES, COMPONENTES_REGISTRY, GUIA_COMPONENT_MANAGER } = isEs ? componentesEs : isEn ? componentesEn : isFr ? componentesFr : isDe ? componentesDe : componentesPt;
const [busca, setBusca] = useState("");
const [categoriaAtiva, setCategoriaAtiva] = useState("todos");
@@ -104,6 +108,10 @@ export default function ComponentRegistryPage() {
? `# No hay componentes seleccionados.\n# Haga clic en "+ Agregar al manifiesto" en las tarjetas de abajo.`
: isEn
? `# No components selected.\n# Click "+ Add to Manifest" on the cards below.`
: isFr
? `# Aucun composant sélectionné.\n# Cliquez sur "+ Ajouter au manifeste" sur les cartes ci-dessous.`
: isDe
? `# Keine Komponenten ausgewählt.\n# Klicken Sie auf den Karten unten auf "+ Zum Manifest hinzufügen".`
: `# Nenhum componente selecionado.\n# Clique em "+ Adicionar ao Manifesto" nos cards abaixo.`;
}
@@ -111,12 +119,16 @@ export default function ComponentRegistryPage() {
? `# main/idf_component.yml\n# Generado mediante ESPDocs Component Hub (https://espdocs.cienciaembarcada.com.br/es/componentes)\n\ndependencies:\n`
: isEn
? `# main/idf_component.yml\n# Generated via ESPDocs Component Hub (https://espdocs.cienciaembarcada.com.br/en/components)\n\ndependencies:\n`
: isFr
? `# main/idf_component.yml\n# Généré via ESPDocs Component Hub (https://espdocs.cienciaembarcada.com.br/fr/composants)\n\ndependencies:\n`
: isDe
? `# main/idf_component.yml\n# Erstellt über den ESPDocs Component Hub (https://espdocs.cienciaembarcada.com.br/de/komponenten)\n\ndependencies:\n`
: `# main/idf_component.yml\n# Gerado via ESPDocs Component Hub (https://espdocs.cienciaembarcada.com.br/componentes)\n\ndependencies:\n`;
selecionados.forEach((c) => {
yaml += ` ${c.namespace}/${c.name}: "${c.versao}"\n`;
});
return yaml;
}, [componentesSelecionados, COMPONENTES_REGISTRY, isEn, isEs]);
}, [componentesSelecionados, COMPONENTES_REGISTRY, isEn, isEs, isFr, isDe]);
const copiarManifesto = () => {
navigator.clipboard.writeText(manifestoYaml);
@@ -152,7 +164,9 @@ export default function ComponentRegistryPage() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Component Registry" : isEn ? "Component Registry" : "Component Registry" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEs ? "Component Registry" : isEn ? "Component Registry" : isFr ? "Component Registry" : isDe ? "Component Registry" : "Component Registry" }]}
icon={Box}
label="ESP-IDF Component Manager"
title="ESP Component Registry"
@@ -161,24 +175,28 @@ export default function ComponentRegistryPage() {
? "El catálogo oficial de paquetes reutilizables de Espressif para ESP-IDF. Elija controladores, voz y pilas industriales, copie el comando y genere el manifiesto del proyecto."
: isEn
? "Official Espressif catalog of reusable packages for ESP-IDF. Choose drivers, voice stacks, and industrial protocols, copy commands, and generate project manifests."
: isFr
? "Le catalogue officiel de paquets réutilisables d'Espressif pour ESP-IDF. Choisissez vos pilotes, piles vocales et protocoles industriels, copiez la commande et générez le manifeste du projet."
: isDe
? "Der offizielle Espressif-Katalog für wiederverwendbare Pakete für ESP-IDF. Wählen Sie Treiber, Sprach- und Industrieprotokolle, kopieren Sie den Befehl und erstellen Sie das Projektmanifest."
: "O catálogo oficial de pacotes reutilizáveis da Espressif para o ESP-IDF. Escolha drivers, voz e pilhas industriais, copie o comando e gere o manifesto do projeto."
}
>
<a href="https://components.espressif.com" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
{isEs ? "Abrir el registro oficial" : isEn ? "Open official registry" : "Abrir o registro oficial"}
{isEs ? "Abrir el registro oficial" : isEn ? "Open official registry" : isFr ? "Ouvrir le registre officiel" : isDe ? "Offizielles Repository öffnen" : "Abrir o registro oficial"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : "(abre em nova aba)"}</span>
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : isFr ? "(ouvre un nouvel onglet)" : isDe ? "(öffnet in neuem Tab)" : "(abre em nova aba)"}</span>
</a>
<a href="#manifesto-builder" className="btn btn-ghost">
{isEs ? "Generar idf_component.yml" : isEn ? "Generate idf_component.yml" : "Gerar idf_component.yml"}
{isEs ? "Generar idf_component.yml" : isEn ? "Generate idf_component.yml" : isFr ? "Générer idf_component.yml" : isDe ? "idf_component.yml erstellen" : "Gerar idf_component.yml"}
</a>
</PageHero>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Búsqueda y filtros" : isEn ? "Search and filters" : "Busca e filtros"}>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Búsqueda y filtros" : isEn ? "Search and filters" : isFr ? "Recherche et filtres" : isDe ? "Suche und Filter" : "Busca e filtros"}>
<div className="panel p-5 sm:p-6">
<div className="relative">
<label htmlFor="busca-componente" className="sr-only">
{isEs ? "Buscar por nombre, namespace o etiqueta" : isEn ? "Search by name, namespace, or tag" : "Buscar por nome, namespace ou tag"}
{isEs ? "Buscar por nombre, namespace o etiqueta" : isEn ? "Search by name, namespace, or tag" : isFr ? "Rechercher par nom, namespace ou tag" : isDe ? "Nach Name, Namespace oder Tag suchen" : "Buscar por nome, namespace ou tag"}
</label>
<Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-muted" aria-hidden="true" />
<input
@@ -186,14 +204,14 @@ export default function ComponentRegistryPage() {
type="search"
value={busca}
onChange={(e) => setBusca(e.target.value)}
placeholder={isEs ? "Buscar por nombre, namespace o etiqueta" : isEn ? "Search by name, namespace, or tag" : "Buscar por nome, namespace ou tag"}
placeholder={isEs ? "Buscar por nombre, namespace o etiqueta" : isEn ? "Search by name, namespace, or tag" : isFr ? "Rechercher par nom, namespace ou tag" : isDe ? "Nach Name, Namespace oder Tag suchen" : "Buscar por nome, namespace ou tag"}
autoComplete="off"
className="field pl-12 pr-4 text-base"
/>
</div>
<div className="mt-5">
<h2 className="text-sm font-semibold text-ink">{isEs ? "Categoría" : isEn ? "Category" : "Categoria"}</h2>
<h2 className="text-sm font-semibold text-ink">{isEs ? "Categoría" : isEn ? "Category" : isFr ? "Catégorie" : isDe ? "Kategorie" : "Categoria"}</h2>
<div className="mt-3 flex flex-wrap gap-2">
{CATEGORIAS_COMPONENTES.map((cat) => {
const Icone = ICONES_CATEGORIA[cat.id] ?? Layers;
@@ -201,7 +219,7 @@ export default function ComponentRegistryPage() {
return (
<button key={cat.id} type="button" onClick={() => setCategoriaAtiva(cat.id)} aria-pressed={categoriaAtiva === cat.id} className="chip-btn">
<Icone className="h-4 w-4" aria-hidden="true" />
{cat.id === "todos" ? (isEs ? "Todos" : isEn ? "All" : "Todos") : cat.nome.replace(/\s*\(.*\)/, "").split(",")[0].split(" &")[0]}
{cat.id === "todos" ? (isEs ? "Todos" : isEn ? "All" : isFr ? "Tous" : isDe ? "Alle" : "Todos") : cat.nome.replace(/\s*\(.*\)/, "").split(",")[0].split(" &")[0]}
<span className="tabular-nums opacity-80">{contagem}</span>
</button>
);
@@ -210,11 +228,11 @@ export default function ComponentRegistryPage() {
</div>
<div className="mt-5 border-t border-line pt-5">
<h2 className="text-sm font-semibold text-ink">{isEs ? "Chip compatible" : isEn ? "Compatible chip" : "Chip compatível"}</h2>
<h2 className="text-sm font-semibold text-ink">{isEs ? "Chip compatible" : isEn ? "Compatible chip" : isFr ? "Puce compatible" : isDe ? "Kompatibler Chip" : "Chip compatível"}</h2>
<div className="mt-3 flex flex-wrap gap-2">
{chipsDisponiveis.map((chip) => (
<button key={chip} type="button" onClick={() => setChipFiltro(chip)} aria-pressed={chipFiltro === chip} className="chip-btn">
{chip === "todos" ? (isEs ? "Todos" : isEn ? "All" : "Todos") : chip}
{chip === "todos" ? (isEs ? "Todos" : isEn ? "All" : isFr ? "Tous" : isDe ? "Alle" : "Todos") : chip}
</button>
))}
</div>
@@ -225,17 +243,17 @@ export default function ComponentRegistryPage() {
<section className="shell section pt-8 sm:pt-10" aria-labelledby="lista-titulo">
<div className="flex flex-wrap items-center justify-between gap-3">
<h2 id="lista-titulo" role="status" aria-live="polite" className="text-base font-semibold text-ink">
{componentesFiltrados.length} {componentesFiltrados.length === 1 ? (isEs ? "componente" : isEn ? "component" : "componente") : (isEs ? "componentes" : isEn ? "components" : "componentes")}
{componentesFiltrados.length} {componentesFiltrados.length === 1 ? (isEs ? "componente" : isEn ? "component" : isFr ? "composant" : isDe ? "Komponente" : "componente") : (isEs ? "componentes" : isEn ? "components" : isFr ? "composants" : isDe ? "Komponenten" : "componentes")}
</h2>
<div className="flex flex-wrap items-center gap-x-5 gap-y-1">
{totalFiltros > 0 && (
<button type="button" onClick={limparFiltros} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
<X className="h-4 w-4" aria-hidden="true" />
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : "Limpar filtros"}
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : isFr ? "Effacer les filtres" : isDe ? "Filter zurücksetzen" : "Limpar filtros"}
</button>
)}
<a href="#manifesto-builder" className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
{isEs ? "Manifiesto:" : isEn ? "Manifest:" : "Manifesto:"} {componentesSelecionados.length} {componentesSelecionados.length === 1 ? (isEs ? "componente" : isEn ? "component" : "componente") : (isEs ? "componentes" : isEn ? "components" : "componentes")}
{isEs ? "Manifiesto:" : isEn ? "Manifest:" : isFr ? "Manifeste :" : isDe ? "Manifest :" : "Manifesto:"} {componentesSelecionados.length} {componentesSelecionados.length === 1 ? (isEs ? "componente" : isEn ? "component" : isFr ? "composant" : isDe ? "Komponente" : "componente") : (isEs ? "componentes" : isEn ? "components" : isFr ? "composants" : isDe ? "Komponenten" : "componentes")}
</a>
</div>
</div>
@@ -244,17 +262,21 @@ export default function ComponentRegistryPage() {
<div className="card mt-6 px-6 py-14 text-center">
<Box className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
<h3 className="mt-4 font-display text-xl font-semibold text-ink">
{isEs ? "No se encontraron componentes" : isEn ? "No components found" : "Nenhum componente encontrado"}
{isEs ? "No se encontraron componentes" : isEn ? "No components found" : isFr ? "Aucun composant trouvé" : isDe ? "Keine Komponenten gefunden" : "Nenhum componente encontrado"}
</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-muted">
{isEs
? "Busque por un término más general o regrese a todas las categorías."
: isEn
? "Search for a more general term or return to all categories."
: isFr
? "Recherchez un terme plus général ou revenez à toutes les catégories."
: isDe
? "Suchen Sie nach einem allgemeineren Begriff oder kehren Sie zu allen Kategorien zurück."
: "Busque por um termo mais geral ou volte para todas as categorias."}
</p>
<button type="button" onClick={limparFiltros} className="btn btn-primary mt-6">
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : "Limpar filtros"}
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : isFr ? "Effacer les filtres" : isDe ? "Filter zurücksetzen" : "Limpar filtros"}
</button>
</div>
) : (
@@ -274,7 +296,7 @@ export default function ComponentRegistryPage() {
{comp.oficial && (
<span className="chip chip-accent px-2 py-0">
<ShieldCheck className="h-3 w-3" aria-hidden="true" />
{isEs ? "Oficial" : isEn ? "Official" : "Oficial"}
{isEs ? "Oficial" : isEn ? "Official" : isFr ? "Officiel" : isDe ? "Offiziell" : "Oficial"}
</span>
)}
</p>
@@ -298,12 +320,12 @@ export default function ComponentRegistryPage() {
type="button"
onClick={() => copiarComando(comp.id, cliCmd)}
className="code-panel flex w-full min-h-11 items-center justify-between gap-3 rounded-lg px-3 py-2 text-left font-mono text-xs transition-colors hover:border-white/30"
aria-label={isEs ? `Copiar comando para agregar ${comp.name}` : isEn ? `Copy command to add ${comp.name}` : `Copiar comando para adicionar ${comp.name}`}
aria-label={isEs ? `Copiar comando para agregar ${comp.name}` : isEn ? `Copy command to add ${comp.name}` : isFr ? `Copier la commande pour ajouter ${comp.name}` : isDe ? `Befehl zum Hinzufügen von ${comp.name} kopieren` : `Copiar comando para adicionar ${comp.name}`}
>
<span className="truncate text-[#e9eef4]">{cliCmd}</span>
{foiCopiado ? <Check className="h-4 w-4 shrink-0 text-[#5fe0a2]" aria-hidden="true" /> : <Copy className="h-4 w-4 shrink-0 text-[#a6afbd]" aria-hidden="true" />}
</button>
<p role="status" className="sr-only">{foiCopiado ? (isEs ? "Comando copiado" : isEn ? "Command copied" : "Comando copiado") : ""}</p>
<p role="status" className="sr-only">{foiCopiado ? (isEs ? "Comando copiado" : isEn ? "Command copied" : isFr ? "Commande copiée" : isDe ? "Befehl kopiert" : "Comando copiado") : ""}</p>
<p className="mt-3 text-xs text-muted">
<span className="font-medium text-ink-soft">Chips: </span>
@@ -319,14 +341,14 @@ export default function ComponentRegistryPage() {
className={`btn btn-sm ${selecionado ? "btn-primary" : "btn-ghost"}`}
>
{selecionado ? <Check className="h-4 w-4" aria-hidden="true" /> : <Plus className="h-4 w-4" aria-hidden="true" />}
{selecionado ? (isEs ? "En manifiesto" : isEn ? "In manifest" : "No manifesto") : (isEs ? "Agregar al manifiesto" : isEn ? "Add to manifest" : "Adicionar ao manifesto")}
{selecionado ? (isEs ? "En manifiesto" : isEn ? "In manifest" : isFr ? "Dans le manifeste" : isDe ? "Im Manifest" : "No manifesto") : (isEs ? "Agregar al manifiesto" : isEn ? "Add to manifest" : isFr ? "Ajouter au manifeste" : isDe ? "Zum Manifest hinzufügen" : "Adicionar ao manifesto")}
</button>
<a
href={comp.urlRegistry}
target="_blank"
rel="noopener noreferrer"
className="btn-icon inline-flex h-11 w-11 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-accent"
aria-label={isEs ? `Abrir ${comp.name} en el registro oficial (nueva pestaña)` : isEn ? `Open ${comp.name} in official registry (new tab)` : `Abrir ${comp.name} no registro oficial (nova aba)`}
aria-label={isEs ? `Abrir ${comp.name} en el registro oficial (nueva pestaña)` : isEn ? `Open ${comp.name} in official registry (new tab)` : isFr ? `Ouvrir ${comp.name} sur le registre officiel (nouvel onglet)` : isDe ? `${comp.name} in der offiziellen Registry öffnen (neuer Tab)` : `Abrir ${comp.name} no registro oficial (nova aba)`}
>
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
@@ -342,15 +364,19 @@ export default function ComponentRegistryPage() {
<div className="panel p-6 sm:p-9">
<div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
<div className="max-w-2xl">
<p className="eyebrow">{isEs ? "Generador de manifiesto" : isEn ? "Manifest generator" : "Gerador de manifesto"}</p>
<p className="eyebrow">{isEs ? "Generador de manifiesto" : isEn ? "Manifest generator" : isFr ? "Générateur de manifeste" : isDe ? "Manifest-Generator" : "Gerador de manifesto"}</p>
<h2 id="manifesto-titulo" className="section-title mt-3">
{isEs ? "Su idf_component.yml" : isEn ? "Your idf_component.yml" : "Seu idf_component.yml"}
{isEs ? "Su idf_component.yml" : isEn ? "Your idf_component.yml" : isFr ? "Votre idf_component.yml" : isDe ? "Ihre idf_component.yml" : "Seu idf_component.yml"}
</h2>
<p className="mt-3 text-sm leading-relaxed text-muted">
{isEs ? (
<>Guarde el archivo en la carpeta <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">main/</code> del proyecto y ESP-IDF descargará todas las bibliotecas durante la compilación.</>
) : isEn ? (
<>Save this file in your project&apos;s <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">main/</code> folder and ESP-IDF will download all dependencies during build.</>
) : isFr ? (
<>Enregistrez le fichier dans le dossier <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">main/</code> du projet et ESP-IDF téléchargera toutes les bibliothèques lors de la compilation.</>
) : isDe ? (
<>Speichern Sie die Datei im Ordner <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">main/</code> Ihres Projekts, und ESP-IDF lädt beim Build alle Abhängigkeiten herunter.</>
) : (
<>Salve o arquivo na pasta <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">main/</code> do projeto e o ESP-IDF baixa todas as bibliotecas na compilação.</>
)}
@@ -359,27 +385,27 @@ export default function ComponentRegistryPage() {
<div className="flex flex-wrap items-center gap-2">
<button type="button" onClick={copiarManifesto} className="btn btn-primary btn-sm">
{manifestoCopiado ? <Check className="h-4 w-4" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
<span role="status">{manifestoCopiado ? (isEs ? "Copiado" : isEn ? "Copied" : "Copiado") : (isEs ? "Copiar YAML" : isEn ? "Copy YAML" : "Copiar YAML")}</span>
<span role="status">{manifestoCopiado ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar YAML" : isEn ? "Copy YAML" : isFr ? "Copier le YAML" : isDe ? "YAML kopieren" : "Copiar YAML")}</span>
</button>
<button type="button" onClick={baixarManifesto} className="btn btn-ghost btn-sm">
<Download className="h-4 w-4" aria-hidden="true" />
{isEs ? "Descargar .yml" : isEn ? "Download .yml" : "Baixar .yml"}
{isEs ? "Descargar .yml" : isEn ? "Download .yml" : isFr ? "Télécharger .yml" : isDe ? ".yml herunterladen" : "Baixar .yml"}
</button>
{componentesSelecionados.length > 0 && (
<button type="button" onClick={() => setComponentesSelecionados([])} className="btn btn-ghost btn-sm">
<Trash2 className="h-4 w-4" aria-hidden="true" />
{isEs ? "Limpiar" : isEn ? "Clear" : "Limpar"}
{isEs ? "Limpiar" : isEn ? "Clear" : isFr ? "Effacer" : isDe ? "Leeren" : "Limpar"}
</button>
)}
</div>
</div>
<div className="code-panel mt-6">
<pre tabIndex={0} aria-label={isEs ? "Contenido de idf_component.yml" : isEn ? "Content of idf_component.yml" : "Conteúdo do idf_component.yml"} className="!text-sm"><code className="text-[#e9eef4]">{manifestoYaml}</code></pre>
<pre tabIndex={0} aria-label={isEs ? "Contenido de idf_component.yml" : isEn ? "Content of idf_component.yml" : isFr ? "Contenu de idf_component.yml" : isDe ? "Inhalt von idf_component.yml" : "Conteúdo do idf_component.yml"} className="!text-sm"><code className="text-[#e9eef4]">{manifestoYaml}</code></pre>
</div>
{componentesSelecionados.length > 0 && (
<ul className="mt-5 flex flex-wrap items-center gap-2" aria-label={isEs ? "Componentes incluidos" : isEn ? "Included components" : "Componentes incluídos"}>
<ul className="mt-5 flex flex-wrap items-center gap-2" aria-label={isEs ? "Componentes incluidos" : isEn ? "Included components" : isFr ? "Composants inclus" : isDe ? "Enthaltene Komponenten" : "Componentes incluídos"}>
{componentesSelecionados.map((id) => {
const c = COMPONENTES_REGISTRY.find((item) => item.id === id);
if (!c) return null;
@@ -390,7 +416,7 @@ export default function ComponentRegistryPage() {
type="button"
onClick={() => toggleSelecaoManifesto(id)}
className="-my-2 grid h-11 w-11 place-items-center rounded-full hover:bg-accent/15"
aria-label={isEs ? `Eliminar ${c.name} del manifiesto` : isEn ? `Remove ${c.name} from manifest` : `Remover ${c.name} do manifesto`}
aria-label={isEs ? `Eliminar ${c.name} del manifiesto` : isEn ? `Remove ${c.name} from manifest` : isFr ? `Retirer ${c.name} du manifeste` : isDe ? `${c.name} aus dem Manifest entfernen` : `Remover ${c.name} do manifesto`}
>
<X className="h-3.5 w-3.5" aria-hidden="true" />
</button>
@@ -403,7 +429,7 @@ export default function ComponentRegistryPage() {
</section>
<section className="shell section border-t border-line pt-14" aria-labelledby="guia-titulo">
<SectionHead id="guia-titulo" eyebrow={isEs ? "Guía rápida" : isEn ? "Quick guide" : "Guia rápido"} title={GUIA_COMPONENT_MANAGER.titulo} lede={GUIA_COMPONENT_MANAGER.resumo} />
<SectionHead id="guia-titulo" eyebrow={isEs ? "Guía rápida" : isEn ? "Quick guide" : isFr ? "Guide rapide" : isDe ? "Kurzanleitung" : "Guia rápido"} title={GUIA_COMPONENT_MANAGER.titulo} lede={GUIA_COMPONENT_MANAGER.resumo} />
<ul className="mt-8 grid gap-3 md:grid-cols-2 lg:grid-cols-4">
{GUIA_COMPONENT_MANAGER.vantagens.map((v) => (
@@ -416,7 +442,7 @@ export default function ComponentRegistryPage() {
<h3 className="mt-12 flex items-center gap-2 font-display text-xl font-semibold tracking-[-0.03em] text-ink">
<Terminal className="h-5 w-5 text-accent" aria-hidden="true" />
{isEs ? "Comandos esenciales" : isEn ? "Essential commands" : "Comandos essenciais"}
{isEs ? "Comandos esenciales" : isEn ? "Essential commands" : isFr ? "Commandes essentielles" : isDe ? "Wichtige Befehle" : "Comandos essenciais"}
</h3>
<ul className="mt-4 space-y-3">
{GUIA_COMPONENT_MANAGER.comandosCli.map((cmd, i) => (
@@ -431,7 +457,7 @@ export default function ComponentRegistryPage() {
className="inline-flex min-h-11 shrink-0 items-center gap-1.5 self-start rounded-full border border-white/15 px-4 text-sm font-medium text-[#e9eef4] transition-colors hover:bg-white/10 md:self-auto"
>
{copiadoId === `cmd-${i}` ? <Check className="h-4 w-4 text-[#5fe0a2]" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
{copiadoId === `cmd-${i}` ? (isEs ? "Copiado" : isEn ? "Copied" : "Copiado") : (isEs ? "Copiar" : isEn ? "Copy" : "Copiar")}
{copiadoId === `cmd-${i}` ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar" : isEn ? "Copy" : isFr ? "Copier" : isDe ? "Kopieren" : "Copiar")}
</button>
</li>
))}
@@ -440,7 +466,7 @@ export default function ComponentRegistryPage() {
<div className="callout mt-8">
<h3 className="flex items-center gap-2 font-semibold text-ink">
<HelpCircle className="h-4 w-4 text-accent" aria-hidden="true" />
{isEs ? "Versionamiento semántico en ESP-IDF" : isEn ? "Semantic versioning in ESP-IDF" : "Versionamento semântico no ESP-IDF"}
{isEs ? "Versionamiento semántico en ESP-IDF" : isEn ? "Semantic versioning in ESP-IDF" : isFr ? "Versionnement sémantique dans ESP-IDF" : isDe ? "Semantische Versionierung in ESP-IDF" : "Versionamento semântico no ESP-IDF"}
</h3>
<ul className="mt-2 list-disc space-y-1.5 pl-5">
{isEs ? (
@@ -457,6 +483,20 @@ export default function ComponentRegistryPage() {
<li><code>1.2.0</code>: locks to this exact version.</li>
<li><code>*</code>: accepts any version. Avoid in production.</li>
</>
) : isFr ? (
<>
<li><code>^1.2.0</code>: accepte les mises à jour mineures et les correctifs (1.2.1, 1.3.0), mais bloque les changements majeurs d'API (2.0.0). <strong>Recommandé.</strong></li>
<li><code>~1.2.0</code>: accepte uniquement les correctifs de bugs (1.2.1, 1.2.5).</li>
<li><code>1.2.0</code>: verrouille sur cette version exacte.</li>
<li><code>*</code>: accepte n'importe quelle version. À éviter en production.</li>
</>
) : isDe ? (
<>
<li><code>^1.2.0</code>: akzeptiert Minor-Updates und Bugfixes (1.2.1, 1.3.0), blockiert aber Breaking Changes (2.0.0). <strong>Empfohlen.</strong></li>
<li><code>~1.2.0</code>: akzeptiert nur Patch-Releases (1.2.1, 1.2.5).</li>
<li><code>1.2.0</code>: bindet fest an diese Version.</li>
<li><code>*</code>: akzeptiert jede Version. In Produktion vermeiden.</li>
</>
) : (
<>
<li><code>^1.2.0</code>: aceita atualizações menores e correções (1.2.1, 1.3.0), mas bloqueia mudanças grandes de API (2.0.0). <strong>Recomendado.</strong></li>
app/[locale]/diagnostico/layout.jsx
+82 -5
View File
@@ -4,16 +4,26 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEs
? "Diagnóstico de errores comunes en ESP32: Guía profesional"
: isEn
? "Common ESP32 Errors & Diagnostics: Professional Guide"
: isFr
? "Diagnostic des erreurs courantes sur ESP32 : guide professionnel"
: isDe
? "Diagnose häufiger ESP32-Fehler: Professioneller Leitfaden"
: "Diagnóstico de Erros Comuns no ESP32: Guia Profissional",
descricao: isEs
? "Guía técnica definitiva para identificar y solucionar Brownout, Guru Meditation, Task Watchdog, Stack Overflow, fugas de memoria y fallas de arranque en ESP32 (Arduino y ESP-IDF)."
: isEn
? "Definitive technical guide to identify and fix Brownout, Guru Meditation, Task Watchdog, Stack Overflow, memory leaks, and boot issues on ESP32 (Arduino & ESP-IDF)."
: isFr
? "Guide technique pour identifier et résoudre Brownout, Guru Meditation, Task Watchdog, Stack Overflow, fuites de mémoire et pannes de démarrage sur ESP32 (Arduino et ESP-IDF)."
: isDe
? "Technischer Leitfaden zur Behebung von Brownout, Guru Meditation, Task Watchdog, Stack Overflow, Speicherlecks und Boot-Problemen beim ESP32 (Arduino & ESP-IDF)."
: "Guia técnico definitivo para identificar e resolver Brownout, Guru Meditation, Task Watchdog, Stack Overflow, vazamento de memória e falhas de boot no ESP32 (Arduino e ESP-IDF).",
caminho: "/diagnostico",
locale,
@@ -39,6 +49,28 @@ export async function generateMetadata({ params }) {
"ESP32 bootloop rebooting",
"failed to connect to esp32",
]
: isFr
? [
"erreurs courantes ESP32",
"brownout detector was triggered",
"guru meditation error",
"task watchdog got triggered",
"stack canary watchpoint triggered",
"comment déboguer ESP32",
"ESP32 redémarre en boucle",
"failed to connect to esp32",
]
: isDe
? [
"häufige ESP32-Fehler",
"brownout detector was triggered",
"guru meditation error",
"task watchdog got triggered",
"stack canary watchpoint triggered",
"ESP32 debuggen",
"ESP32 Bootloop Neustart",
"failed to connect to esp32",
]
: [
"erros comuns ESP32",
"brownout detector was triggered",
@@ -109,11 +141,52 @@ const faqsEs = [
},
];
const faqsFr = [
{
pergunta: "Quelle est la cause de l'erreur 'Brownout detector was triggered' sur l'ESP32 ?",
resposta: "Elle survient lorsque la tension sur la broche 3V3 chute sous 2.8V ~ 2.43V en raison des pics rapides de courant de la radio Wi-Fi/BLE (dépassant 500mA), de câbles USB trop fins ou d'un régulateur LDO sous-dimensionné. La solution d'ingénierie consiste à ajouter des condensateurs Low-ESR de 10µF à 100µF près du VCC et à utiliser un régulateur LDO robuste de 600mA+.",
},
{
pergunta: "Comment résoudre le 'Guru Meditation Error (LoadProhibited)' ?",
resposta: "LoadProhibited indique une tentative d'accès à un pointeur nul (NULL) ou invalide en mémoire. La solution consiste à utiliser l'Espressif Exception Decoder ou addr2line pour identifier la ligne exacte du code et à appliquer des vérifications défensives telles que if (pointeur != NULL).",
},
{
pergunta: "Pourquoi le Task Watchdog Timer (TWDT) se déclenche-t-il sous FreeRTOS ?",
resposta: "Le TWDT se déclenche lorsqu'une tâche de priorité plus élevée monopolise le CPU dans une boucle bloquante (par exemple : while(1) sans vTaskDelay), empêchant la tâche IDLE de nourrir le watchdog du système d'exploitation.",
},
{
pergunta: "Pourquoi les connexions HTTPS et TLS échouent-elles avec l'erreur -0x2700 sur l'ESP32 ?",
resposta: "Au démarrage, l'horloge interne de l'ESP32 démarre à l'année 1970. Le validateur de certificats TLS considère le certificat du serveur invalide car situé dans le 'futur'. Synchroniser l'horloge via SNTP (configTime) avant la connexion résout le problème.",
},
];
const faqsDe = [
{
pergunta: "Was verursacht den Fehler 'Brownout detector was triggered' beim ESP32?",
resposta: "Er tritt auf, wenn die Spannung an der 3V3-Leitung durch schnelle Stromspitzen des Wi-Fi/BLE-Funkmoduls (über 500mA), dünne USB-Kabel oder einen unterdimensionierten LDO-Regler unter 2.8V ~ 2.43V abfällt. Die Lösung besteht darin, Low-ESR-Kondensatoren von 10µF bis 100µF nahe an VCC zu platzieren und robuste LDO-Regler mit 600mA+ einzusetzen.",
},
{
pergunta: "Wie behebt man den 'Guru Meditation Error (LoadProhibited)'?",
resposta: "LoadProhibited weist auf den Versuch hin, auf einen Null-Zeiger (NULL) oder eine ungültige Speicheradresse zuzugreifen. Die Lösung besteht darin, den Espressif Exception Decoder oder addr2line zu verwenden, um die genaue Quellcodezeile zu lokalisieren, und defensive Prüfungen wie if (ptr != NULL) einzufügen.",
},
{
pergunta: "Warum löst der Task Watchdog Timer (TWDT) in FreeRTOS aus?",
resposta: "Der TWDT löst aus, wenn ein Task mit höherer Priorität die CPU in einer blockierenden Schleife monopolisiert (z. B. while(1) ohne vTaskDelay) und so verhindert, dass der IDLE-Task den Watchdog des Betriebssystems bedient.",
},
{
pergunta: "Warum schlagen HTTPS- und TLS-Verbindungen beim ESP32 mit Fehler -0x2700 fehl?",
resposta: "Beim Start beginnt die interne Systemuhr des ESP32 im Jahr 1970. Die TLS-Zertifikatsprüfung stuft das Serverzertifikat als ungültig ein, da es in der fernen 'Zukunft' liegt. Eine Zeitsynchronisation über SNTP (configTime) vor dem Verbindungsaufbau behebt das Problem.",
},
];
export default async function DiagnosticoLayout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const faqs = isEs ? faqsEs : isEn ? faqsEn : faqsPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const faqs = isEs ? faqsEs : isEn ? faqsEn : isFr ? faqsFr : isDe ? faqsDe : faqsPt;
const canonPath = isEs ? "/es/diagnostico" : isEn ? "/en/diagnostics" : isFr ? "/fr/diagnostic" : isDe ? "/de/diagnose" : "/diagnostico";
return (
<>
@@ -122,8 +195,8 @@ export default async function DiagnosticoLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: isEs ? "Diagnóstico y errores comunes" : isEn ? "Diagnostics & Common Errors" : "Diagnóstico & Erros Comuns", caminho: isEs ? "/es/diagnostico" : isEn ? "/en/diagnostics" : "/diagnostico" },
{ nome: isEs ? "Inicio" : isEn ? "Home" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: isEs ? "Diagnóstico y errores comunes" : isEn ? "Diagnostics & Common Errors" : isFr ? "Diagnostic et erreurs courantes" : isDe ? "Diagnose und häufige Fehler" : "Diagnóstico & Erros Comuns", caminho: canonPath },
])
),
}}
@@ -141,13 +214,17 @@ export default async function DiagnosticoLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.aplicacaoWeb({
nome: isEs ? "Guía de diagnóstico y errores en ESP32" : isEn ? "ESP32 Error Diagnostics & Debugging Guide" : "Guia de Diagnóstico e Erros no ESP32",
nome: isEs ? "Guía de diagnóstico y errores en ESP32" : isEn ? "ESP32 Error Diagnostics & Debugging Guide" : isFr ? "Guide de diagnostic et erreurs sur ESP32" : isDe ? "ESP32-Fehlerdiagnose und Debugging-Leitfaden" : "Guia de Diagnóstico e Erros no ESP32",
descricao: isEs
? "Herramienta y guía técnica de análisis de fallas, pánicos de CPU y decodificación de registros en ESP32."
: isEn
? "Technical guide and log decoder for troubleshooting CPU panics, crashes, and exceptions on ESP32."
: isFr
? "Outil et guide technique d'analyse des pannes, des paniques CPU et du décodage de logs sur ESP32."
: isDe
? "Werkzeug und technischer Leitfaden zur Fehleranalyse, Behebung von CPU-Panics und Dekodierung von Logs auf dem ESP32."
: "Ferramenta e guia técnico de análise de falhas, pânicos de CPU e decodificação de logs no ESP32.",
caminho: isEs ? "/es/diagnostico" : isEn ? "/en/diagnostics" : "/diagnostico",
caminho: canonPath,
locale,
})
),
app/[locale]/diagnostico/page.jsx
+138 -40
View File
@@ -8,6 +8,8 @@ import PageHero from "@/components/PageHero";
import * as diagnosticoPt from "@/lib/diagnosticoData";
import * as diagnosticoEn from "@/lib/data/en/diagnostico";
import * as diagnosticoEs from "@/lib/data/es/diagnostico";
import * as diagnosticoFr from "@/lib/data/fr/diagnostico";
import * as diagnosticoDe from "@/lib/data/de/diagnostico";
import {
Activity,
AlertTriangle,
@@ -57,14 +59,34 @@ const EXEMPLOS_LOG_ES = [
["Handshake TLS", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];
const EXEMPLOS_LOG_FR = [
["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
["LoadProhibited", "Guru Meditation Error: Core 0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
["Handshake TLS", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];
const EXEMPLOS_LOG_DE = [
["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
["LoadProhibited", "Guru Meditation Error: Core 0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
["TLS-Handshake", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];
const GRAVIDADE = {
"Crítica": "text-danger",
"Critical": "text-danger",
"Critique": "text-danger",
"Kritisch": "text-danger",
Alta: "text-gold",
High: "text-gold",
"Élevée": "text-gold",
Hoch: "text-gold",
"Média": "text-accent",
Medium: "text-accent",
Media: "text-accent",
Moyenne: "text-accent",
Mittel: "text-accent",
};
const CHECKLISTS_PT = [
@@ -136,13 +158,61 @@ const CHECKLISTS_ES = [
},
];
const CHECKLISTS_FR = [
{
icon: Zap,
titulo: "Matériel et alimentation",
itens: [
"Condensateur de 10 µF à 100 µF à faible ESR sur VCC, plus un céramique de 100 nF près de la puce.",
"Régulateur LDO dimensionné pour des pointes de 600 mA à 1 A, avec marge thermique.",
"Aucun périphérique ne forçant de niveau logique sur les broches de strapping pendant le boot.",
"Condensateur de 10 µF ou 1 µF sur la broche EN (RST) pour un auto-reset stable au flashage.",
],
},
{
icon: Layers,
titulo: "Firmware et FreeRTOS",
itens: [
"Chaque tâche FreeRTOS cède la CPU avec vTaskDelay, des files ou des sémaphores.",
"Chaque ISR marquée avec IRAM_ATTR et exempte d'appels bloquants.",
"Pas d'usage continu de String d'Arduino dans les boucles, afin d'éviter la fragmentation du tas.",
"Horloge synchronisée par SNTP avant d'ouvrir des connexions TLS/HTTPS.",
],
},
];
const CHECKLISTS_DE = [
{
icon: Zap,
titulo: "Hardware und Spannungsversorgung",
itens: [
"10 µF bis 100 µF Low-ESR-Kondensator an VCC, plus ein 100-nF-Keramikkondensator nah am Chip.",
"LDO-Regler ausgelegt für 600 mA bis 1 A Stromspitzen mit thermischer Reserve.",
"Keine Peripheriegeräte, die beim Booten Logikpegel an Strapping-Pins erzwingen.",
"10 µF- oder 1 µF-Kondensator am EN-Pin (RST) für zuverlässigen Auto-Reset beim Flashen.",
],
},
{
icon: Layers,
titulo: "Firmware und FreeRTOS",
itens: [
"Jeder FreeRTOS-Task gibt CPU-Zeit mit vTaskDelay, Queues oder Semaphoren ab.",
"Jede ISR mit IRAM_ATTR versehen und frei von blockierenden Aufrufen.",
"Keine fortlaufende Verwendung von Arduino-Strings in Schleifen zur Vermeidung von Heap-Fragmentierung.",
"Uhrzeit vor dem Aufbau von TLS/HTTPS-Verbindungen per SNTP synchronisiert.",
],
},
];
export default function DiagnosticoPage() {
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const { categoriasDiagnostico, sintomasRapidos, errosCatalogo, regrasDecodificadorLog } = isEs ? diagnosticoEs : isEn ? diagnosticoEn : diagnosticoPt;
const exemplosLog = isEs ? EXEMPLOS_LOG_ES : isEn ? EXEMPLOS_LOG_EN : EXEMPLOS_LOG_PT;
const checklists = isEs ? CHECKLISTS_ES : isEn ? CHECKLISTS_EN : CHECKLISTS_PT;
const isFr = pathname?.startsWith("/fr");
const isDe = pathname?.startsWith("/de");
const { categoriasDiagnostico, sintomasRapidos, errosCatalogo, regrasDecodificadorLog } = isEs ? diagnosticoEs : isEn ? diagnosticoEn : isFr ? diagnosticoFr : isDe ? diagnosticoDe : diagnosticoPt;
const exemplosLog = isEs ? EXEMPLOS_LOG_ES : isEn ? EXEMPLOS_LOG_EN : isFr ? EXEMPLOS_LOG_FR : isDe ? EXEMPLOS_LOG_DE : EXEMPLOS_LOG_PT;
const checklists = isEs ? CHECKLISTS_ES : isEn ? CHECKLISTS_EN : isFr ? CHECKLISTS_FR : isDe ? CHECKLISTS_DE : CHECKLISTS_PT;
const [termoBusca, setTermoBusca] = useState("");
const [categoriaAtiva, setCategoriaAtiva] = useState("todos");
@@ -190,6 +260,24 @@ export default function DiagnosticoPage() {
acaoRecomendada:
"Look for keywords such as 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog', or 'panic' in the serial output.",
}
: isFr
? {
titulo: "Modèle d'erreur non catégorisé automatiquement",
tipo: "Inconnu",
explicacao:
"Nous n'avons pas identifié de signature classique de Guru Meditation ou Brownout dans cet extrait. Vérifiez que la vitesse en bauds (ex. : 115200) est correcte et si l'en-tête 'rst:' ou 'panic' est présent.",
acaoRecomendada:
"Recherchez des mots-clés tels que 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' ou 'panic' dans la console série.",
}
: isDe
? {
titulo: "Fehlermuster nicht automatisch kategorisiert",
tipo: "Unbekannt",
explicacao:
"Wir konnten in diesem Ausschnitt keine klassische Guru-Meditation- oder Brownout-Signatur erkennen. Prüfen Sie, ob die Baudrate (z. B. 115200) korrekt ist und ob der Header 'rst:' oder 'panic' vorhanden ist.",
acaoRecomendada:
"Suchen Sie in der seriellen Konsole nach Begriffen wie 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' oder 'panic'.",
}
: {
titulo: "Padrão de erro não categorizado automaticamente",
tipo: "Desconhecido",
@@ -256,15 +344,21 @@ export default function DiagnosticoPage() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Diagnóstico" : isEn ? "Diagnostics" : "Diagnóstico" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEs ? "Diagnóstico" : isEn ? "Diagnostics" : isFr ? "Diagnostic" : isDe ? "Diagnose" : "Diagnóstico" }]}
icon={AlertTriangle}
label={isEs ? "Depuración de firmware" : isEn ? "Firmware Debugging" : "Depuração de firmware"}
title={isEs ? "Diagnóstico de fallas del ESP32" : isEn ? "ESP32 Diagnostics and Crash Decoder" : "Diagnóstico de falhas do ESP32"}
label={isEs ? "Depuración de firmware" : isEn ? "Firmware Debugging" : isFr ? "Débogage du firmware" : isDe ? "Firmware-Debugging" : "Depuração de firmware"}
title={isEs ? "Diagnóstico de fallas del ESP32" : isEn ? "ESP32 Diagnostics and Crash Decoder" : isFr ? "Diagnostic des pannes de l'ESP32" : isDe ? "ESP32-Fehlerdiagnose und Crash-Decoder" : "Diagnóstico de falhas do ESP32"}
lede={
isEs
? "Comprenda la causa raíz de las fallas por Brownout, Guru Meditation, Watchdog y Stack Overflow, y aplique la corrección de ingeniería en lugar de soluciones improvisadas."
: isEn
? "Understand the root cause of Brownout, Guru Meditation, Watchdog, and Stack Overflow crashes, and apply engineering solutions instead of workarounds."
: isFr
? "Comprenez la cause racine des pannes de Brownout, Guru Meditation, Watchdog et Stack Overflow, et appliquez la correction d'ingénierie plutôt qu'un bricolage."
: isDe
? "Verstehen Sie die Ursache von Brownout, Guru Meditation, Watchdog und Stack Overflow und wenden Sie saubere Ingenieurlösungen statt Notbehelfen an."
: "Entenda a causa de Brownout, Guru Meditation, Watchdog e Stack Overflow, e aplique a correção de engenharia, não o remendo."
}
>
@@ -274,9 +368,9 @@ export default function DiagnosticoPage() {
rel="noopener noreferrer"
className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong"
>
{isEs ? "Basado en el artículo de Ciência Embarcada" : isEn ? "Based on article by Ciência Embarcada" : "Baseado no artigo do Ciência Embarcada"}
{isEs ? "Basado en el artículo de Ciência Embarcada" : isEn ? "Based on article by Ciência Embarcada" : isFr ? "D'après l'article de Ciência Embarcada" : isDe ? "Basierend auf dem Artikel von Ciência Embarcada" : "Baseado no artigo do Ciência Embarcada"}
<ExternalLink className="h-4 w-4" aria-hidden="true" />
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : "(abre em nova aba)"}</span>
<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : isFr ? "(ouvre un nouvel onglet)" : isDe ? "(öffnet in neuem Tab)" : "(abre em nova aba)"}</span>
</a>
</PageHero>
@@ -285,14 +379,14 @@ export default function DiagnosticoPage() {
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
<div className="max-w-xl">
<h2 id="decodificador-titulo" className="section-title">
{isEs ? "Pegue el registro y descubra la causa" : isEn ? "Paste the log to see the cause" : "Cole o log e veja a causa"}
{isEs ? "Pegue el registro y descubra la causa" : isEn ? "Paste the log to see the cause" : isFr ? "Collez le journal et découvrez la cause" : isDe ? "Log einfügen und Ursache ermitteln" : "Cole o log e veja a causa"}
</h2>
<p className="mt-2 text-sm text-muted">
{isEs ? "Copie el fragmento del monitor serie. El diagnóstico aparece al instante." : isEn ? "Copy the serial monitor output snippet. Diagnostics appear instantly." : "Copie o trecho do monitor serial. O diagnóstico aparece na hora."}
{isEs ? "Copie el fragmento del monitor serie. El diagnóstico aparece al instante." : isEn ? "Copy the serial monitor output snippet. Diagnostics appear instantly." : isFr ? "Copiez l'extrait du moniteur série. Le diagnostic apparaît immédiatement." : isDe ? "Kopieren Sie den Ausschnitt aus dem seriellen Monitor. Die Diagnose erscheint sofort." : "Copie o trecho do monitor serial. O diagnóstico aparece na hora."}
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm text-muted">{isEs ? "Probar con" : isEn ? "Test with" : "Testar com"}</span>
<span className="text-sm text-muted">{isEs ? "Probar con" : isEn ? "Test with" : isFr ? "Tester avec" : isDe ? "Testen mit" : "Testar com"}</span>
{exemplosLog.map(([rotulo, texto]) => (
<button key={rotulo} type="button" onClick={() => analisarLog(texto)} className="chip-btn">
{rotulo}
@@ -303,21 +397,21 @@ export default function DiagnosticoPage() {
<div className="relative mt-5">
<label htmlFor="log-serial" className="sr-only">
{isEs ? "Registro del monitor serie" : isEn ? "Serial monitor log" : "Log do monitor serial"}
{isEs ? "Registro del monitor serie" : isEn ? "Serial monitor log" : isFr ? "Journal du moniteur série" : isDe ? "Serieller Monitor-Log" : "Log do monitor serial"}
</label>
<textarea
id="log-serial"
rows={4}
value={logInput}
onChange={(e) => analisarLog(e.target.value)}
placeholder={isEs ? "Pegue el registro del monitor serie aquí" : isEn ? "Paste serial monitor log here" : "Cole o log do monitor serial aqui"}
placeholder={isEs ? "Pegue el registro del monitor serie aquí" : isEn ? "Paste serial monitor log here" : isFr ? "Collez le journal du moniteur série ici" : isDe ? "Seriellen Monitor-Log hier einfügen" : "Cole o log do monitor serial aqui"}
spellCheck={false}
className="code-panel field !min-h-32 w-full resize-y !rounded-xl !border-white/10 !bg-[var(--code-bg)] p-4 font-mono text-sm !text-[#e9eef4] placeholder:!text-[#a6afbd]"
/>
{logInput && (
<button type="button" onClick={() => analisarLog("")} className="absolute right-3 top-3 inline-flex min-h-11 items-center gap-1 rounded-full border border-white/15 px-3 text-xs font-medium text-[#e9eef4] hover:bg-white/10">
<X className="h-3.5 w-3.5" aria-hidden="true" />
{isEs ? "Limpiar" : isEn ? "Clear" : "Limpar"}
{isEs ? "Limpiar" : isEn ? "Clear" : isFr ? "Effacer" : isDe ? "Löschen" : "Limpar"}
</button>
)}
</div>
@@ -331,8 +425,8 @@ export default function DiagnosticoPage() {
<h3 className="font-semibold text-ink">{resultadoLog.titulo}</h3>
<span className="chip">{resultadoLog.tipo}</span>
</div>
<p><strong className="font-semibold text-ink">{isEs ? "Causa probable:" : isEn ? "Likely cause:" : "Causa provável:"}</strong> {resultadoLog.explicacao}</p>
<p><strong className="font-semibold text-ink">{isEs ? "Qué hacer:" : isEn ? "What to do:" : "O que fazer:"}</strong> {resultadoLog.acaoRecomendada}</p>
<p><strong className="font-semibold text-ink">{isEs ? "Causa probable:" : isEn ? "Likely cause:" : isFr ? "Cause probable :" : isDe ? "Wahrscheinliche Ursache :" : "Causa provável:"}</strong> {resultadoLog.explicacao}</p>
<p><strong className="font-semibold text-ink">{isEs ? "Qué hacer:" : isEn ? "What to do:" : isFr ? "Que faire :" : isDe ? "Was zu tun ist :" : "O que fazer:"}</strong> {resultadoLog.acaoRecomendada}</p>
</div>
</div>
)}
@@ -342,13 +436,13 @@ export default function DiagnosticoPage() {
<section className="shell section pt-12 sm:pt-14" aria-labelledby="catalogo-titulo">
<h2 id="catalogo-titulo" className="section-title">
{isEs ? "Catálogo de fallas" : isEn ? "Fault catalog" : "Catálogo de falhas"}
{isEs ? "Catálogo de fallas" : isEn ? "Fault catalog" : isFr ? "Catalogue de pannes" : isDe ? "Fehlerkatalog" : "Catálogo de falhas"}
</h2>
<div className="panel mt-6 p-5 sm:p-6">
<div className="relative">
<label htmlFor="busca-erro" className="sr-only">
{isEs ? "Buscar por error, síntoma o mensaje serie" : isEn ? "Search by error, symptom, or serial message" : "Buscar por erro, sintoma ou mensagem serial"}
{isEs ? "Buscar por error, síntoma o mensaje serie" : isEn ? "Search by error, symptom, or serial message" : isFr ? "Rechercher par erreur, symptôme ou message série" : isDe ? "Nach Fehler, Symptom oder serieller Meldung suchen" : "Buscar por erro, sintoma ou mensagem serial"}
</label>
<Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-muted" aria-hidden="true" />
<input
@@ -357,14 +451,14 @@ export default function DiagnosticoPage() {
type="search"
value={termoBusca}
onChange={(e) => setTermoBusca(e.target.value)}
placeholder={isEs ? "Buscar error, síntoma o mensaje" : isEn ? "Search error, symptom, or message" : "Buscar erro, sintoma ou mensagem"}
placeholder={isEs ? "Buscar error, síntoma o mensaje" : isEn ? "Search error, symptom, or message" : isFr ? "Rechercher une erreur, un symptôme ou un message" : isDe ? "Fehler, Symptom oder Meldung suchen" : "Buscar erro, sintoma ou mensagem"}
autoComplete="off"
className="field pl-12 pr-4 text-base"
/>
</div>
<div className="mt-5">
<h3 className="text-sm font-semibold text-ink">{isEs ? "Síntoma" : isEn ? "Symptom" : "Sintoma"}</h3>
<h3 className="text-sm font-semibold text-ink">{isEs ? "Síntoma" : isEn ? "Symptom" : isFr ? "Symptôme" : isDe ? "Symptom" : "Sintoma"}</h3>
<div className="mt-3 flex flex-wrap gap-2">
{sintomasRapidos.map((sintoma) => (
<button key={sintoma.id} type="button" onClick={() => setSintomaAtivo(sintomaAtivo === sintoma.id ? null : sintoma.id)} aria-pressed={sintomaAtivo === sintoma.id} className="chip-btn">
@@ -375,11 +469,11 @@ export default function DiagnosticoPage() {
</div>
<div className="mt-5 border-t border-line pt-5">
<h3 className="text-sm font-semibold text-ink">{isEs ? "Área" : isEn ? "Area" : "Área"}</h3>
<h3 className="text-sm font-semibold text-ink">{isEs ? "Área" : isEn ? "Area" : isFr ? "Domaine" : isDe ? "Bereich" : "Área"}</h3>
<div className="mt-3 flex flex-wrap gap-2">
<button type="button" onClick={() => setCategoriaAtiva("todos")} aria-pressed={categoriaAtiva === "todos"} className="chip-btn">
<LayoutGrid className="h-4 w-4" aria-hidden="true" />
{isEs ? "Todas" : isEn ? "All" : "Todas"}
{isEs ? "Todas" : isEn ? "All" : isFr ? "Tous" : isDe ? "Alle" : "Todas"}
<span className="tabular-nums opacity-80">{errosCatalogo.length}</span>
</button>
{categoriasDiagnostico.map((cat) => {
@@ -399,13 +493,13 @@ export default function DiagnosticoPage() {
<div className="mt-6 flex flex-wrap items-center justify-between gap-3">
<p role="status" aria-live="polite" className="text-sm font-semibold text-ink">
{errosFiltrados.length} {errosFiltrados.length === 1 ? (isEs ? "falla" : isEn ? "fault" : "falha") : (isEs ? "fallas" : isEn ? "faults" : "falhas")}
{totalFiltros > 0 && <span className="font-normal text-muted">{isEs ? " con los filtros actuales" : isEn ? " with current filters" : " com os filtros atuais"}</span>}
{errosFiltrados.length} {errosFiltrados.length === 1 ? (isEs ? "falla" : isEn ? "fault" : isFr ? "panne" : isDe ? "Fehler" : "falha") : (isEs ? "fallas" : isEn ? "faults" : isFr ? "pannes" : isDe ? "Fehler" : "falhas")}
{totalFiltros > 0 && <span className="font-normal text-muted">{isEs ? " con los filtros actuales" : isEn ? " with current filters" : isFr ? " avec les filtres actuels" : isDe ? " mit aktuellen Filtern" : " com os filtros atuais"}</span>}
</p>
{temFiltroAtivo && (
<button type="button" onClick={limparTodosFiltros} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
<RotateCcw className="h-4 w-4" aria-hidden="true" />
{isEs ? "Restablecer filtros" : isEn ? "Reset filters" : "Redefinir filtros"}
{isEs ? "Restablecer filtros" : isEn ? "Reset filters" : isFr ? "Réinitialiser les filtres" : isDe ? "Filter zurücksetzen" : "Redefinir filtros"}
</button>
)}
</div>
@@ -415,13 +509,13 @@ export default function DiagnosticoPage() {
<div className="card px-6 py-14 text-center">
<HelpCircle className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
<h3 className="mt-4 font-display text-xl font-semibold text-ink">
{isEs ? "Ninguna falla coincide con estos filtros" : isEn ? "No faults matching these filters" : "Nenhuma falha com esses filtros"}
{isEs ? "Ninguna falla coincide con estos filtros" : isEn ? "No faults matching these filters" : isFr ? "Aucune panne ne correspond à ces filtres" : isDe ? "Keine Fehler entsprechen diesen Filtern" : "Nenhuma falha com esses filtros"}
</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-muted">
{isEs ? "Busque por un término más general o elimine el síntoma y el área seleccionados." : isEn ? "Search for a more general term or remove selected symptom and area." : "Busque por um termo mais geral ou remova o sintoma e a área selecionados."}
{isEs ? "Busque por un término más general o elimine el síntoma y el área seleccionados." : isEn ? "Search for a more general term or remove selected symptom and area." : isFr ? "Recherchez un terme plus général ou retirez le symptôme et le domaine sélectionnés." : isDe ? "Suchen Sie nach einem allgemeineren Begriff oder entfernen Sie gewähltes Symptom und Bereich." : "Busque por um termo mais geral ou remova o sintoma e a área selecionados."}
</p>
<button type="button" onClick={limparTodosFiltros} className="btn btn-primary mt-6">
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : "Limpar filtros"}
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : isFr ? "Effacer les filtres" : isDe ? "Filter zurücksetzen" : "Limpar filtros"}
</button>
</div>
) : (
@@ -429,7 +523,7 @@ export default function DiagnosticoPage() {
const estaAberto = cardAberto === erro.id;
const lang = linguagemCodigo[erro.id] || "arduino";
const codigoAtual =
lang === "arduino" ? erro.codigoArduino : lang === "espidf" ? erro.codigoEspIdf : erro.codigoMicroPython || (isEs ? "# Ejemplo no aplicable" : isEn ? "# Example not applicable" : "# Exemplo não aplicável");
lang === "arduino" ? erro.codigoArduino : lang === "espidf" ? erro.codigoEspIdf : erro.codigoMicroPython || (isEs ? "# Ejemplo no aplicable" : isEn ? "# Example not applicable" : isFr ? "# Exemple non applicable" : isDe ? "# Beispiel nicht anwendbar" : "# Exemplo não aplicável");
const catInfo = categoriasDiagnostico.find((c) => c.id === erro.categoria);
const IconeCat = ICONES[catInfo?.icone] ?? AlertTriangle;
@@ -454,6 +548,10 @@ export default function DiagnosticoPage() {
<>Severidad {erro.gravidade.toLowerCase()}</>
) : isEn ? (
<>Severity: {erro.gravidade.toLowerCase()}</>
) : isFr ? (
<>Gravité : {erro.gravidade.toLowerCase()}</>
) : isDe ? (
<>Schweregrad: {erro.gravidade.toLowerCase()}</>
) : (
<>Gravidade {erro.gravidade.toLowerCase()}</>
)}
@@ -474,11 +572,11 @@ export default function DiagnosticoPage() {
<div className="flex items-center justify-between gap-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
<Terminal className="h-4 w-4 text-accent" aria-hidden="true" />
{isEs ? "Cómo aparece en el monitor serie" : isEn ? "How it appears in serial monitor" : "Como aparece no monitor serial"}
{isEs ? "Cómo aparece en el monitor serie" : isEn ? "How it appears in serial monitor" : isFr ? "Apparence dans le moniteur série" : isDe ? "Erscheinungsbild im seriellen Monitor" : "Como aparece no monitor serial"}
</h4>
<button type="button" onClick={() => copiarParaClipboard(erro.logSerial, `log-${erro.id}`)} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
{copiadoId === `log-${erro.id}` ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
{copiadoId === `log-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : "Copiado") : (isEs ? "Copiar registro" : isEn ? "Copy log" : "Copiar log")}
{copiadoId === `log-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar registro" : isEn ? "Copy log" : isFr ? "Copier le log" : isDe ? "Log kopieren" : "Copiar log")}
</button>
</div>
<div className="code-panel mt-1">
@@ -489,7 +587,7 @@ export default function DiagnosticoPage() {
<div>
<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
<Cpu className="h-4 w-4 text-accent" aria-hidden="true" />
{isEs ? "Causa raíz" : isEn ? "Root cause" : "Causa raiz"}
{isEs ? "Causa raíz" : isEn ? "Root cause" : isFr ? "Cause racine" : isDe ? "Ursache" : "Causa raiz"}
</h4>
<p className="callout mt-2">{erro.causaRaiz}</p>
</div>
@@ -498,17 +596,17 @@ export default function DiagnosticoPage() {
<div className="callout callout-danger">
<p className="flex items-center gap-2 font-semibold text-ink">
<XCircle className="h-4 w-4 shrink-0 text-danger" aria-hidden="true" />
{isEs ? "La solución improvisada común" : isEn ? "The common workaround" : "O remendo comum"}
{isEs ? "La solución improvisada común" : isEn ? "The common workaround" : isFr ? "Le bricolage courant" : isDe ? "Der verbreitete Notbehelf" : "O remendo comum"}
</p>
<p className="mt-2 font-medium text-ink">{erro.gambiarra.titulo}</p>
<p className="mt-1">{erro.gambiarra.descricao}</p>
<p className="mt-2"><strong className="font-semibold text-danger">{isEs ? "Consecuencia:" : isEn ? "Consequence:" : "Consequência:"}</strong> {erro.gambiarra.consequencia}</p>
<p className="mt-2"><strong className="font-semibold text-danger">{isEs ? "Consecuencia:" : isEn ? "Consequence:" : isFr ? "Conséquence :" : isDe ? "Folge :" : "Consequência:"}</strong> {erro.gambiarra.consequencia}</p>
</div>
<div className="callout callout-ok">
<p className="flex items-center gap-2 font-semibold text-ink">
<CheckCircle2 className="h-4 w-4 shrink-0 text-ok" aria-hidden="true" />
{isEs ? "La solución de ingeniería" : isEn ? "The engineering solution" : "A solução de engenharia"}
{isEs ? "La solución de ingeniería" : isEn ? "The engineering solution" : isFr ? "La solution d'ingénierie" : isDe ? "Die Ingenieurlösung" : "A solução de engenharia"}
</p>
<p className="mt-2 font-medium text-ink">{erro.solucaoEngenharia.titulo}</p>
<ul className="mt-2 space-y-1.5">
@@ -524,7 +622,7 @@ export default function DiagnosticoPage() {
<div>
<div className="flex flex-wrap items-center justify-between gap-3">
<div role="group" aria-label={isEs ? "Lenguaje del ejemplo" : isEn ? "Example language" : "Linguagem do exemplo"} className="flex flex-wrap gap-2">
<div role="group" aria-label={isEs ? "Lenguaje del ejemplo" : isEn ? "Example language" : isFr ? "Langage de l'exemple" : isDe ? "Sprache des Beispiels" : "Linguagem do exemplo"} className="flex flex-wrap gap-2">
{[
["arduino", "Arduino C++"],
["espidf", "ESP-IDF (C)"],
@@ -537,7 +635,7 @@ export default function DiagnosticoPage() {
</div>
<button type="button" onClick={() => copiarParaClipboard(codigoAtual, `code-${erro.id}`)} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
{copiadoId === `code-${erro.id}` ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
{copiadoId === `code-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : "Copiado") : (isEs ? "Copiar código" : isEn ? "Copy code" : "Copiar código")}
{copiadoId === `code-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar código" : isEn ? "Copy code" : isFr ? "Copier le code" : isDe ? "Code kopieren" : "Copiar código")}
</button>
</div>
<div className="code-panel mt-3">
@@ -547,7 +645,7 @@ export default function DiagnosticoPage() {
<div className="callout callout-warn flex items-start gap-3">
<Wrench className="mt-0.5 h-4 w-4 shrink-0 text-gold" aria-hidden="true" />
<p><strong className="font-semibold text-ink">{isEs ? "Consejo de ingeniería:" : isEn ? "Engineering tip:" : "Dica de engenharia:"}</strong> {erro.dicaPro}</p>
<p><strong className="font-semibold text-ink">{isEs ? "Consejo de ingeniería:" : isEn ? "Engineering tip:" : isFr ? "Conseil d'ingénierie :" : isDe ? "Praxistipp :" : "Dica de engenharia:"}</strong> {erro.dicaPro}</p>
</div>
</div>
)}
@@ -560,10 +658,10 @@ export default function DiagnosticoPage() {
<section className="shell pb-20 md:pb-28" aria-labelledby="checklist-titulo">
<h2 id="checklist-titulo" className="section-title">
{isEs ? "Lista de verificación previa a campo" : isEn ? "Pre-deployment checklist" : "Checklist antes de ir para campo"}
{isEs ? "Lista de verificación previa a campo" : isEn ? "Pre-deployment checklist" : isFr ? "Checklist avant déploiement" : isDe ? "Checkliste vor dem Feldeinsatz" : "Checklist antes de ir para campo"}
</h2>
<p className="mt-3 max-w-2xl text-base text-muted">
{isEs ? "Elementos esenciales para validar en hardware y firmware antes de entregar el producto." : isEn ? "Essential items to validate on hardware and firmware before shipping a product." : "Itens essenciais para validar no hardware e no firmware antes de entregar o produto."}
{isEs ? "Elementos esenciales para validar en hardware y firmware antes de entregar el producto." : isEn ? "Essential items to validate on hardware and firmware before shipping a product." : isFr ? "Éléments essentiels à valider sur le matériel et le firmware avant de livrer le produit." : isDe ? "Wesentliche Punkte zur Prüfung von Hardware und Firmware vor der Auslieferung." : "Itens essenciais para validar no hardware e no firmware antes de entregar o produto."}
</p>
<div className="mt-8 grid gap-4 md:grid-cols-2">
{checklists.map(({ icon: Icon, titulo, itens }) => (
app/[locale]/frameworks/[key]/page.jsx
+57 -21
View File
@@ -8,6 +8,8 @@ import CodeExample from "@/components/CodeExample";
import frameworksDataPt from "@/public/frameworks.json";
import frameworksDataEn from "@/data/en/frameworks.json";
import frameworksDataEs from "@/data/es/frameworks.json";
import frameworksDataFr from "@/data/fr/frameworks.json";
import frameworksDataDe from "@/data/de/frameworks.json";
import { getLocalizedHref } from "@/i18n/links";
import { ArrowRight, ArrowUpRight, BookOpen, Box, Check, Code, Layers } from "lucide-react";
@@ -15,8 +17,10 @@ export default async function FrameworkDetail({ params }) {
const { locale, key } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : frameworksDataPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const currentLocale = isEs ? "es" : isEn ? "en" : isFr ? "fr" : isDe ? "de" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : isFr ? frameworksDataFr : isDe ? frameworksDataDe : frameworksDataPt;
const framework = frameworksData[key];
if (!framework) {
@@ -38,7 +42,7 @@ export default async function FrameworkDetail({ params }) {
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: isEs ? "Inicio" : isEn ? "Home" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: "Frameworks", caminho: getLocalizedHref("/frameworks", currentLocale) },
{ nome: framework.nome, caminho: getLocalizedHref(`/frameworks/${encodeURIComponent(key)}`, currentLocale) },
])),
@@ -51,7 +55,9 @@ export default async function FrameworkDetail({ params }) {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Frameworks y SDKs" : isEn ? "Frameworks & SDKs" : "Frameworks e SDKs", href: getLocalizedHref("/frameworks", currentLocale) }, { label: framework.nome }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEs ? "Frameworks y SDKs" : isEn ? "Frameworks & SDKs" : isFr ? "Frameworks et SDKs" : isDe ? "Frameworks & SDKs" : "Frameworks e SDKs", href: getLocalizedHref("/frameworks", currentLocale) }, { label: framework.nome }]}
icon={Layers}
label={framework.tipo}
title={framework.nome}
@@ -60,41 +66,41 @@ export default async function FrameworkDetail({ params }) {
{framework.documentacao && (
<a href={framework.documentacao} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
<BookOpen className="h-4 w-4" aria-hidden="true" />
{isEs ? "Documentación oficial" : isEn ? "Official documentation" : "Documentação oficial"}
{isEs ? "Documentación oficial" : isEn ? "Official documentation" : isFr ? "Documentation officielle" : isDe ? "Offizielle Dokumentation" : "Documentação oficial"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
)}
{framework.repositorio && (
<a href={framework.repositorio} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
<Code className="h-4 w-4" aria-hidden="true" />
{isEs ? "Repositorio en GitHub" : isEn ? "GitHub repository" : "Repositório no GitHub"}
{isEs ? "Repositorio en GitHub" : isEn ? "GitHub repository" : isFr ? "Dépôt sur GitHub" : isDe ? "GitHub-Repository" : "Repositório no GitHub"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
)}
</PageHero>
<section className="shell mt-10" aria-label={isEs ? "Resumen" : isEn ? "Summary" : "Resumo"}>
<section className="shell mt-10" aria-label={isEs ? "Resumen" : isEn ? "Summary" : isFr ? "Résumé" : isDe ? "Übersicht" : "Resumo"}>
<dl className="grid gap-3 md:grid-cols-3">
<div className="tile">
<dt className="text-xs font-medium text-muted">{isEs ? "Lenguaje" : isEn ? "Language" : "Linguagem"}</dt>
<dt className="text-xs font-medium text-muted">{isEs ? "Lenguaje" : isEn ? "Language" : isFr ? "Langage" : isDe ? "Sprache" : "Linguagem"}</dt>
<dd className="mt-1 font-display text-2xl font-semibold tracking-[-0.03em] text-ink">{framework.linguagem}</dd>
<dd className="mt-0.5 text-xs text-muted">{framework.nome_completo}</dd>
</div>
<div className="tile">
<dt className="text-xs font-medium text-muted">{isEs ? "Categoría" : isEn ? "Category" : "Categoria"}</dt>
<dt className="text-xs font-medium text-muted">{isEs ? "Categoría" : isEn ? "Category" : isFr ? "Catégorie" : isDe ? "Kategorie" : "Categoria"}</dt>
<dd className="mt-1 font-display text-2xl font-semibold tracking-[-0.03em] text-ink">{framework.tipo}</dd>
</div>
<div className="tile">
<dt className="text-xs font-medium text-muted">{isEs ? "Objetivo principal" : isEn ? "Main purpose" : "Objetivo principal"}</dt>
<dt className="text-xs font-medium text-muted">{isEs ? "Objetivo principal" : isEn ? "Main purpose" : isFr ? "Objectif principal" : isDe ? "Hauptzweck" : "Objetivo principal"}</dt>
<dd className="mt-1 text-sm font-medium leading-relaxed text-ink">{framework.funcao_principal}</dd>
</div>
</dl>
</section>
<section className="shell mt-12 grid gap-5 lg:grid-cols-2" aria-label={isEs ? "Funciones y aplicaciones" : isEn ? "Features and applications" : "Recursos e aplicações"}>
<section className="shell mt-12 grid gap-5 lg:grid-cols-2" aria-label={isEs ? "Funciones y aplicaciones" : isEn ? "Features and applications" : isFr ? "Fonctionnalités et applications" : isDe ? "Features und Anwendungen" : "Recursos e aplicações"}>
<div className="card p-5 sm:p-7">
<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
{isEs ? "Funciones destacadas" : isEn ? "Key features" : "Recursos de destaque"}
{isEs ? "Funciones destacadas" : isEn ? "Key features" : isFr ? "Fonctionnalités clés" : isDe ? "Wichtigste Features" : "Recursos de destaque"}
</h2>
<ul className="mt-5 space-y-3">
{features.map((feature) => (
@@ -108,7 +114,7 @@ export default async function FrameworkDetail({ params }) {
<div className="card p-5 sm:p-7">
<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
{isEs ? "Cuándo usar" : isEn ? "When to use" : "Quando usar"}
{isEs ? "Cuándo usar" : isEn ? "When to use" : isFr ? "Quand l'utiliser" : isDe ? "Einsatzbereiche" : "Quando usar"}
</h2>
<ul className="mt-5 space-y-2.5">
{useCases.map((useCase) => (
@@ -126,10 +132,10 @@ export default async function FrameworkDetail({ params }) {
<div className="max-w-2xl">
<span className="chip chip-accent">
<Box className="h-3.5 w-3.5" aria-hidden="true" />
{isEs ? "ESP-IDF 4.4 o superior" : isEn ? "ESP-IDF 4.4 or higher" : "ESP-IDF 4.4 ou superior"}
{isEs ? "ESP-IDF 4.4 o superior" : isEn ? "ESP-IDF 4.4 or higher" : isFr ? "ESP-IDF 4.4 ou supérieur" : isDe ? "ESP-IDF 4.4 oder höher" : "ESP-IDF 4.4 ou superior"}
</span>
<h2 className="section-title mt-4">
{isEs ? "Módulos con ESP Component Registry" : isEn ? "Modules with the ESP Component Registry" : "Módulos com o ESP Component Registry"}
{isEs ? "Módulos con ESP Component Registry" : isEn ? "Modules with the ESP Component Registry" : isFr ? "Modules avec l'ESP Component Registry" : isDe ? "Module mit der ESP Component Registry" : "Módulos com o ESP Component Registry"}
</h2>
<p className="mt-3 text-base leading-relaxed text-muted">
{isEs ? (
@@ -144,6 +150,18 @@ export default async function FrameworkDetail({ params }) {
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> and the command{" "}
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf.py add-dependency</code> to download display drivers (LVGL), industrial stacks (Modbus), RainMaker, and more.
</>
) : isFr ? (
<>
Dans les projets ESP-IDF v4.4+ et v5.x, les bibliothèques n'ont plus besoin d'être ajoutées comme sous-modules Git. Utilisez le fichier{" "}
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> et la commande{" "}
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf.py add-dependency</code> pour télécharger des pilotes d'écran (LVGL), des piles industrielles (Modbus), RainMaker et bien plus encore.
</>
) : isDe ? (
<>
In Projekten mit ESP-IDF v4.4+ und v5.x müssen Bibliotheken nicht mehr als Git-Submodule eingebunden werden. Nutzen Sie{" "}
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> und den Befehl{" "}
<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf.py add-dependency</code>, um Display-Treiber (LVGL), Industrieprotokolle (Modbus), RainMaker und mehr herunterzuladen.
</>
) : (
<>
Nos projetos ESP-IDF v4.4+ e v5.x, as bibliotecas não precisam mais entrar como submódulos Git. Use o{" "}
@@ -154,7 +172,7 @@ export default async function FrameworkDetail({ params }) {
</p>
</div>
<Link href={getLocalizedHref("/componentes", currentLocale)} className="btn btn-primary shrink-0">
{isEs ? "Explorar componentes" : isEn ? "Explore components" : "Explorar componentes"}
{isEs ? "Explorar componentes" : isEn ? "Explore components" : isFr ? "Explorer les composants" : isDe ? "Komponenten erkunden" : "Explorar componentes"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
@@ -170,7 +188,7 @@ export default async function FrameworkDetail({ params }) {
<div className="shell section pt-10">
<Link href={getLocalizedHref("/frameworks", currentLocale)} className="inline-flex min-h-11 items-center gap-2 text-sm font-medium text-accent hover:text-accent-strong">
<ArrowRight className="h-4 w-4 rotate-180" aria-hidden="true" />
{isEs ? "Ver todos los frameworks" : isEn ? "View all frameworks" : "Ver todos os frameworks"}
{isEs ? "Ver todos los frameworks" : isEn ? "View all frameworks" : isFr ? "Voir tous les frameworks" : isDe ? "Alle Frameworks ansehen" : "Ver todos os frameworks"}
</Link>
</div>
</main>
@@ -184,21 +202,27 @@ export async function generateMetadata({ params }) {
const { locale, key } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : frameworksDataPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const currentLocale = isEs ? "es" : isEn ? "en" : isFr ? "fr" : isDe ? "de" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : isFr ? frameworksDataFr : isDe ? frameworksDataDe : frameworksDataPt;
const framework = frameworksData[key];
if (!framework) {
return { title: isEs ? "Framework no encontrado" : isEn ? "Framework not found" : "Framework não encontrado", robots: { index: false, follow: false } };
return { title: isEs ? "Framework no encontrado" : isEn ? "Framework not found" : isFr ? "Framework introuvable" : isDe ? "Framework nicht gefunden" : "Framework não encontrado", robots: { index: false, follow: false } };
}
return {
...paginaMeta({
titulo: isEs ? `${framework.nome} para ESP32 · Guía técnica` : isEn ? `${framework.nome} for ESP32 · Technical Guide` : `${framework.nome} para ESP32 · Guia Técnico`,
titulo: isEs ? `${framework.nome} para ESP32 · Guía técnica` : isEn ? `${framework.nome} for ESP32 · Technical Guide` : isFr ? `${framework.nome} pour ESP32 · Guide technique` : isDe ? `${framework.nome} für ESP32 · Technischer Leitfaden` : `${framework.nome} para ESP32 · Guia Técnico`,
descricao: isEs
? `${framework.nome_completo}: ${framework.descricao} Guía con ejemplos prácticos de código y casos de uso.`
: isEn
? `${framework.nome_completo}: ${framework.descricao} Guide with practical code examples and use cases.`
: isFr
? `${framework.nome_completo} : ${framework.descricao} Guide avec exemples pratiques de code et cas d'usage.`
: isDe
? `${framework.nome_completo}: ${framework.descricao} Leitfaden mit praktischen Codebeispielen und Anwendungsfällen.`
: `${framework.nome_completo}: ${framework.descricao} Guia com exemplos práticos de código e casos de uso.`,
caminho: `/frameworks/${encodeURIComponent(key)}`,
tipo: "article",
@@ -215,6 +239,18 @@ export async function generateMetadata({ params }) {
`${framework.nome} ESP32`, `program ESP32 with ${framework.nome}`,
"ESP32", "ESP32 framework",
]
: isFr
? [
framework.nome, framework.nome_completo,
`${framework.nome} ESP32`, `programmer ESP32 avec ${framework.nome}`,
"ESP32", "framework ESP32",
]
: isDe
? [
framework.nome, framework.nome_completo,
`${framework.nome} ESP32`, `ESP32 programmieren mit ${framework.nome}`,
"ESP32", "ESP32 Framework",
]
: [
framework.nome, framework.nome_completo,
`${framework.nome} ESP32`, `programar ESP32 com ${framework.nome}`,
app/[locale]/frameworks/layout.jsx
+42 -2
View File
@@ -4,17 +4,27 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return {
...paginaMeta({
titulo: isEs
? "Frameworks y SDKs para ESP32: Guía completa y comparativa"
: isEn
? "ESP32 Frameworks & SDKs: Complete Guide and Comparison"
: isFr
? "Frameworks et SDKs pour ESP32 : guide complet et comparatif"
: isDe
? "ESP32-Frameworks & SDKs: Vollständiger Leitfaden und Vergleich"
: "Frameworks & SDKs para ESP32: Guia Completo e Comparativo",
descricao: isEs
? "Guía completa de desarrollo: ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino y MicroPython con ejemplos de código."
: isEn
? "Complete development guide: ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino, and MicroPython with code examples."
: isFr
? "Guide complet de développement : ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino et MicroPython avec exemples de code."
: isDe
? "Vollständiger Entwicklungsleitfaden: ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino und MicroPython mit Codebeispielen."
: "Guia completo de desenvolvimento: ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino e MicroPython com exemplos de código.",
caminho: "/frameworks",
locale,
@@ -46,6 +56,34 @@ export async function generateMetadata({ params }) {
"frameworks ESP32",
"program ESP32",
]
: isFr
? [
"ESP-IDF",
"ESP-RainMaker",
"ESP-Matter",
"Rust ESP32",
"ESP-SR",
"ESP-ADF",
"ESP-IoT-Solution",
"Arduino ESP32",
"MicroPython ESP32",
"frameworks ESP32",
"programmer ESP32",
]
: isDe
? [
"ESP-IDF",
"ESP-RainMaker",
"ESP-Matter",
"Rust ESP32",
"ESP-SR",
"ESP-ADF",
"ESP-IoT-Solution",
"Arduino ESP32",
"MicroPython ESP32",
"ESP32 Frameworks",
"ESP32 programmieren",
]
: [
"ESP-IDF",
"ESP-RainMaker",
@@ -67,6 +105,8 @@ export default async function FrameworksLayout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return (
<>
<script
@@ -74,8 +114,8 @@ export default async function FrameworksLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: "Frameworks", caminho: isEs ? "/es/frameworks" : isEn ? "/en/frameworks" : "/frameworks" },
{ nome: isEs ? "Inicio" : isEn ? "Home" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: "Frameworks", caminho: isEs ? "/es/frameworks" : isEn ? "/en/frameworks" : isFr ? "/fr/frameworks" : isDe ? "/de/frameworks" : "/frameworks" },
])
),
}}
app/[locale]/frameworks/page.jsx
+98 -12
View File
@@ -6,6 +6,8 @@ import Link from "next/link";
import frameworksDataPt from "@/public/frameworks.json";
import frameworksDataEn from "@/data/en/frameworks.json";
import frameworksDataEs from "@/data/es/frameworks.json";
import frameworksDataFr from "@/data/fr/frameworks.json";
import frameworksDataDe from "@/data/de/frameworks.json";
import { paginaMeta } from "@/lib/seo";
import { getLocalizedHref } from "@/i18n/links";
import { ArrowRight, ArrowUpRight, Box, Brain, Cloud, GraduationCap, Layers, Mic, Music, Sparkles } from "lucide-react";
@@ -109,14 +111,82 @@ const GUIAS_ES = [
},
];
const GUIAS_FR = [
{
icon: GraduationCap,
titulo: "Je débute",
texto: "Arduino ou MicroPython sont les voies les plus rapides pour tester capteurs et APIs. Pour la production, optez pour ESP-IDF ou Rust.",
links: [
["Arduino", "/frameworks/Arduino"],
["MicroPython", "/frameworks/MicroPython"],
["Rust", "/frameworks/Rust-ESP"],
],
},
{
icon: Cloud,
titulo: "Cloud et maison connectée",
texto: "ESP-Matter pour l'interopérabilité, ESP-RainMaker pour un cloud clé en main et Zigbee pour les réseaux maillés locaux à basse consommation.",
links: [
["RainMaker", "/frameworks/ESP-RainMaker"],
["Matter", "/frameworks/ESP-Matter"],
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
],
},
{
icon: Sparkles,
titulo: "Audio, voix et IA",
texto: "ESP-ADF pour le traitement audio, ESP-SR pour la reconnaissance vocale hors ligne et ESP-NN pour accélérer le TinyML.",
links: [
["Audio", "/frameworks/ESP-ADF", Music],
["Voix", "/frameworks/ESP-SR", Mic],
["IA", "/frameworks/ESP-NN", Brain],
],
},
];
const GUIAS_DE = [
{
icon: GraduationCap,
titulo: "Erste Schritte",
texto: "Arduino oder MicroPython sind die schnellsten Wege, um Sensoren und APIs zu testen. Für den Produkteinsatz empfehlen sich ESP-IDF oder Rust.",
links: [
["Arduino", "/frameworks/Arduino"],
["MicroPython", "/frameworks/MicroPython"],
["Rust", "/frameworks/Rust-ESP"],
],
},
{
icon: Cloud,
titulo: "Cloud und Smart Home",
texto: "ESP-Matter für Interoperabilität, ESP-RainMaker für eine fertige Cloud-Lösung und Zigbee für stromsparende lokale Mesh-Netzwerke.",
links: [
["RainMaker", "/frameworks/ESP-RainMaker"],
["Matter", "/frameworks/ESP-Matter"],
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
],
},
{
icon: Sparkles,
titulo: "Audio, Sprache und KI",
texto: "ESP-ADF für Audioverarbeitung, ESP-SR für Offline-Sprachkennung und ESP-NN zur Beschleunigung von TinyML.",
links: [
["Audio", "/frameworks/ESP-ADF", Music],
["Sprache", "/frameworks/ESP-SR", Mic],
["KI", "/frameworks/ESP-NN", Brain],
],
},
];
export default async function Frameworks({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : frameworksDataPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const currentLocale = isEs ? "es" : isEn ? "en" : isFr ? "fr" : isDe ? "de" : "pt";
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : isFr ? frameworksDataFr : isDe ? frameworksDataDe : frameworksDataPt;
const frameworks = Object.entries(frameworksData);
const guias = isEs ? GUIAS_ES : isEn ? GUIAS_EN : GUIAS_PT;
const guias = isEs ? GUIAS_ES : isEn ? GUIAS_EN : isFr ? GUIAS_FR : isDe ? GUIAS_DE : GUIAS_PT;
return (
<div className="site-canvas min-h-screen">
@@ -126,20 +196,26 @@ export default async function Frameworks({ params }) {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Frameworks y SDKs" : isEn ? "Frameworks & SDKs" : "Frameworks e SDKs" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isEs ? "Frameworks y SDKs" : isEn ? "Frameworks & SDKs" : isFr ? "Frameworks et SDKs" : isDe ? "Frameworks & SDKs" : "Frameworks e SDKs" }]}
icon={Layers}
label={isEs ? `${frameworks.length} frameworks y SDKs` : isEn ? `${frameworks.length} frameworks and SDKs` : `${frameworks.length} frameworks e SDKs`}
title={isEs ? "Frameworks y SDKs de ESP32" : isEn ? "ESP32 Frameworks and SDKs" : "Frameworks e SDKs do ESP32"}
label={isEs ? `${frameworks.length} frameworks y SDKs` : isEn ? `${frameworks.length} frameworks and SDKs` : isFr ? `${frameworks.length} frameworks et SDKs` : isDe ? `${frameworks.length} Frameworks und SDKs` : `${frameworks.length} frameworks e SDKs`}
title={isEs ? "Frameworks y SDKs de ESP32" : isEn ? "ESP32 Frameworks and SDKs" : isFr ? "Frameworks et SDKs pour ESP32" : isDe ? "ESP32-Frameworks und SDKs" : "Frameworks e SDKs do ESP32"}
lede={
isEs
? "Desde C/C++ nativo con FreeRTOS hasta Rust, nube IoT, reconocimiento de voz, audio y Matter. Elija según lo que desee construir."
: isEn
? "From native C/C++ with FreeRTOS to Rust, IoT cloud, speech recognition, audio, and Matter. Choose by what you want to build."
: isFr
? "Du C/C++ natif avec FreeRTOS à Rust, en passant par le cloud IoT, la reconnaissance vocale, l'audio et Matter. Choisissez selon ce que vous souhaitez concevoir."
: isDe
? "Von nativem C/C++ mit FreeRTOS bis hin zu Rust, IoT-Cloud, Spracherkennung, Audio und Matter. Wählen Sie passend zu Ihrem Projekt."
: "Do C/C++ nativo com FreeRTOS ao Rust, passando por nuvem IoT, reconhecimento de voz, áudio e Matter. Escolha pelo que você quer construir."
}
/>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Por dónde empezar" : isEn ? "Where to begin" : "Por onde começar"}>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Por dónde empezar" : isEn ? "Where to begin" : isFr ? "Par où commencer" : isDe ? "Wo anfangen" : "Por onde começar"}>
<div className="grid gap-4 md:grid-cols-3">
{guias.map(({ icon: Icon, titulo, texto, links }) => (
<div key={titulo} className="card flex flex-col p-5 sm:p-6">
@@ -168,7 +244,7 @@ export default async function Frameworks({ params }) {
<div className="max-w-2xl">
<span className="chip chip-accent">
<Box className="h-3.5 w-3.5" aria-hidden="true" />
{isEs ? "Arquitectura modular" : isEn ? "Modular architecture" : "Arquitetura modular"}
{isEs ? "Arquitectura modular" : isEn ? "Modular architecture" : isFr ? "Architecture modulaire" : isDe ? "Modulare Architektur" : "Arquitetura modular"}
</span>
<h2 className="section-title mt-4">ESP Component Registry</h2>
<p className="mt-3 text-base leading-relaxed text-muted">
@@ -182,6 +258,16 @@ export default async function Frameworks({ params }) {
Install display drivers (LVGL), industrial stacks (Modbus), cloud integrations, and board support packages
(BSPs) with a single line in your <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> manifest.
</>
) : isFr ? (
<>
Installez des pilotes d'écran (LVGL), des piles industrielles (Modbus), des fonctionnalités cloud et des paquets de support de cartes
(BSPs) avec une seule ligne dans votre manifeste <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>.
</>
) : isDe ? (
<>
Installieren Sie Display-Treiber (LVGL), Industrieprotokolle (Modbus), Cloud-Funktionen und Board-Support-Pakete
(BSPs) mit einer einzigen Zeile in Ihrem <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>-Manifest.
</>
) : (
<>
Instale drivers de display (LVGL), pilhas industriais (Modbus), recursos de nuvem e pacotes de placa
@@ -191,7 +277,7 @@ export default async function Frameworks({ params }) {
</p>
</div>
<Link href={getLocalizedHref("/componentes", currentLocale)} className="btn btn-primary shrink-0">
{isEs ? "Explorar componentes" : isEn ? "Explore components" : "Explorar componentes"}
{isEs ? "Explorar componentes" : isEn ? "Explore components" : isFr ? "Explorer les composants" : isDe ? "Komponenten erkunden" : "Explorar componentes"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
@@ -201,8 +287,8 @@ export default async function Frameworks({ params }) {
<SectionHead
id="todos-titulo"
eyebrow={isEs ? "Todos" : isEn ? "All" : "Todos"}
title={isEs ? "Todos los frameworks" : isEn ? "All frameworks" : "Todos os frameworks"}
lede={isEs ? "Cada ficha ofrece funciones, aplicaciones ideales, ejemplos de código y enlaces oficiales." : isEn ? "Each page provides features, ideal use cases, code examples, and official links." : "Cada ficha traz recursos, aplicações ideais, exemplo de código e links oficiais."}
title={isEs ? "Todos los frameworks" : isEn ? "All frameworks" : isFr ? "Tous les frameworks" : isDe ? "Alle Frameworks" : "Todos os frameworks"}
lede={isEs ? "Cada ficha ofrece funciones, aplicaciones ideales, ejemplos de código y enlaces oficiales." : isEn ? "Each page provides features, ideal use cases, code examples, and official links." : isFr ? "Chaque fiche présente les fonctionnalités, les cas d'usage idéaux, des exemples de code et les liens officiels." : isDe ? "Jedes Datenblatt bietet Features, ideale Anwendungsbereiche, Codebeispiele und offizielle Links." : "Cada ficha traz recursos, aplicações ideais, exemplo de código e links oficiais."}
/>
<div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -224,7 +310,7 @@ export default async function Frameworks({ params }) {
</ul>
<span className="mt-5 inline-flex items-center gap-1 border-t border-line pt-4 text-sm font-medium text-accent">
{isEs ? "Ver detalles y ejemplo" : isEn ? "View details and example" : "Ver detalhes e exemplo"}
{isEs ? "Ver detalles y ejemplo" : isEn ? "View details and example" : isFr ? "Voir les détails et l'exemple" : isDe ? "Details und Beispiel ansehen" : "Ver detalhes e exemplo"}
<ArrowUpRight className="h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" aria-hidden="true" />
</span>
</Link>
app/[locale]/glossario/layout.jsx
+44 -5
View File
@@ -2,21 +2,33 @@ import { paginaMeta, jsonLd } from "@/lib/seo";
import { categoriasGlossario as categoriasGlossarioPt } from "@/lib/glossarioData";
import { categoriasGlossario as categoriasGlossarioEn } from "@/lib/data/en/glossario.js";
import { categoriasGlossario as categoriasGlossarioEs } from "@/lib/data/es/glossario.js";
import { categoriasGlossario as categoriasGlossarioFr } from "@/lib/data/fr/glossario.js";
import { categoriasGlossario as categoriasGlossarioDe } from "@/lib/data/de/glossario.js";
export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEs
? "Glosario técnico de ESP32: Términos y conceptos"
: isEn
? "ESP32 Technical Glossary: Terms and Concepts"
: isFr
? "Glossaire technique de l'ESP32 : termes et concepts"
: isDe
? "Technisches ESP32-Glossar: Begriffe und Konzepte"
: "Glossário Técnico do ESP32: Termos e Conceitos",
descricao: isEs
? "Más de 50 conceptos esenciales de ESP32 explicados: GPIO, Strapping Pins, ULP, PSRAM, FreeRTOS, eFuse, Deep Sleep, OTA, Secure Boot, ECDSA, Matter y Thread."
: isEn
? "Over 50 essential ESP32 concepts explained: GPIO, Strapping Pins, ULP, PSRAM, FreeRTOS, eFuse, Deep Sleep, OTA, Secure Boot, ECDSA, Matter, and Thread."
: isFr
? "Plus de 50 concepts essentiels de l'ESP32 expliqués : GPIO, Strapping Pins, ULP, PSRAM, FreeRTOS, eFuse, Deep Sleep, OTA, Secure Boot, ECDSA, Matter et Thread."
: isDe
? "Über 50 wichtige ESP32-Konzepte verständlich erklärt: GPIO, Strapping-Pins, ULP, PSRAM, FreeRTOS, eFuse, Deep Sleep, OTA, Secure Boot, ECDSA, Matter und Thread."
: "Mais de 50 termos e conceitos essenciais do ecossistema ESP32 explicados em português: GPIO, Strapping Pins, ULP, PSRAM, FreeRTOS, eFuse, Deep Sleep, OTA, Secure Boot, ECDSA, Matter e Thread.",
caminho: "/glossario",
locale,
@@ -40,6 +52,26 @@ export async function generateMetadata({ params }) {
"microcontroller technical terms",
"ESP32 hardware concepts",
]
: isFr
? [
"glossaire ESP32",
"qu'est-ce que le GPIO",
"que sont les strapping pins",
"qu'est-ce que l'ESP32 ULP",
"qu'est-ce que l'ESP32 PSRAM",
"termes techniques microcontrôleur",
"concepts matériels ESP32",
]
: isDe
? [
"ESP32 Glossar",
"was ist GPIO",
"was sind Strapping-Pins",
"was ist ESP32 ULP",
"was ist ESP32 PSRAM",
"technische Mikrocontroller-Begriffe",
"ESP32 Hardware-Konzepte",
]
: [
"glossário ESP32",
"o que é GPIO",
@@ -56,7 +88,10 @@ export default async function GlossarioLayout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const categorias = isEs ? categoriasGlossarioEs : isEn ? categoriasGlossarioEn : categoriasGlossarioPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const categorias = isEs ? categoriasGlossarioEs : isEn ? categoriasGlossarioEn : isFr ? categoriasGlossarioFr : isDe ? categoriasGlossarioDe : categoriasGlossarioPt;
const canonPath = isEs ? "/es/glosario" : isEn ? "/en/glossary" : isFr ? "/fr/glossaire" : isDe ? "/de/glossar" : "/glossario";
return (
<>
@@ -71,8 +106,8 @@ export default async function GlossarioLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: isEs ? "Glosario técnico" : isEn ? "Technical Glossary" : "Glossário Técnico", caminho: isEs ? "/es/glosario" : isEn ? "/en/glossary" : "/glossario" },
{ nome: isEs ? "Inicio" : isEn ? "Home" : isFr ? "Accueil" : isDe ? "Startseite" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : isFr ? "/fr" : isDe ? "/de" : "/" },
{ nome: isEs ? "Glosario técnico" : isEn ? "Technical Glossary" : isFr ? "Glossaire technique" : isDe ? "Technisches Glossar" : "Glossário Técnico", caminho: canonPath },
])
),
}}
@@ -82,13 +117,17 @@ export default async function GlossarioLayout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.aplicacaoWeb({
nome: isEs ? "Glosario técnico de ESP32" : isEn ? "ESP32 Technical Glossary" : "Glossário Técnico do ESP32",
nome: isEs ? "Glosario técnico de ESP32" : isEn ? "ESP32 Technical Glossary" : isFr ? "Glossaire technique de l'ESP32" : isDe ? "Technisches ESP32-Glossar" : "Glossário Técnico do ESP32",
descricao: isEs
? "Enciclopedia de términos técnicos y conceptos de hardware y software del ecosistema ESP32."
: isEn
? "Encyclopedia of hardware and software technical terms for the ESP32 ecosystem."
: isFr
? "Encyclopédie des termes techniques et des concepts matériels et logiciels de l'écosystème ESP32."
: isDe
? "Enzyklopädie technischer Begriffe und Hardware-/Softwarekonzepte für das ESP32-Ökosystem."
: "Enciclopédia de termos técnicos e conceitos de hardware e software do ecossistema ESP32.",
caminho: isEs ? "/es/glosario" : isEn ? "/en/glossary" : "/glossario",
caminho: canonPath,
locale,
})
),
app/[locale]/glossario/page.jsx
+107 -28
View File
@@ -9,6 +9,8 @@ import Link from "next/link";
import * as glossarioPt from "@/lib/glossarioData";
import * as glossarioEn from "@/lib/data/en/glossario";
import * as glossarioEs from "@/lib/data/es/glossario";
import * as glossarioFr from "@/lib/data/fr/glossario";
import * as glossarioDe from "@/lib/data/de/glossario";
import { getLocalizedHref } from "@/i18n/links";
import {
ArrowRight,
@@ -42,8 +44,10 @@ export default function GlossarioPage() {
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const { categoriasGlossario } = isEs ? glossarioEs : isEn ? glossarioEn : glossarioPt;
const isFr = pathname?.startsWith("/fr");
const isDe = pathname?.startsWith("/de");
const currentLocale = isDe ? "de" : isFr ? "fr" : isEs ? "es" : isEn ? "en" : "pt";
const { categoriasGlossario } = isDe ? glossarioDe : isFr ? glossarioFr : isEs ? glossarioEs : isEn ? glossarioEn : glossarioPt;
const [busca, setBusca] = useState("");
const [categoriaSelecionada, setCategoriaSelecionada] = useState("todas");
@@ -112,12 +116,38 @@ export default function GlossarioPage() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Glosario" : isEn ? "Glossary" : "Glossário" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isDe ? "Glossar" : isFr ? "Glossaire" : isEs ? "Glosario" : isEn ? "Glossary" : "Glossário" }]}
icon={BookOpen}
label={isEs ? `${todosOsTermos.length} términos explicados` : isEn ? `${todosOsTermos.length} terms explained` : `${todosOsTermos.length} termos explicados`}
title={isEs ? "Glosario técnico de ESP32" : isEn ? "ESP32 Technical Glossary" : "Glossário técnico do ESP32"}
label={
isDe
? `${todosOsTermos.length} Begriffe erklärt`
: isFr
? `${todosOsTermos.length} termes expliqués`
: isEs
? `${todosOsTermos.length} términos explicados`
: isEn
? `${todosOsTermos.length} terms explained`
: `${todosOsTermos.length} termos explicados`
}
title={
isDe
? "Technisches Glossar für ESP32"
: isFr
? "Glossaire technique ESP32"
: isEs
? "Glosario técnico de ESP32"
: isEn
? "ESP32 Technical Glossary"
: "Glossário técnico do ESP32"
}
lede={
isEs
isDe
? "Präzise Definitionen, Hardware-Parameter und praktische Beispiele für jeden Begriff des Ökosystems – von ADC bis Secure Boot."
: isFr
? "Définitions précises, paramètres matériels et exemples pratiques pour chaque terme de l'écosystème, de l'ADC au Secure Boot."
: isEs
? "Definiciones directas, parámetros de hardware y un ejemplo práctico para cada término del ecosistema, desde ADC hasta Secure Boot."
: isEn
? "Direct definitions, hardware parameters, and practical examples for every ecosystem term, from ADC to Secure Boot."
@@ -125,11 +155,11 @@ export default function GlossarioPage() {
}
/>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Búsqueda y filtros" : isEn ? "Search and filters" : "Busca e filtros"}>
<section className="shell pt-10 sm:pt-12" aria-label={isDe ? "Suche und Filter" : isFr ? "Recherche et filtres" : isEs ? "Búsqueda y filtros" : isEn ? "Search and filters" : "Busca e filtros"}>
<div className="panel p-5 sm:p-7">
<div className="relative">
<label htmlFor="busca-glossario" className="sr-only">
{isEs ? "Buscar término, sigla o concepto" : isEn ? "Search term, acronym, or concept" : "Buscar termo, sigla ou conceito"}
{isDe ? "Nach Begriff, Abkürzung oder Konzept suchen" : isFr ? "Rechercher un terme, un sigle ou un concept" : isEs ? "Buscar término, sigla o concepto" : isEn ? "Search term, acronym, or concept" : "Buscar termo, sigla ou conceito"}
</label>
<Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-muted" aria-hidden="true" />
<input
@@ -138,7 +168,7 @@ export default function GlossarioPage() {
type="search"
value={busca}
onChange={(e) => setBusca(e.target.value)}
placeholder={isEs ? "Buscar término, sigla o concepto" : isEn ? "Search term, acronym, or concept" : "Buscar termo, sigla ou conceito"}
placeholder={isDe ? "Nach Begriff, Abkürzung oder Konzept suchen" : isFr ? "Rechercher un terme, un sigle ou un concept" : isEs ? "Buscar término, sigla o concepto" : isEn ? "Search term, acronym, or concept" : "Buscar termo, sigla ou conceito"}
autoComplete="off"
className={`field pl-12 text-base ${busca ? "pr-28" : "pr-4"}`}
/>
@@ -146,14 +176,14 @@ export default function GlossarioPage() {
{busca && (
<button type="button" onClick={() => { setBusca(""); searchInputRef.current?.focus(); }} className="btn btn-ghost btn-sm">
<X className="h-3.5 w-3.5" aria-hidden="true" />
{isEs ? "Limpiar" : isEn ? "Clear" : "Limpar"}
{isDe ? "Löschen" : isFr ? "Effacer" : isEs ? "Limpiar" : isEn ? "Clear" : "Limpar"}
</button>
)}
</div>
</div>
<div className="mt-4 flex flex-wrap items-center gap-2">
<span className="mr-1 text-sm text-muted">{isEs ? "Más buscados" : isEn ? "Popular searches" : "Mais buscados"}</span>
<span className="mr-1 text-sm text-muted">{isDe ? "Häufig gesucht" : isFr ? "Plus recherchés" : isEs ? "Más buscados" : isEn ? "Popular searches" : "Mais buscados"}</span>
{BUSCAS_POPULARES.map((rotulo) => (
<button
key={rotulo}
@@ -167,7 +197,7 @@ export default function GlossarioPage() {
</div>
<div className="mt-5 border-t border-line pt-5">
<h2 className="text-sm font-semibold text-ink">{isEs ? "Categoría" : isEn ? "Category" : "Categoria"}</h2>
<h2 className="text-sm font-semibold text-ink">{isDe ? "Kategorie" : isFr ? "Catégorie" : isEs ? "Categoría" : isEn ? "Category" : "Categoria"}</h2>
<div className="mt-3 flex flex-wrap gap-2">
<button
type="button"
@@ -176,7 +206,7 @@ export default function GlossarioPage() {
className="chip-btn"
>
<LayoutGrid className="h-4 w-4" aria-hidden="true" />
{isEs ? "Todas" : isEn ? "All" : "Todas"}
{isDe ? "Alle" : isFr ? "Toutes" : isEs ? "Todas" : isEn ? "All" : "Todas"}
<span className="tabular-nums opacity-80">{todosOsTermos.length}</span>
</button>
{categoriasGlossario.map((cat) => {
@@ -199,10 +229,10 @@ export default function GlossarioPage() {
</div>
<div className="mt-6 border-t border-line pt-6">
<h2 className="text-sm font-semibold text-ink">{isEs ? "Orden alfabético" : isEn ? "Alphabetical order" : "Ordem alfabética"}</h2>
<div className="mt-3 flex flex-wrap gap-1.5" role="group" aria-label={isEs ? "Filtrar por letra inicial" : isEn ? "Filter by first letter" : "Filtrar pela letra inicial"}>
<h2 className="text-sm font-semibold text-ink">{isDe ? "Alphabetische Reihenfolge" : isFr ? "Ordre alphabétique" : isEs ? "Orden alfabético" : isEn ? "Alphabetical order" : "Ordem alfabética"}</h2>
<div className="mt-3 flex flex-wrap gap-1.5" role="group" aria-label={isDe ? "Nach Anfangsbuchstaben filtern" : isFr ? "Filtrer par lettre initiale" : isEs ? "Filtrar por letra inicial" : isEn ? "Filter by first letter" : "Filtrar pela letra inicial"}>
<button type="button" onClick={() => setLetraFiltro(null)} aria-pressed={letraFiltro === null} className="chip-btn">
{isEs ? "Todas" : isEn ? "All" : "Todas"}
{isDe ? "Alle" : isFr ? "Toutes" : isEs ? "Todas" : isEn ? "All" : "Todas"}
</button>
{alfabeto.map(({ letra, temTermos }) => (
<button
@@ -224,13 +254,44 @@ export default function GlossarioPage() {
<section className="shell section pt-8 sm:pt-10" aria-labelledby="resultado-titulo">
<div className="flex flex-wrap items-center justify-between gap-3">
<h2 id="resultado-titulo" className="text-base font-semibold text-ink" role="status" aria-live="polite">
{total} {total === 1 ? (isEs ? "término" : isEn ? "term" : "termo") : (isEs ? "términos" : isEn ? "terms" : "termos")}
{temFiltroAtivo && <span className="font-normal text-muted">{isEs ? " con los filtros actuales" : isEn ? " with current filters" : " com os filtros atuais"}</span>}
{total}{" "}
{total === 1
? isDe
? "Begriff"
: isFr
? "terme"
: isEs
? "término"
: isEn
? "term"
: "termo"
: isDe
? "Begriffe"
: isFr
? "termes"
: isEs
? "términos"
: isEn
? "terms"
: "termos"}
{temFiltroAtivo && (
<span className="font-normal text-muted">
{isDe
? " mit den aktuellen Filtern"
: isFr
? " avec les filtres actuels"
: isEs
? " con los filtros actuales"
: isEn
? " with current filters"
: " com os filtros atuais"}
</span>
)}
</h2>
{temFiltroAtivo && (
<button type="button" onClick={limparTodosFiltros} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
<RotateCcw className="h-4 w-4" aria-hidden="true" />
{isEs ? "Restablecer filtros" : isEn ? "Reset filters" : "Redefinir filtros"}
{isDe ? "Filter zurücksetzen" : isFr ? "Réinitialiser les filtres" : isEs ? "Restablecer filtros" : isEn ? "Reset filters" : "Redefinir filtros"}
</button>
)}
</div>
@@ -239,10 +300,14 @@ export default function GlossarioPage() {
<div className="card mt-6 px-6 py-14 text-center">
<HelpCircle className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
<h3 className="mt-4 font-display text-xl font-semibold text-ink">
{isEs ? "No se encontraron términos" : isEn ? "No terms found" : "Nenhum termo encontrado"}
{isDe ? "Keine Begriffe gefunden" : isFr ? "Aucun terme trouvé" : isEs ? "No se encontraron términos" : isEn ? "No terms found" : "Nenhum termo encontrado"}
</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-muted">
{isEs
{isDe
? "Nichts entspricht Ihrer aktuellen Suche und den Filtern. Versuchen Sie eine kürzere Abkürzung oder wählen Sie alle Kategorien."
: isFr
? "Rien ne correspond à votre recherche et à vos filtres actuels. Essayez avec un sigle plus court ou revenez à toutes les catégories."
: isEs
? "Nada coincide con la búsqueda y los filtros actuales. Pruebe con una sigla más corta o vuelva a todas las categorías."
: isEn
? "Nothing matches your current search and filters. Try a shorter acronym or reset to all categories."
@@ -250,7 +315,7 @@ export default function GlossarioPage() {
</p>
<button type="button" onClick={limparTodosFiltros} className="btn btn-primary mt-6">
<RotateCcw className="h-4 w-4" aria-hidden="true" />
{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : "Limpar filtros"}
{isDe ? "Filter zurücksetzen" : isFr ? "Réinitialiser les filtres" : isEs ? "Limpiar filtros" : isEn ? "Clear filters" : "Limpar filtros"}
</button>
</div>
) : (
@@ -267,7 +332,17 @@ export default function GlossarioPage() {
<button
type="button"
onClick={() => copiarLinkTermo(item.slug)}
aria-label={isEs ? `Copiar enlace para ${item.termo}` : isEn ? `Copy link for ${item.termo}` : `Copiar link para ${item.termo}`}
aria-label={
isDe
? `Link für ${item.termo} kopieren`
: isFr
? `Copier le lien pour ${item.termo}`
: isEs
? `Copiar enlace para ${item.termo}`
: isEn
? `Copy link for ${item.termo}`
: `Copiar link para ${item.termo}`
}
className="btn-icon inline-flex h-11 w-11 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-accent"
>
{copiadoSlug === item.slug ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Link2 className="h-4 w-4" aria-hidden="true" />}
@@ -282,7 +357,7 @@ export default function GlossarioPage() {
<div className="callout mt-5">
<p className="flex items-center gap-1.5 text-sm font-semibold text-ink">
<Lightbulb className="h-4 w-4 text-accent" aria-hidden="true" />
{isEs ? "En la práctica" : isEn ? "In practice" : "Na prática"}
{isDe ? "In der Praxis" : isFr ? "En pratique" : isEs ? "En la práctica" : isEn ? "In practice" : "Na prática"}
</p>
<p className="mt-1">
<TextoComLinks texto={item.exemplo} currentLocale={currentLocale} />
@@ -298,10 +373,14 @@ export default function GlossarioPage() {
<section className="shell pb-20 md:pb-28">
<div className="panel p-8 text-center sm:p-12">
<h2 className="section-title mx-auto max-w-2xl">
{isEs ? "Del concepto al chip adecuado." : isEn ? "From concept to the right chip." : "Do conceito ao chip certo."}
{isDe ? "Vom Konzept zum richtigen Chip." : isFr ? "Du concept à la bonne puce." : isEs ? "Del concepto al chip adecuado." : isEn ? "From concept to the right chip." : "Do conceito ao chip certo."}
</h2>
<p className="lede mx-auto mt-4 max-w-2xl">
{isEs
{isDe
? "Mit den Begriffen zur Hand vergleichen Sie die Serien Seite an Seite oder nutzen Sie die Auswahlhilfe, um das Modell für Ihr Projekt zu finden."
: isFr
? "Avec les termes sous la main, comparez les séries côte à côte ou répondez au sélecteur pour trouver le modèle adapté à votre projet."
: isEs
? "Con los términos a mano, compare las series lado a lado o responda al selector para encontrar el modelo que se adapta a su proyecto."
: isEn
? "With the terms in hand, compare series side by side or answer the selector to find the model that fits your project."
@@ -310,10 +389,10 @@ export default function GlossarioPage() {
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
<Link href={getLocalizedHref("/seletor", currentLocale)} className="btn btn-primary w-full sm:w-auto">
<Sliders className="h-4 w-4" aria-hidden="true" />
{isEs ? "Elegir mi chip" : isEn ? "Choose my chip" : "Escolher meu chip"}
{isDe ? "Meinen Chip wählen" : isFr ? "Choisir ma puce" : isEs ? "Elegir mi chip" : isEn ? "Choose my chip" : "Escolher meu chip"}
</Link>
<Link href={getLocalizedHref("/series", currentLocale)} className="btn btn-ghost w-full sm:w-auto">
{isEs ? "Explorar las series" : isEn ? "Explore series" : "Explorar as séries"}
{isDe ? "Serien erkunden" : isFr ? "Explorer les séries" : isEs ? "Explorar las series" : isEn ? "Explore series" : "Explorar as séries"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
app/[locale]/layout.jsx
+33 -1
View File
@@ -46,6 +46,8 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
const ogLocaleMap = {
pt: "pt_BR",
@@ -62,12 +64,20 @@ export async function generateMetadata({ params }) {
? "ESPDocs · ESP32 Open Documentation"
: isEs
? "ESPDocs · Documentación abierta de ESP32"
: isFr
? "ESPDocs · Documentation ouverte ESP32"
: isDe
? "ESPDocs · Offene ESP32-Dokumentation"
: "ESPDocs · Documentação do ESP32 em português";
const description = isEn
? "Specifications, pinouts, comparison and selection of 12 ESP32 microcontroller series. Datasheets, peripherals, hardware security and connection diagrams."
: isEs
? "Especificaciones, patillaje, comparación y selección de las 12 series de microcontroladores ESP32. Hojas de datos, periféricos, seguridad en hardware y diagramas de conexión."
: isFr
? "Spécifications, brochages, comparaison et sélection des 12 séries de microcontrôleurs ESP32. Fiches techniques, périphériques, sécurité matérielle et schémas de connexion."
: isDe
? "Spezifikationen, Pinbelegungen, Vergleich und Auswahl der 12 ESP32-Mikrocontrollerserien. Datenblätter, Peripheriegeräte, Hardwaresicherheit und Anschlussdiagramme."
: "Especificações, pinagem, comparação e seleção das 12 séries de microcontroladores ESP32, em português brasileiro. Datasheets, periféricos, segurança em hardware e diagramas de conexão.";
const keywords = isEn
@@ -84,6 +94,20 @@ export async function generateMetadata({ params }) {
"comparar ESP32", "cuál ESP32 elegir", "datasheet ESP32", "hoja de datos ESP32",
"microcontrolador", "Espressif", "ESP-IDF", "IoT", "sistemas embebidos",
]
: isFr
? [
"ESP32", "ESP32 en français", "documentation ESP32", "brochage ESP32", "pinout ESP32",
"ESP32-S3", "ESP32-C3", "ESP32-C6", "ESP32-P4", "ESP32-H2",
"comparer ESP32", "quel ESP32 choisir", "datasheet ESP32", "fiche technique ESP32",
"microcontrôleur", "Espressif", "ESP-IDF", "IoT", "systèmes embarqués",
]
: isDe
? [
"ESP32", "ESP32 auf Deutsch", "ESP32 Dokumentation", "ESP32 Pinbelegung", "ESP32 Pinout",
"ESP32-S3", "ESP32-C3", "ESP32-C6", "ESP32-P4", "ESP32-H2",
"ESP32 vergleichen", "welchen ESP32 wählen", "ESP32 Datenblatt",
"Mikrocontroller", "Espressif", "ESP-IDF", "IoT", "eingebettete Systeme",
]
: [
"ESP32", "ESP32 português", "documentação ESP32", "pinout ESP32",
"ESP32-S3", "ESP32-C3", "ESP32-C6", "ESP32-P4", "ESP32-H2",
@@ -126,6 +150,10 @@ export async function generateMetadata({ params }) {
? "Specifications, pinouts, comparison and selection of 12 ESP32 microcontroller series."
: isEs
? "Especificaciones, patillaje, comparación y selección de las 12 series de microcontroladores ESP32."
: isFr
? "Spécifications, brochages, comparaison et sélection des 12 séries de microcontrôleurs ESP32."
: isDe
? "Spezifikationen, Pinbelegungen, Vergleich und Auswahl der 12 ESP32-Mikrocontrollerserien."
: "Especificações, pinagem, comparação e seleção das 12 séries de microcontroladores ESP32, em português brasileiro.",
},
twitter: {
@@ -135,6 +163,10 @@ export async function generateMetadata({ params }) {
? "Specifications, pinouts, comparison and selection of 12 ESP32 series."
: isEs
? "Especificaciones, patillaje, comparación y selección de las 12 series de ESP32."
: isFr
? "Spécifications, brochages, comparaison et sélection des 12 séries ESP32."
: isDe
? "Spezifikationen, Pinbelegungen, Vergleich und Auswahl der 12 ESP32-Serien."
: "Especificações, pinagem, comparação e seleção das 12 séries de ESP32, em português.",
},
robots: {
@@ -194,7 +226,7 @@ export default async function RootLayout({ children, params }) {
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd.siteESociedade(locale)) }}
/>
</head>
<body className="font-sans antialiased bg-canvas text-ink overflow-x-clip" suppressHydrationWarning>
<body className="font-sans antialiased bg-canvas text-ink overflow-x-clip hyphens-auto" suppressHydrationWarning>
<a
href="#conteudo"
className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:rounded-full focus:bg-ink focus:px-5 focus:py-3 focus:text-sm focus:font-semibold focus:text-canvas"
app/[locale]/not-found.jsx
+25 -5
View File
@@ -31,6 +31,20 @@ const CAMINHOS_ES = [
{ href: "/glossario", icon: BookOpen, titulo: "Glosario", texto: "Términos de hardware explicados con claridad." },
];
const CAMINHOS_FR = [
{ href: "/series", icon: Compass, titulo: "Séries ESP32", texto: "Les 12 familles, avec brochage et spécifications." },
{ href: "/seletor", icon: SlidersHorizontal, titulo: "Sélecteur de puce", texto: "Répondez à huit questions et obtenez les modèles recommandés." },
{ href: "/comparacao", icon: Scale, titulo: "Comparateur", texto: "Jusqu'à quatre séries côte à côte." },
{ href: "/glossario", icon: BookOpen, titulo: "Glossaire", texto: "Les termes matériels expliqués clairement." },
];
const CAMINHOS_DE = [
{ href: "/series", icon: Compass, titulo: "ESP32-Serien", texto: "Die 12 Familien mit Pinbelegung und Spezifikationen." },
{ href: "/seletor", icon: SlidersHorizontal, titulo: "Chip-Auswahl", texto: "Beantworten Sie acht Fragen und erhalten Sie passende Empfehlungen." },
{ href: "/comparacao", icon: Scale, titulo: "Vergleich", texto: "Bis zu vier Serien im direkten Vergleich." },
{ href: "/glossario", icon: BookOpen, titulo: "Glossar", texto: "Hardware-Begriffe verständlich erklärt." },
];
export default async function NotFound() {
let locale = "pt";
try {
@@ -40,7 +54,9 @@ export default async function NotFound() {
}
const isEn = locale === "en";
const isEs = locale === "es";
const caminhos = isEn ? CAMINHOS_EN : isEs ? CAMINHOS_ES : CAMINHOS_PT;
const isFr = locale === "fr";
const isDe = locale === "de";
const caminhos = isEn ? CAMINHOS_EN : isEs ? CAMINHOS_ES : isFr ? CAMINHOS_FR : isDe ? CAMINHOS_DE : CAMINHOS_PT;
return (
<div className="site-canvas min-h-screen">
@@ -48,18 +64,22 @@ export default async function NotFound() {
<main id="conteudo" className="shell section">
<div className="mx-auto max-w-2xl text-center">
<p className="eyebrow justify-center">{isEn ? "Error 404" : "Error 404"}</p>
<h1 className="page-title mt-4">{isEn ? "This page does not exist." : isEs ? "Esta página no existe." : "Essa página não existe."}</h1>
<p className="eyebrow justify-center">{isEn ? "Error 404" : isFr ? "Erreur 404" : isDe ? "Fehler 404" : "Error 404"}</p>
<h1 className="page-title mt-4">{isEn ? "This page does not exist." : isEs ? "Esta página no existe." : isFr ? "Cette page n'existe pas." : isDe ? "Diese Seite existiert nicht." : "Essa página não existe."}</h1>
<p className="lede mx-auto mt-5 max-w-xl">
{isEn
? "The address may have changed or was mistyped. Choose one of these paths to continue."
: isEs
? "La dirección puede haber cambiado o estar mal escrita. Elija uno de estos caminos para continuar."
: isFr
? "L'adresse a peut-être changé ou a été mal saisie. Choisissez l'un de ces chemins pour continuer."
: isDe
? "Die Adresse wurde möglicherweise geändert oder falsch eingegeben. Wählen Sie einen dieser Wege, um fortzufahren."
: "O endereço pode ter mudado ou estar digitado errado. Escolha um destes caminhos para continuar."}
</p>
<div className="mt-8 flex justify-center">
<Link href={isEn ? "/en" : isEs ? "/es" : "/"} className="btn btn-primary">
{isEn ? "Back to home" : isEs ? "Volver al inicio" : "Voltar ao início"}
<Link href={isEn ? "/en" : isEs ? "/es" : isFr ? "/fr" : isDe ? "/de" : "/"} className="btn btn-primary">
{isEn ? "Back to home" : isEs ? "Volver al inicio" : isFr ? "Retour à l'accueil" : isDe ? "Zur Startseite" : "Voltar ao início"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
app/[locale]/page.jsx
+204 -22
View File
@@ -8,6 +8,10 @@ import seriesDataEn from "@/data/en/series.json";
import frameworksDataEn from "@/data/en/frameworks.json";
import seriesDataEs from "@/data/es/series.json";
import frameworksDataEs from "@/data/es/frameworks.json";
import seriesDataFr from "@/data/fr/series.json";
import frameworksDataFr from "@/data/fr/frameworks.json";
import seriesDataDe from "@/data/de/series.json";
import frameworksDataDe from "@/data/de/frameworks.json";
import { SITE } from "@/lib/seo";
import { getLocalizedHref } from "@/i18n/links";
import {
@@ -159,6 +163,96 @@ const TOOLS_ES = [
},
];
const TOOLS_FR = [
{
href: "/seletor",
title: "Sélecteur intelligent",
desc: "Répondez à huit questions sur votre projet et découvrez les puces recommandées, avec justification technique.",
icon: SlidersHorizontal,
action: "Trouver ma puce",
},
{
href: "/comparacao",
title: "Comparateur de séries",
desc: "Comparez jusqu'à quatre modèles côte à côte : cœurs, radio, mémoire, périphériques et sécurité.",
icon: Scale,
action: "Comparer maintenant",
},
{
href: "/diagnostico",
title: "Diagnostic de pannes",
desc: "Causes et solutions pour brownout, bootloop, Guru Meditation, watchdog et erreurs de flash.",
icon: AlertTriangle,
action: "Ouvrir le diagnostic",
},
{
href: "/componentes",
title: "Component Registry",
desc: "Pilotes, bibliothèques et BSP du registre officiel Espressif, avec manifeste prêt pour votre projet.",
icon: Box,
action: "Explorer les composants",
},
{
href: "/frameworks",
title: "Frameworks et SDKs",
desc: "ESP-IDF, Arduino, Rust, Matter, MicroPython et les outils gravitant autour de la puce.",
icon: Terminal,
action: "Voir les frameworks",
},
{
href: "/catalogo",
title: "Catalogue de cartes",
desc: "DevKits et modules réels, avec interface USB, capteurs intégrés et lien vers la boutique officielle.",
icon: Cpu,
action: "Voir les cartes",
},
];
const TOOLS_DE = [
{
href: "/seletor",
title: "Intelligente Auswahl",
desc: "Beantworten Sie acht Fragen zu Ihrem Projekt und erhalten Sie passende Chip-Empfehlungen mit technischer Begründung.",
icon: SlidersHorizontal,
action: "Meinen Chip finden",
},
{
href: "/comparacao",
title: "Serienvergleich",
desc: "Vergleichen Sie bis zu vier Modelle nebeneinander: Kerne, Funk, Speicher, Peripherie und Sicherheit.",
icon: Scale,
action: "Jetzt vergleichen",
},
{
href: "/diagnostico",
title: "Fehlerdiagnose",
desc: "Ursachen und Lösungen für Brownout, Bootloops, Guru Meditation, Watchdog und Flash-Fehler.",
icon: AlertTriangle,
action: "Diagnose öffnen",
},
{
href: "/componentes",
title: "Component Registry",
desc: "Treiber, Bibliotheken und BSPs aus der offiziellen Espressif-Registry, mit fertigem Manifest für Ihr Projekt.",
icon: Box,
action: "Komponenten erkunden",
},
{
href: "/frameworks",
title: "Frameworks & SDKs",
desc: "ESP-IDF, Arduino, Rust, Matter, MicroPython und die Werkzeuge rund um den Chip.",
icon: Terminal,
action: "Frameworks ansehen",
},
{
href: "/catalogo",
title: "Board-Katalog",
desc: "Reale DevKits und Module, mit USB-Schnittstelle, integrierten Sensoren und Link zum offiziellen Shop.",
icon: Cpu,
action: "Boards ansehen",
},
];
const ERRORS_PT = [
{
code: "Brownout detector was triggered",
@@ -194,7 +288,7 @@ const ERRORS_EN = [
fix: "Inspect backtrace with addr2line and properly size FreeRTOS task stacks.",
},
{
code: "ADC2 indisponível com Wi-Fi",
code: "ADC2 unavailable with Wi-Fi",
cause: "Internal radio controller reserves ADC2 while active.",
fix: "Use ADC1 pins for analog sensors operating alongside Wi-Fi.",
},
@@ -228,17 +322,65 @@ const ERRORS_ES = [
},
];
const ERRORS_FR = [
{
code: "Brownout detector was triggered",
cause: "Baisse de tension lors du démarrage de la radio.",
fix: "Condensateur de 10 à 100 µF au plus près de la puce et alimentation 5 V avec courant suffisant.",
},
{
code: "Guru Meditation Error",
cause: "Pointeur invalide, dépassement de pile ou mauvaise utilisation des interruptions.",
fix: "Analysez le backtrace avec addr2line et dimensionnez la pile de la tâche sous FreeRTOS.",
},
{
code: "ADC2 indisponible avec le Wi-Fi",
cause: "Le contrôleur radio réserve l'ADC2 tant qu'il est actif.",
fix: "Utilisez les broches de l'ADC1 pour les capteurs analogiques fonctionnant conjointement avec le Wi-Fi.",
},
{
code: "Flash Read err / bootloader",
cause: "Tension ou mode de flash incorrect, ou broche de strapping forcée au démarrage.",
fix: "Vérifiez la ligne 3,3 V, les pull-ups de démarrage et la configuration de flash dans esptool.",
},
];
const ERRORS_DE = [
{
code: "Brownout detector was triggered",
cause: "Spannungseinbruch beim Starten der Funkeinheit.",
fix: "Kondensator mit 10–100 µF nah am Chip und 5-V-Netzteil mit ausreichender Stromstärke.",
},
{
code: "Guru Meditation Error",
cause: "Ungültiger Zeiger, Stack-Überlauf oder fehlerhafte Interrupt-Nutzung.",
fix: "Backtrace mit addr2line analysieren und Stack-Größe der FreeRTOS-Task anpassen.",
},
{
code: "ADC2 nicht verfügbar bei aktivem Wi-Fi",
cause: "Der Funk-Controller reserviert ADC2, solange er aktiv ist.",
fix: "Nutzen Sie ADC1-Pins für analoge Sensoren, die gleichzeitig mit Wi-Fi betrieben werden.",
},
{
code: "Flash Read err / bootloader",
cause: "Falsche Flash-Spannung/-Modus oder beim Booten falsch beschalteter Strapping-Pin.",
fix: "3,3-V-Schiene, Boot-Pull-ups und Flash-Konfiguration in esptool überprüfen.",
},
];
export default async function Home({ params }) {
const { locale } = await params;
const isPt = locale === "pt";
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
const getLinkHref = (href) => getLocalizedHref(`/${locale}${href}`, locale);
const seriesData = isPt ? seriesDataPt : isEs ? seriesDataEs : seriesDataEn;
const frameworksData = isPt ? frameworksDataPt : isEs ? frameworksDataEs : frameworksDataEn;
const tools = isPt ? TOOLS_PT : isEs ? TOOLS_ES : TOOLS_EN;
const errors = isPt ? ERRORS_PT : isEs ? ERRORS_ES : ERRORS_EN;
const seriesData = isPt ? seriesDataPt : isEs ? seriesDataEs : isFr ? seriesDataFr : isDe ? seriesDataDe : seriesDataEn;
const frameworksData = isPt ? frameworksDataPt : isEs ? frameworksDataEs : isFr ? frameworksDataFr : isDe ? frameworksDataDe : frameworksDataEn;
const tools = isPt ? TOOLS_PT : isEs ? TOOLS_ES : isFr ? TOOLS_FR : isDe ? TOOLS_DE : TOOLS_EN;
const errors = isPt ? ERRORS_PT : isEs ? ERRORS_ES : isFr ? ERRORS_FR : isDe ? ERRORS_DE : ERRORS_EN;
const seriesCount = Object.keys(seriesData).length;
const frameworkCount = Object.keys(frameworksData).length;
@@ -253,7 +395,7 @@ export default async function Home({ params }) {
<div className="mx-auto max-w-4xl text-center">
<span className="chip chip-accent">
<Cpu className="h-3.5 w-3.5" aria-hidden="true" />
{isPt ? "Documentação aberta do ESP32" : isEs ? "Documentación abierta de ESP32" : "Open ESP32 documentation"}
{isPt ? "Documentação aberta do ESP32" : isEs ? "Documentación abierta de ESP32" : isFr ? "Documentation ouverte de l'ESP32" : isDe ? "Offene ESP32-Dokumentation" : "Open ESP32 documentation"}
</span>
<h1 className="display mt-6 text-[clamp(2.9rem,7.4vw,5.4rem)]">
{isPt ? (
@@ -266,6 +408,16 @@ export default async function Home({ params }) {
El ESP32,
<br className="sm:hidden" /> sin ruido.
</>
) : isFr ? (
<>
L'ESP32,
<br className="sm:hidden" /> sans bruit.
</>
) : isDe ? (
<>
Der ESP32,
<br className="sm:hidden" /> ohne Umwege.
</>
) : (
<>
The ESP32,
@@ -278,19 +430,27 @@ export default async function Home({ params }) {
? "Especificações, pinagem, comparações e diagnóstico em uma leitura só. Menos tradução de datasheet, mais tempo com o protótipo na bancada."
: isEs
? "Especificaciones, patillaje, comparaciones y diagnóstico en una sola lectura. Menos traducción de hojas de datos, más tiempo con el prototipo en el banco de trabajo."
: isFr
? "Spécifications, brochage, comparaisons et diagnostics en une seule lecture. Moins de traduction de fiches techniques, plus de temps à l'établi."
: isDe
? "Spezifikationen, Pinbelegung, Vergleiche und Diagnose auf einen Blick. Weniger Datenblatt-Übersetzung, mehr Zeit am Prüfplatz."
: "Specifications, pinouts, comparisons and diagnostics in a single read. Less datasheet translation, more workbench time."}
</p>
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
<Link href={getLinkHref("/seletor")} className="btn btn-primary w-full sm:w-auto">
<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
{isPt ? "Escolher meu chip" : isEs ? "Elegir mi chip" : "Choose my chip"}
{isPt ? "Escolher meu chip" : isEs ? "Elegir mi chip" : isFr ? "Choisir ma puce" : isDe ? "Meinen Chip wählen" : "Choose my chip"}
</Link>
<Link href={getLinkHref("/series")} className="btn btn-ghost w-full sm:w-auto">
{isPt ? (
<>Explorar as {seriesCount} séries</>
) : isEs ? (
<>Explorar las {seriesCount} series</>
) : isFr ? (
<>Explorer les {seriesCount} séries</>
) : isDe ? (
<>Die {seriesCount} Serien erkunden</>
) : (
<>Explore the {seriesCount} series</>
)}
@@ -299,7 +459,7 @@ export default async function Home({ params }) {
</div>
<p className="mt-7 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-muted">
<span><strong className="font-semibold text-ink">{seriesCount}</strong> {isPt ? "séries" : isEs ? "series" : "series"}</span>
<span><strong className="font-semibold text-ink">{seriesCount}</strong> {isPt ? "séries" : isEs ? "series" : isFr ? "séries" : isDe ? "Serien" : "series"}</span>
<span aria-hidden="true" className="text-line-strong">·</span>
<span><strong className="font-semibold text-ink">{frameworkCount}</strong> frameworks</span>
{isPt ? (
@@ -314,6 +474,16 @@ export default async function Home({ params }) {
<span aria-hidden="true" className="text-line-strong">·</span>
<span>100% en español</span>
</>
) : isFr ? (
<>
<span aria-hidden="true" className="text-line-strong">·</span>
<span>100 % en français</span>
</>
) : isDe ? (
<>
<span aria-hidden="true" className="text-line-strong">·</span>
<span>100 % auf Deutsch</span>
</>
) : (
<>
<span aria-hidden="true" className="text-line-strong">·</span>
@@ -326,13 +496,13 @@ export default async function Home({ params }) {
<div className="panel mt-12 overflow-hidden sm:mt-16">
<div className="flex flex-wrap items-center justify-between gap-3 px-5 py-4 sm:px-7">
<div>
<h2 className="text-sm font-semibold text-ink">{isPt ? "Séries em destaque" : isEs ? "Series destacadas" : "Featured series"}</h2>
<h2 className="text-sm font-semibold text-ink">{isPt ? "Séries em destaque" : isEs ? "Series destacadas" : isFr ? "Séries en vedette" : isDe ? "Vorgestellte Serien" : "Featured series"}</h2>
<p className="mt-0.5 text-xs text-muted">
{isPt ? "O essencial de cada família, antes de abrir o datasheet." : isEs ? "Lo esencial de cada familia, antes de abrir la hoja de datos." : "The essentials of each family before opening the datasheet."}
{isPt ? "O essencial de cada família, antes de abrir o datasheet." : isEs ? "Lo esencial de cada familia, antes de abrir la hoja de datos." : isFr ? "L'essentiel de chaque famille, avant d'ouvrir la fiche technique." : isDe ? "Das Wesentliche jeder Familie, bevor Sie das Datenblatt öffnen." : "The essentials of each family before opening the datasheet."}
</p>
</div>
<Link href={getLinkHref("/series")} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent transition-colors hover:text-accent-strong">
{isPt ? "Índice completo" : isEs ? "Índice completo" : "Full index"}
{isPt ? "Índice completo" : isEs ? "Índice completo" : isFr ? "Index complet" : isDe ? "Vollständiger Index" : "Full index"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
@@ -357,7 +527,7 @@ export default async function Home({ params }) {
<div className="mt-5 flex items-center justify-between gap-3 border-t border-line pt-3.5">
<span className="truncate font-mono text-[0.6875rem] text-ink-soft">{serie.frequencia}</span>
<span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-accent">
{isPt ? "Ficha" : isEs ? "Ficha" : "Spec sheet"}
{isPt ? "Ficha" : isEs ? "Ficha" : isFr ? "Fiche" : isDe ? "Datenblatt" : "Spec sheet"}
<ArrowUpRight className="h-3.5 w-3.5 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" aria-hidden="true" />
</span>
</div>
@@ -438,15 +608,19 @@ export default async function Home({ params }) {
<section className="shell section" aria-labelledby="ferramentas-titulo">
<div className="mx-auto max-w-2xl text-center">
<p className="eyebrow">{isPt ? "Ferramentas" : isEs ? "Herramientas" : "Tools"}</p>
<p className="eyebrow">{isPt ? "Ferramentas" : isEs ? "Herramientas" : isFr ? "Outils" : isDe ? "Werkzeuge" : "Tools"}</p>
<h2 id="ferramentas-titulo" className="display mt-4 text-[clamp(2rem,4.8vw,3.4rem)]">
{isPt ? "Comece pelo problema." : isEs ? "Empiece por el problema." : "Start with the problem."}
{isPt ? "Comece pelo problema." : isEs ? "Empiece por el problema." : isFr ? "Commencez par le problème." : isDe ? "Beginnen Sie beim Problem." : "Start with the problem."}
</h2>
<p className="lede mt-4">
{isPt
? "Cada ferramenta resolve uma etapa concreta do projeto, sem cadastro e sem rodeio."
: isEs
? "Cada herramienta resuelve una fase concreta del proyecto, sin registros ni rodeos."
: isFr
? "Chaque outil répond à une étape concrète du projet, sans inscription ni détour."
: isDe
? "Jedes Werkzeug löst einen konkreten Projektschritt – ohne Registrierung und ohne Umwege."
: "Each tool addresses a concrete development phase, with no sign-ups and zero fluff."}
</p>
</div>
@@ -474,20 +648,24 @@ export default async function Home({ params }) {
<section className="shell section pt-0" aria-labelledby="diagnostico-titulo">
<div className="grid items-start gap-10 lg:grid-cols-[0.78fr_1.22fr] lg:gap-16">
<div className="lg:sticky lg:top-28">
<p className="eyebrow">{isPt ? "Diagnóstico" : isEs ? "Diagnóstico" : "Diagnostics"}</p>
<p className="eyebrow">{isPt ? "Diagnóstico" : isEs ? "Diagnóstico" : isFr ? "Diagnostic" : isDe ? "Diagnose" : "Diagnostics"}</p>
<h2 id="diagnostico-titulo" className="display mt-4 text-[clamp(2rem,4.8vw,3.4rem)]">
{isPt ? "O primeiro boot não precisa virar noite." : isEs ? "El primer arranque no tiene por qué desvelarlo." : "First boot doesn't have to take all night."}
{isPt ? "O primeiro boot não precisa virar noite." : isEs ? "El primer arranque no tiene por qué desvelarlo." : isFr ? "Le premier démarrage n'a pas à vous gâcher la nuit." : isDe ? "Der erste Boot muss nicht die Nacht kosten." : "First boot doesn't have to take all night."}
</h2>
<p className="lede mt-4">
{isPt
? "Os erros mais comuns têm causa conhecida. O guia parte da mensagem no terminal e chega ao ajuste de hardware ou firmware."
: isEs
? "Los errores más comunes tienen una causa conocida. Esta guía parte del mensaje en el terminal y llega al ajuste de hardware o firmware."
: isFr
? "Les erreurs les plus courantes ont une cause connue. Ce guide part du message dans le terminal pour arriver au réglage matériel ou logiciel."
: isDe
? "Die häufigsten Fehler haben bekannte Ursachen. Dieser Leitfaden geht von der Terminalmeldung aus und führt zur passenden Hardware- oder Firmware-Anpassung."
: "Common errors have known causes. This guide starts with the serial terminal log and leads to the hardware or firmware adjustment."}
</p>
<Link href={getLinkHref("/diagnostico")} className="btn btn-accent mt-7">
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
{isPt ? "Abrir os 30+ diagnósticos" : isEs ? "Abrir los 30+ diagnósticos" : "Open the 30+ diagnostics"}
{isPt ? "Abrir os 30+ diagnósticos" : isEs ? "Abrir los 30+ diagnósticos" : isFr ? "Ouvrir les 30+ diagnostics" : isDe ? "Die 30+ Diagnosen öffnen" : "Open the 30+ diagnostics"}
</Link>
</div>
@@ -497,7 +675,7 @@ export default async function Home({ params }) {
<Terminal className="h-4 w-4" aria-hidden="true" />
boot.log
</span>
<span className="text-xs text-[#a6afbd]">{isPt ? "4 exemplos de 30+" : isEs ? "4 ejemplos de 30+" : "4 examples of 30+"}</span>
<span className="text-xs text-[#a6afbd]">{isPt ? "4 exemplos de 30+" : isEs ? "4 ejemplos de 30+" : isFr ? "4 exemples sur 30+" : isDe ? "4 Beispiele von 30+" : "4 examples of 30+"}</span>
</div>
<div className="divide-y divide-white/10">
{errors.map((item) => (
@@ -514,24 +692,28 @@ export default async function Home({ params }) {
<section className="shell pb-20 pt-4 md:pb-28">
<div className="mx-auto max-w-3xl text-center">
<p className="eyebrow">{isPt ? "Curadoria independente" : isEs ? "Curaduría independiente" : "Independent curation"}</p>
<p className="eyebrow">{isPt ? "Curadoria independente" : isEs ? "Curaduría independiente" : isFr ? "Sélection indépendante" : isDe ? "Unabhängige Kuration" : "Independent curation"}</p>
<h2 className="display mt-4 text-[clamp(2rem,4.5vw,3.2rem)]">
{isPt ? "Feito para consultar no meio do projeto." : isEs ? "Diseñado para consultar en mitad del proyecto." : "Built for quick lookup mid-project."}
{isPt ? "Feito para consultar no meio do projeto." : isEs ? "Diseñado para consultar en mitad del proyecto." : isFr ? "Conçu pour être consulté en plein projet." : isDe ? "Gemacht für das Nachschlagen mitten im Projekt." : "Built for quick lookup mid-project."}
</h2>
<p className="lede mx-auto mt-4 max-w-2xl">
{isPt
? "O ESPDocs organiza dados públicos da Espressif e aponta sempre para a fonte oficial. Para decisões críticas, o datasheet e o Technical Reference Manual continuam sendo a palavra final."
: isEs
? "ESPDocs organiza datos públicos de Espressif y apunta siempre a la fuente oficial. Para decisiones críticas, la hoja de datos y el Technical Reference Manual continúan teniendo la última palabra."
: isFr
? "ESPDocs organise les données publiques d'Espressif et renvoie systématiquement vers la source officielle. Pour les décisions critiques, la fiche technique et le Technical Reference Manual restent la référence définitive."
: isDe
? "ESPDocs strukturiert öffentliche Espressif-Daten und verweist stets auf die offizielle Quelle. Für kritische Entscheidungen bleiben das Datenblatt und das Technical Reference Manual maßgeblich."
: "ESPDocs organizes public Espressif data and points directly to official sources. For critical engineering decisions, the datasheet and Technical Reference Manual remain the definitive authority."}
</p>
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
<Link href={getLinkHref("/glossario")} className="btn btn-ghost w-full sm:w-auto">
<BookOpen className="h-4 w-4" aria-hidden="true" />
{isPt ? "Glossário" : isEs ? "Glosario" : "Glossary"}
{isPt ? "Glossário" : isEs ? "Glosario" : isFr ? "Glossaire" : isDe ? "Glossar" : "Glossary"}
</Link>
<Link href={getLinkHref("/sobre")} className="btn btn-primary w-full sm:w-auto">
{isPt ? "Sobre o projeto" : isEs ? "Acerca del proyecto" : "About the project"}
{isPt ? "Sobre o projeto" : isEs ? "Acerca del proyecto" : isFr ? "À propos du projet" : isDe ? "Über das Projekt" : "About the project"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
app/[locale]/seletor/layout.jsx
+109 -9
View File
@@ -4,16 +4,34 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEs ? "Qué ESP32 elegir" : isEn ? "Which ESP32 to Choose" : "Qual ESP32 escolher",
descricao: isEs
titulo: isDe
? "Welchen ESP32 wählen"
: isFr
? "Quel ESP32 choisir"
: isEs
? "Qué ESP32 elegir"
: isEn
? "Which ESP32 to Choose"
: "Qual ESP32 escolher",
descricao: isDe
? "Beantworten Sie einfache Fragen zu Konnektivität (Wi-Fi 6, 5 GHz, Matter), Energie, Peripherie und Sicherheit oder nutzen Sie den parametrischen Filter, um den perfekten ESP32 zu finden."
: isFr
? "Répondez à des questions simples sur la connectivité (Wi-Fi 6, 5 GHz, Matter), l'énergie, les périphériques et la sécurité ou utilisez le filtre paramétrique pour trouver l'ESP32 parfait."
: isEs
? "Responda a preguntas sencillas sobre conectividad (Wi-Fi 6, 5GHz, Matter), energía, periféricos y seguridad o use el filtro paramétrico para encontrar el ESP32 perfecto."
: isEn
? "Answer simple questions about connectivity (Wi-Fi 6, 5GHz, Matter), power, peripherals, and security or use the parametric filter to find the perfect ESP32."
: "Responda a perguntas simples sobre conectividade (Wi-Fi 6, 5GHz, Matter), energia, periféricos e segurança ou use o filtro paramétrico para encontrar o ESP32 perfeito.",
caminho: "/seletor",
locale,
keywords: isEs
keywords: isDe
? ["welchen ESP32 wählen", "welchen ESP32 verwenden", "Mikrocontroller auswählen", "ESP32 für mein Projekt", "ESP32 vergleichen"]
: isFr
? ["quel ESP32 choisir", "quel ESP32 utiliser", "choisir microcontrôleur", "ESP32 pour mon projet", "comparer ESP32"]
: isEs
? ["qué ESP32 elegir", "cuál ESP32 usar", "elegir microcontrolador", "ESP32 para mi proyecto", "comparar ESP32"]
: isEn
? ["which ESP32 to choose", "which ESP32 to use", "choose microcontroller", "ESP32 for my project", "compare ESP32"]
@@ -78,11 +96,51 @@ const faqsEs = [
},
];
const faqsFr = [
{
pergunta: "Quel ESP32 choisir pour débuter ?",
resposta: "Pour débuter dans le monde Maker et l'IoT, l'ESP32 classique (NodeMCU/DevKitC) ou l'ESP32-C3 sont les meilleurs choix grâce au vaste support de bibliothèques, aux exemples prêts à l'emploi dans l'IDE Arduino et à une documentation abondante.",
},
{
pergunta: "Quel ESP32 prend en charge le Wi-Fi 6, le Bluetooth 6 et Thread/Zigbee/Matter ?",
resposta: "L'ESP32-C6 et l'ESP32-C5 sont les séries phares pour les réseaux modernes. L'ESP32-C6 offre le Wi-Fi 6 (2,4 GHz) et une radio 802.15.4 (Zigbee 3.0 / Thread / Matter). L'ESP32-C5 est le premier à offrir la prise en charge du Wi-Fi 6 bi-bande fonctionnant simultanément en 2,4 GHz et 5 GHz.",
},
{
pergunta: "Quel est l'ESP32 le plus puissant pour l'Intelligence Artificielle (TinyML) et les écrans ?",
resposta: "L'ESP32-P4 (dual-core RISC-V à 400 MHz avec extensions vectorielles IA, interfaces MIPI-CSI/DSI pour caméras/écrans et jusqu'à 64 Mo de PSRAM) et l'ESP32-S3 (dual-core Xtensa à 240 MHz avec accélérateurs vectoriels pour réseaux neuronaux et écrans LCD RGB) sont les plus rapides pour l'IA en périphérie et les interfaces graphiques riches.",
},
{
pergunta: "Quel ESP32 consomme le moins d'énergie pour les projets sur batterie ?",
resposta: "Les microcontrôleurs à architecture RISC-V compacte avec coprocesseur ULP, comme l'ESP32-C2, l'ESP32-C3 et l'ESP32-H2 (dédié au 802.15.4 sans radio Wi-Fi), offrent des courants de deep sleep extrêmement faibles (de l'ordre de 5 µA à 10 µA).",
},
];
const faqsDe = [
{
pergunta: "Welchen ESP32 sollten Einsteiger wählen?",
resposta: "Für Einsteiger in die Maker- und IoT-Welt sind der klassische ESP32 (NodeMCU/DevKitC) oder der ESP32-C3 die beste Wahl, dank breiter Bibliotheksunterstützung, zahlreicher fertiger Beispiele in der Arduino IDE und umfassender Dokumentation.",
},
{
pergunta: "Welcher ESP32 unterstützt Wi-Fi 6, Bluetooth 6 und Thread/Zigbee/Matter?",
resposta: "Der ESP32-C6 und der ESP32-C5 sind die führenden Serien für moderne Netzwerke. Der ESP32-C6 bietet Wi-Fi 6 (2,4 GHz) und ein 802.15.4-Funkmodul (Zigbee 3.0 / Thread / Matter). Der ESP32-C5 bietet als erster Dual-Band Wi-Fi 6 mit simultanem Betrieb auf 2,4 GHz und 5 GHz.",
},
{
pergunta: "Welcher ESP32 ist am leistungsfähigsten für Künstliche Intelligenz (TinyML) und Displays?",
resposta: "Der ESP32-P4 (Dual-Core RISC-V mit 400 MHz, KI-Vektorerweiterungen, MIPI-CSI/DSI-Schnittstellen für Kameras/Displays und bis zu 64 MB PSRAM) und der ESP32-S3 (Dual-Core Xtensa mit 240 MHz, Vektorbeschleunigern für neuronale Netze und RGB-LCD-Unterstützung) sind am schnellsten für Edge-KI und anspruchsvolle grafische Benutzeroberflächen.",
},
{
pergunta: "Welcher ESP32 verbraucht am wenigsten Energie für batteriebetriebene Projekte?",
resposta: "Kompakte RISC-V-Mikrocontroller mit ULP-Coprozessor wie der ESP32-C2, ESP32-C3 und ESP32-H2 (dediziert für 802.15.4 ohne Wi-Fi-Funk) bieten extrem niedrige Deep-Sleep-Ströme im Bereich von 5 µA bis 10 µA.",
},
];
export default async function Layout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const faqs = isEs ? faqsEs : isEn ? faqsEn : faqsPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const faqs = isDe ? faqsDe : isFr ? faqsFr : isEs ? faqsEs : isEn ? faqsEn : faqsPt;
return (
<>
@@ -91,13 +149,33 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.aplicacaoWeb({
nome: isEs ? "Selector Inteligente de ESP32" : isEn ? "Intelligent ESP32 Selector" : "Seletor Inteligente de ESP32",
descricao: isEs
nome: isDe
? "Intelligente ESP32-Auswahl"
: isFr
? "Sélecteur intelligent d'ESP32"
: isEs
? "Selector Inteligente de ESP32"
: isEn
? "Intelligent ESP32 Selector"
: "Seletor Inteligente de ESP32",
descricao: isDe
? "Interaktives Werkzeug zur Analyse von Konnektivität, Stromverbrauch, Peripherie und Sicherheit zur Ermittlung der idealen ESP32-Serie."
: isFr
? "Outil interactif analysant la connectivité, la consommation, les périphériques et la sécurité pour recommander la série idéale d'ESP32."
: isEs
? "Herramienta interactiva que analiza conectividad, consumo, periféricos y seguridad para recomendar la serie ideal de ESP32."
: isEn
? "Interactive tool analyzing connectivity, power consumption, peripherals, and security to recommend the ideal ESP32 series."
: "Ferramenta interativa que analisa conectividade, consumo, periféricos e segurança para indicar a série ideal de ESP32.",
caminho: isEs ? "/es/selector" : isEn ? "/en/selector" : "/seletor",
caminho: isDe
? "/de/auswahl"
: isFr
? "/fr/selecteur"
: isEs
? "/es/selector"
: isEn
? "/en/selector"
: "/seletor",
locale,
})
),
@@ -108,8 +186,30 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: isEs ? "Selector de ESP32" : isEn ? "ESP32 Selector" : "Seletor de ESP32", caminho: isEs ? "/es/selector" : isEn ? "/en/selector" : "/seletor" },
{
nome: isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isEn ? "Home" : "Início",
caminho: isDe ? "/de" : isFr ? "/fr" : isEs ? "/es" : isEn ? "/en" : "/",
},
{
nome: isDe
? "ESP32-Auswahl"
: isFr
? "Sélecteur d'ESP32"
: isEs
? "Selector de ESP32"
: isEn
? "ESP32 Selector"
: "Seletor de ESP32",
caminho: isDe
? "/de/auswahl"
: isFr
? "/fr/selecteur"
: isEs
? "/es/selector"
: isEn
? "/en/selector"
: "/seletor",
},
])
),
}}
app/[locale]/seletor/page.jsx
+763 -151
View File
File diff suppressed because it is too large. Load diff
app/[locale]/series/[key]/page.jsx
+331 -67
View File
@@ -8,6 +8,8 @@ import { notFound } from "next/navigation";
import seriesDataPt from "@/public/series.json";
import seriesDataEn from "@/data/en/series.json";
import seriesDataEs from "@/data/es/series.json";
import seriesDataFr from "@/data/fr/series.json";
import seriesDataDe from "@/data/de/series.json";
import ConnectionsDiagram from "@/components/ConnectionsDiagram";
import SeriesTabMenu from "@/components/SeriesTabMenu";
import PinRestrictions from "@/components/PinRestrictions";
@@ -37,8 +39,10 @@ export default async function SerieDetail({ params }) {
const { locale, key } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const currentLocale = isDe ? "de" : isFr ? "fr" : isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isDe ? seriesDataDe : isFr ? seriesDataFr : isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const serie = seriesData[key];
if (!serie) {
@@ -47,7 +51,11 @@ export default async function SerieDetail({ params }) {
let conexoes = [];
try {
conexoes = isEs
conexoes = isDe
? require(`@/data/de/conexoes/${key}.json`)
: isFr
? require(`@/data/fr/conexoes/${key}.json`)
: isEs
? require(`@/data/es/conexoes/${key}.json`)
: isEn
? require(`@/data/en/conexoes/${key}.json`)
@@ -61,10 +69,26 @@ export default async function SerieDetail({ params }) {
const previousKey = currentIndex > 0 ? seriesKeys[currentIndex - 1] : null;
const nextKey = currentIndex < seriesKeys.length - 1 ? seriesKeys[currentIndex + 1] : null;
const nao = isEs || isEn ? "No" : "Não";
const naoInformado = isEs ? "No informado" : isEn ? "Not informed" : "Não informado";
const nao = isDe ? "Nein" : isFr ? "Non" : isEs || isEn ? "No" : "Não";
const naoInformado = isDe ? "Nicht angegeben" : isFr ? "Non communiqué" : isEs ? "No informado" : isEn ? "Not informed" : "Não informado";
const processadorSpecs = isEs
const processadorSpecs = isDe
? [
{ label: "Architektur", value: serie.arquitetura },
{ label: "Kerne", value: serie.nucleos },
{ label: "Taktfrequenz", value: serie.frequencia },
{ label: "ULP-Coprozessor", value: serie.coprocessador_ulp || nao },
{ label: "KI-Beschleuniger", value: serie.aceleradores_ia || nao },
]
: isFr
? [
{ label: "Architecture", value: serie.arquitetura },
{ label: "Cœurs", value: serie.nucleos },
{ label: "Fréquence", value: serie.frequencia },
{ label: "Coprocesseur ULP", value: serie.coprocessador_ulp || nao },
{ label: "Accélérateurs IA", value: serie.aceleradores_ia || nao },
]
: isEs
? [
{ label: "Arquitectura", value: serie.arquitetura },
{ label: "Núcleos", value: serie.nucleos },
@@ -89,7 +113,37 @@ export default async function SerieDetail({ params }) {
];
const seg = serie.seguranca || {};
const segurancaSpecs = isEs
const segurancaSpecs = isDe
? [
{ label: "AES", value: seg.aes || nao },
{ label: "SHA", value: seg.sha || nao },
{ label: "RSA / MPI", value: seg.rsa || nao },
{ label: "ECC (elliptische Kurven)", value: seg.ecc || nao },
{ label: "Hardware-ECDSA", value: seg.ecdsa || nao },
{ label: "HMAC", value: seg.hmac || nao },
{ label: "Digitale Signatur (DS)", value: seg.assinatura_digital || nao },
{ label: "Key Manager", value: seg.key_manager || nao },
{ label: "Zufallszahlengenerator (TRNG)", value: seg.rng || nao },
{ label: "Flash-Verschlüsselung", value: seg.criptografia_flash || nao },
{ label: "Secure Boot", value: seg.secure_boot || nao },
{ label: "DPA-Schutz", value: seg.protecao_dpa || nao },
]
: isFr
? [
{ label: "AES", value: seg.aes || nao },
{ label: "SHA", value: seg.sha || nao },
{ label: "RSA / MPI", value: seg.rsa || nao },
{ label: "ECC (courbes elliptiques)", value: seg.ecc || nao },
{ label: "ECDSA matériel", value: seg.ecdsa || nao },
{ label: "HMAC", value: seg.hmac || nao },
{ label: "Signature numérique (DS)", value: seg.assinatura_digital || nao },
{ label: "Key Manager", value: seg.key_manager || nao },
{ label: "Générateur aléatoire (TRNG)", value: seg.rng || nao },
{ label: "Chiffrement Flash", value: seg.criptografia_flash || nao },
{ label: "Secure Boot", value: seg.secure_boot || nao },
{ label: "Protection DPA", value: seg.protecao_dpa || nao },
]
: isEs
? [
{ label: "AES", value: seg.aes || nao },
{ label: "SHA", value: seg.sha || nao },
@@ -134,7 +188,23 @@ export default async function SerieDetail({ params }) {
{ label: "Proteção contra DPA", value: seg.protecao_dpa || "Não" },
];
const ferramentasSpecs = isEs
const ferramentasSpecs = isDe
? [
{ label: "Minimales ESP-IDF", value: serie.esp_idf_minimo || naoInformado },
{ label: "Arduino-Core", value: serie.arduino_core || naoInformado },
{ label: "Debugging", value: serie.depuracao || naoInformado },
{ label: "Gehäuse", value: serie.encapsulamento || naoInformado },
{ label: "Verfügbare Module", value: serie.modulos || naoInformado },
]
: isFr
? [
{ label: "ESP-IDF minimal", value: serie.esp_idf_minimo || naoInformado },
{ label: "Core Arduino", value: serie.arduino_core || naoInformado },
{ label: "Débogage", value: serie.depuracao || naoInformado },
{ label: "Boîtier", value: serie.encapsulamento || naoInformado },
{ label: "Modules disponibles", value: serie.modulos || naoInformado },
]
: isEs
? [
{ label: "ESP-IDF mínimo", value: serie.esp_idf_minimo || naoInformado },
{ label: "Core Arduino", value: serie.arduino_core || naoInformado },
@@ -158,7 +228,25 @@ export default async function SerieDetail({ params }) {
{ label: "Módulos disponíveis", value: serie.modulos || "Não informado" },
];
const conectividadeSpecs = isEs
const conectividadeSpecs = isDe
? [
{ label: "Wi-Fi", value: serie.wifi || nao },
{ label: "Bluetooth", value: serie.bluetooth || nao },
{ label: "Zigbee/Thread", value: serie.zigbee_thread || nao },
{ label: "Matter", value: serie.matter || nao },
{ label: "Ethernet", value: serie.ethernet || serie.ethernet_mac || nao },
{ label: "CAN", value: serie.can || nao },
]
: isFr
? [
{ label: "Wi-Fi", value: serie.wifi || nao },
{ label: "Bluetooth", value: serie.bluetooth || nao },
{ label: "Zigbee/Thread", value: serie.zigbee_thread || nao },
{ label: "Matter", value: serie.matter || nao },
{ label: "Ethernet", value: serie.ethernet || serie.ethernet_mac || nao },
{ label: "CAN", value: serie.can || nao },
]
: isEs
? [
{ label: "Wi-Fi", value: serie.wifi || nao },
{ label: "Bluetooth", value: serie.bluetooth || nao },
@@ -185,7 +273,23 @@ export default async function SerieDetail({ params }) {
{ label: "CAN", value: serie.can || "Não" },
];
const memoriaSpecs = isEs
const memoriaSpecs = isDe
? [
{ label: "SRAM", value: serie.memoria_sram },
{ label: "RTC-SRAM", value: serie.memoria_sram_rtc },
{ label: "ROM", value: serie.memoria_rom },
{ label: "Externer Flash", value: serie.flash_externa },
{ label: "Externer PSRAM", value: serie.psram_externa || nao },
]
: isFr
? [
{ label: "SRAM", value: serie.memoria_sram },
{ label: "SRAM RTC", value: serie.memoria_sram_rtc },
{ label: "ROM", value: serie.memoria_rom },
{ label: "Flash externe", value: serie.flash_externa },
{ label: "PSRAM externe", value: serie.psram_externa || nao },
]
: isEs
? [
{ label: "SRAM", value: serie.memoria_sram },
{ label: "SRAM RTC", value: serie.memoria_sram_rtc },
@@ -209,7 +313,33 @@ export default async function SerieDetail({ params }) {
{ label: "PSRAM Externa", value: serie.psram_externa || "Não" },
];
const perifericos = isEs
const perifericos = isDe
? [
{ label: "GPIO", value: serie.gpio },
{ label: "ADC", value: serie.adc },
{ label: "DAC", value: serie.dac || nao },
{ label: "Touch", value: serie.touch || nao },
{ label: "UART", value: serie.uart },
{ label: "SPI", value: serie.spi },
{ label: "I2C", value: serie.i2c },
{ label: "I2S", value: serie.i2s },
{ label: "PWM", value: serie.pwm },
{ label: "USB", value: serie.usb || nao },
]
: isFr
? [
{ label: "GPIO", value: serie.gpio },
{ label: "ADC", value: serie.adc },
{ label: "DAC", value: serie.dac || nao },
{ label: "Touch", value: serie.touch || nao },
{ label: "UART", value: serie.uart },
{ label: "SPI", value: serie.spi },
{ label: "I2C", value: serie.i2c },
{ label: "I2S", value: serie.i2s },
{ label: "PWM", value: serie.pwm },
{ label: "USB", value: serie.usb || nao },
]
: isEs
? [
{ label: "GPIO", value: serie.gpio },
{ label: "ADC", value: serie.adc },
@@ -250,12 +380,12 @@ export default async function SerieDetail({ params }) {
const interfacesEspeciais = [];
if (serie.lcd) interfacesEspeciais.push({ label: "LCD", value: serie.lcd });
if (serie.camera) interfacesEspeciais.push({ label: isEs ? "Cámara" : isEn ? "Camera" : "Câmera", value: serie.camera });
if (serie.camera) interfacesEspeciais.push({ label: isDe ? "Kamera" : isFr ? "Caméra" : isEs ? "Cámara" : isEn ? "Camera" : "Câmera", value: serie.camera });
if (serie.mipi_csi) interfacesEspeciais.push({ label: "MIPI CSI", value: serie.mipi_csi });
if (serie.mipi_dsi) interfacesEspeciais.push({ label: "MIPI DSI", value: serie.mipi_dsi });
if (serie.sdio) interfacesEspeciais.push({ label: "SDIO", value: serie.sdio });
if (serie.sensor_hall) interfacesEspeciais.push({ label: isEs ? "Sensor Hall" : isEn ? "Hall Sensor" : "Sensor Hall", value: serie.sensor_hall });
if (serie.sensor_temperatura) interfacesEspeciais.push({ label: isEs ? "Sensor de temperatura" : isEn ? "Temperature Sensor" : "Sensor Temperatura", value: serie.sensor_temperatura });
if (serie.sensor_hall) interfacesEspeciais.push({ label: isDe ? "Hall-Sensor" : isFr ? "Capteur Hall" : isEs ? "Sensor Hall" : isEn ? "Hall Sensor" : "Sensor Hall", value: serie.sensor_hall });
if (serie.sensor_temperatura) interfacesEspeciais.push({ label: isDe ? "Temperatursensor" : isFr ? "Capteur de température" : isEs ? "Sensor de temperatura" : isEn ? "Temperature Sensor" : "Sensor Temperatura", value: serie.sensor_temperatura });
// Consumo de Energia
const consumoEnergia = [];
@@ -302,7 +432,35 @@ export default async function SerieDetail({ params }) {
'deep_sleep': 'Deep Sleep',
'hibernation': 'Hibernación'
};
const modoLabels = isEs ? modoLabelsEs : isEn ? modoLabelsEn : modoLabelsPt;
const modoLabelsFr = {
'active': 'Mode actif',
'active_cpu_240mhz': 'Actif (CPU 240MHz)',
'active_cpu_160mhz': 'Actif (CPU 160MHz)',
'active_wifi_tx': 'Actif (Wi-Fi TX)',
'active_wifi_tx_peak': 'Actif (Wi-Fi TX Pic)',
'active_wifi': 'Actif (Wi-Fi)',
'active_wifi6': 'Actif (Wi-Fi 6)',
'modem_sleep': 'Modem Sleep',
'modem_sleep_cpu_160mhz': 'Modem Sleep (CPU 160MHz)',
'light_sleep': 'Light Sleep',
'deep_sleep': 'Deep Sleep',
'hibernation': 'Hibernation'
};
const modoLabelsDe = {
'active': 'Aktivmodus',
'active_cpu_240mhz': 'Aktiv (CPU 240MHz)',
'active_cpu_160mhz': 'Aktiv (CPU 160MHz)',
'active_wifi_tx': 'Aktiv (Wi-Fi TX)',
'active_wifi_tx_peak': 'Aktiv (Wi-Fi TX Spitze)',
'active_wifi': 'Aktiv (Wi-Fi)',
'active_wifi6': 'Aktiv (Wi-Fi 6)',
'modem_sleep': 'Modem Sleep',
'modem_sleep_cpu_160mhz': 'Modem Sleep (CPU 160MHz)',
'light_sleep': 'Light Sleep',
'deep_sleep': 'Deep Sleep',
'hibernation': 'Ruhezustand'
};
const modoLabels = isDe ? modoLabelsDe : isFr ? modoLabelsFr : isEs ? modoLabelsEs : isEn ? modoLabelsEn : modoLabelsPt;
Object.entries(serie.consumo_energia).forEach(([modo, consumo]) => {
consumoEnergia.push({
@@ -315,17 +473,17 @@ export default async function SerieDetail({ params }) {
const tabs = [
{
id: "devboard",
label: isEs ? "Placa de desarrollo" : isEn ? "Development board" : "Placa de desenvolvimento",
label: isDe ? "Entwicklungsboard" : isFr ? "Carte de développement" : isEs ? "Placa de desarrollo" : isEn ? "Development board" : "Placa de desenvolvimento",
available: serie.placa,
content: (
<div className="card p-5 sm:p-7">
<h2 className="text-lg font-semibold text-ink">
{isEs ? "Kit de desarrollo oficial" : isEn ? "Official development kit" : "Kit de desenvolvimento oficial"}
{isDe ? "Offizielles Development Kit" : isFr ? "Kit de développement officiel" : isEs ? "Kit de desarrollo oficial" : isEn ? "Official development kit" : "Kit de desenvolvimento oficial"}
</h2>
<div className="mt-5 overflow-hidden rounded-xl border border-line bg-surface-2 p-4">
<Image
src={serie.placa}
alt={isEs ? `Placa de desarrollo ${key}` : isEn ? `Development board ${key}` : `Placa de desenvolvimento ${key}`}
alt={isDe ? `Entwicklungsboard ${key}` : isFr ? `Carte de développement ${key}` : isEs ? `Placa de desarrollo ${key}` : isEn ? `Development board ${key}` : `Placa de desenvolvimento ${key}`}
width={1200}
height={800}
className="mx-auto h-auto max-h-[28rem] w-full rounded-lg object-contain"
@@ -333,7 +491,11 @@ export default async function SerieDetail({ params }) {
/>
</div>
<p className="mt-3 text-sm text-muted">
{isEs ? (
{isDe ? (
<>Offizielles Espressif-Board für die Serie {key}.</>
) : isFr ? (
<>Carte officielle d'Espressif pour la série {key}.</>
) : isEs ? (
<>Placa estándar de Espressif para la serie {key}.</>
) : isEn ? (
<>Official Espressif board for the {key} series.</>
@@ -346,7 +508,7 @@ export default async function SerieDetail({ params }) {
},
{
id: "connections",
label: isEs ? "Diagrama de patillaje" : isEn ? "Pinout diagram" : "Diagrama de conexões",
label: isDe ? "Pinbelegungsdiagramm" : isFr ? "Diagramme de brochage" : isEs ? "Diagrama de patillaje" : isEn ? "Pinout diagram" : "Diagrama de conexões",
available: conexoes.length > 0,
content: (
<div className="card p-5 sm:p-7">
@@ -354,10 +516,14 @@ export default async function SerieDetail({ params }) {
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-gold" aria-hidden="true" />
<div>
<p className="font-semibold text-ink">
{isEs ? "Este es el diagrama del chip, no de la placa" : isEn ? "This is the chip diagram, not the development board" : "Este é o diagrama do chip, não da placa"}
{isDe ? "Dies ist das Diagramm des Chips, nicht des Entwicklungsboards" : isFr ? "Ceci est le schéma de la puce, pas de la carte de développement" : isEs ? "Este es el diagrama del chip, no de la placa" : isEn ? "This is the chip diagram, not the development board" : "Este é o diagrama do chip, não da placa"}
</p>
<p className="mt-1">
{isEs ? (
{isDe ? (
`Das Diagramm zeigt die Silizium-Anschlüsse des ${key}. Jedes Entwicklungsboard führt nur einen Teil heraus oder leitet sie anders weiter.`
) : isFr ? (
`Le schéma montre les connexions du silicium du ${key}. Chaque carte de développement n'en expose qu'une partie ou les route différemment.`
) : isEs ? (
`El mapa muestra las conexiones del silicio del ${key}. Cada placa de desarrollo expone solo parte de ellas o las enruta de otra forma.`
) : isEn ? (
`The map shows the silicon connections for the ${key}. Each development board exposes only a subset or routes them differently.`
@@ -378,10 +544,41 @@ export default async function SerieDetail({ params }) {
<div className="callout mt-8">
<p className="flex items-center gap-2 font-semibold text-ink">
<Lightbulb className="h-4 w-4 text-accent" aria-hidden="true" />
{isEs ? "Casi todos los pines son reconfigurables" : isEn ? "Almost every pin is reconfigurable" : "Quase todo pino é reconfigurável"}
{isDe ? "Nahezu jeder Pin ist rekonfigurierbar" : isFr ? "La quasi-totalité des broches est reconfigurable" : isEs ? "Casi todos los pines son reconfigurables" : isEn ? "Almost every pin is reconfigurable" : "Quase todo pino é reconfigurável"}
</p>
<p className="mt-1">
{isEs ? (
{isDe ? (
<>
Die IO-Matrix des {key} ermöglicht das Zuweisen von SPI, I2C, UART, PWM und Kamera-/Displaybussen
zu den meisten digitalen Pins. Für Strapping-Einschränkungen und analoge Pins konsultieren Sie den{" "}
<a
href={`https://docs.espressif.com/projects/esp-idf/en/latest/${String(key).toLowerCase().replace("-", "")}/api-reference/peripherals/gpio.html`}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-accent underline decoration-accent/30 underline-offset-2 hover:decoration-accent"
>
offiziellen GPIO-Leitfaden
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
</a>
.
</>
) : isFr ? (
<>
La matrice d'E/S du {key} permet d'assigner SPI, I2C, UART, PWM et bus caméra/écran
à la majorité des broches numériques. Pour les restrictions de strapping et broches analogiques,
consultez le{" "}
<a
href={`https://docs.espressif.com/projects/esp-idf/en/latest/${String(key).toLowerCase().replace("-", "")}/api-reference/peripherals/gpio.html`}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-accent underline decoration-accent/30 underline-offset-2 hover:decoration-accent"
>
guide officiel GPIO
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
</a>
.
</>
) : isEs ? (
<>
La matriz de E/S del {key} permite mover buses SPI, I2C, UART, PWM y cámara/pantalla
a la mayoría de los pines digitales. Para las restricciones de strapping y pines analógicos,
@@ -437,44 +634,48 @@ export default async function SerieDetail({ params }) {
];
const secoes = [
{ id: "processador", titulo: isEs ? "Procesador" : isEn ? "Processor" : "Processador", icon: Cpu, specs: processadorSpecs },
{ id: "conectividade", titulo: isEs ? "Conectividad" : isEn ? "Connectivity" : "Conectividade", icon: Wifi, specs: conectividadeSpecs },
{ id: "ferramentas", titulo: isEs ? "Herramientas y disponibilidad" : isEn ? "Tools and availability" : "Ferramentas e disponibilidade", icon: Package, specs: ferramentasSpecs },
{ id: "seguranca", titulo: isEs ? "Seguridad" : isEn ? "Security" : "Segurança", icon: ShieldCheck, specs: segurancaSpecs },
{ id: "memoria", titulo: isEs ? "Memoria" : isEn ? "Memory" : "Memória", icon: Database, specs: memoriaSpecs },
{ id: "processador", titulo: isDe ? "Prozessor" : isFr ? "Processeur" : isEs ? "Procesador" : isEn ? "Processor" : "Processador", icon: Cpu, specs: processadorSpecs },
{ id: "conectividade", titulo: isDe ? "Konnektivität" : isFr ? "Connectivité" : isEs ? "Conectividad" : isEn ? "Connectivity" : "Conectividade", icon: Wifi, specs: conectividadeSpecs },
{ id: "ferramentas", titulo: isDe ? "Werkzeuge und Verfügbarkeit" : isFr ? "Outils et disponibilité" : isEs ? "Herramientas y disponibilidad" : isEn ? "Tools and availability" : "Ferramentas e disponibilidade", icon: Package, specs: ferramentasSpecs },
{ id: "seguranca", titulo: isDe ? "Sicherheit" : isFr ? "Sécurité" : isEs ? "Seguridad" : isEn ? "Security" : "Segurança", icon: ShieldCheck, specs: segurancaSpecs },
{ id: "memoria", titulo: isDe ? "Speicher" : isFr ? "Mémoire" : isEs ? "Memoria" : isEn ? "Memory" : "Memória", icon: Database, specs: memoriaSpecs },
...(consumoEnergia.length > 0
? [{
id: "energia",
titulo: isEs ? "Consumo de energía" : isEn ? "Power consumption" : "Consumo de energia",
titulo: isDe ? "Stromverbrauch" : isFr ? "Consommation d'énergie" : isEs ? "Consumo de energía" : isEn ? "Power consumption" : "Consumo de energia",
icon: Battery,
specs: consumoEnergia,
nota: isEs
nota: isDe
? "Typische Werte bei 3,3 V und 25 °C. Der tatsächliche Stromverbrauch hängt vom Funk-Tastgrad und der konfigurierten Taktfrequenz ab."
: isFr
? "Valeurs typiques à 3,3 V et 25 °C. La consommation réelle dépend du cycle de travail de la radio et de la fréquence d'horloge configurée."
: isEs
? "Valores típicos a 3,3 V y 25 °C. El consumo real depende del ciclo de trabajo de la radio y de la frecuencia de reloj configurada."
: isEn
? "Typical values at 3.3 V and 25 °C. Actual power consumption depends on radio duty cycle and configured clock frequency."
: "Valores típicos a 3,3 V e 25 °C. O consumo real depende do ciclo de trabalho do rádio e da frequência de clock configurada.",
}]
: []),
{ id: "perifericos", titulo: isEs ? "Periféricos" : isEn ? "Peripherals" : "Periféricos", icon: Sliders, specs: perifericos },
{ id: "perifericos", titulo: isDe ? "Peripherie" : isFr ? "Périphériques" : isEs ? "Periféricos" : isEn ? "Peripherals" : "Periféricos", icon: Sliders, specs: perifericos },
...(interfacesEspeciais.length > 0
? [{ id: "interfaces", titulo: isEs ? "Interfaces especiales" : isEn ? "Special interfaces" : "Interfaces especiais", icon: Sliders, specs: interfacesEspeciais }]
? [{ id: "interfaces", titulo: isDe ? "Spezielle Schnittstellen" : isFr ? "Interfaces spéciales" : isEs ? "Interfaces especiales" : isEn ? "Special interfaces" : "Interfaces especiais", icon: Sliders, specs: interfacesEspeciais }]
: []),
{
id: "temperatura",
titulo: isEs ? "Límites de temperatura" : isEn ? "Temperature limits" : "Limites de temperatura",
titulo: isDe ? "Temperaturgrenzwerte" : isFr ? "Limites de température" : isEs ? "Límites de temperatura" : isEn ? "Temperature limits" : "Limites de temperatura",
icon: Thermometer,
specs: [
{ label: isEs ? "Operación" : isEn ? "Operating" : "Operação", value: serie.temperatura_operacao },
{ label: isEs ? "Almacenamiento" : isEn ? "Storage" : "Armazenamento", value: serie.temperatura_armazenamento },
{ label: isDe ? "Betrieb" : isFr ? "Fonctionnement" : isEs ? "Operación" : isEn ? "Operating" : "Operação", value: serie.temperatura_operacao },
{ label: isDe ? "Lagerung" : isFr ? "Stockage" : isEs ? "Almacenamiento" : isEn ? "Storage" : "Armazenamento", value: serie.temperatura_armazenamento },
],
},
];
const fatos = [
{ label: isEs ? "Procesador" : isEn ? "Processor" : "Processador", value: String(serie.nucleos).includes("2") ? "Dual-core" : "Single-core", detail: serie.frequencia },
{ label: "SRAM", value: serie.memoria_sram, detail: isEs ? `+ ${serie.memoria_sram_rtc} de SRAM RTC` : isEn ? `+ ${serie.memoria_sram_rtc} RTC SRAM` : `+ ${serie.memoria_sram_rtc} de SRAM RTC` },
{ label: "GPIO", value: serie.gpio, detail: isEs ? "pines programables" : isEn ? "programmable pins" : "pinos programáveis" },
{ label: isEs ? "Arquitectura" : isEn ? "Architecture" : "Arquitetura", value: String(serie.arquitetura).includes("RISC-V") ? "RISC-V" : "Xtensa", detail: serie.arquitetura },
{ label: isDe ? "Prozessor" : isFr ? "Processeur" : isEs ? "Procesador" : isEn ? "Processor" : "Processador", value: String(serie.nucleos).includes("2") ? "Dual-core" : "Single-core", detail: serie.frequencia },
{ label: "SRAM", value: serie.memoria_sram, detail: isDe ? `+ ${serie.memoria_sram_rtc} RTC-SRAM` : isFr ? `+ ${serie.memoria_sram_rtc} de SRAM RTC` : isEs ? `+ ${serie.memoria_sram_rtc} de SRAM RTC` : isEn ? `+ ${serie.memoria_sram_rtc} RTC SRAM` : `+ ${serie.memoria_sram_rtc} de SRAM RTC` },
{ label: "GPIO", value: serie.gpio, detail: isDe ? "programmierbare Pins" : isFr ? "broches programmables" : isEs ? "pines programables" : isEn ? "programmable pins" : "pinos programáveis" },
{ label: isDe ? "Architektur" : isFr ? "Architecture" : isEs ? "Arquitectura" : isEn ? "Architecture" : "Arquitetura", value: String(serie.arquitetura).includes("RISC-V") ? "RISC-V" : "Xtensa", detail: serie.arquitetura },
];
return (
@@ -487,8 +688,8 @@ export default async function SerieDetail({ params }) {
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isEs ? "Series" : isEn ? "Series" : "Séries", caminho: getLocalizedHref("/series", currentLocale) },
{ nome: isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isDe ? "/de" : isFr ? "/fr" : isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isDe ? "ESP32-Serien" : isFr ? "Séries ESP32" : isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32", caminho: getLocalizedHref("/series", currentLocale) },
{ nome: serie.nome_completo, caminho: getLocalizedHref(`/series/${key}`, currentLocale) },
])),
}}
@@ -500,7 +701,9 @@ export default async function SerieDetail({ params }) {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Series" : isEn ? "Series" : "Séries", href: getLocalizedHref("/series", currentLocale) }, { label: key }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isDe ? "Serien" : isFr ? "Séries" : isEs ? "Series" : isEn ? "Series" : "Séries", href: getLocalizedHref("/series", currentLocale) }, { label: key }]}
icon={Cpu}
label={serie.arquitetura}
title={key}
@@ -509,32 +712,32 @@ export default async function SerieDetail({ params }) {
{serie.datasheet ? (
<a href={serie.datasheet} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
<FileText className="h-4 w-4" aria-hidden="true" />
{isEs ? "Datasheet oficial" : isEn ? "Official datasheet" : "Datasheet oficial"}
{isDe ? "Offizielles Datenblatt" : isFr ? "Datasheet officiel" : isEs ? "Datasheet oficial" : isEn ? "Official datasheet" : "Datasheet oficial"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
) : (
<span className="btn btn-ghost cursor-not-allowed opacity-70" aria-disabled="true">
<FileText className="h-4 w-4" aria-hidden="true" />
{isEs ? "Datasheet aún no publicado" : isEn ? "Datasheet not yet published" : "Datasheet ainda não publicado"}
{isDe ? "Datenblatt noch nicht veröffentlicht" : isFr ? "Datasheet pas encore publié" : isEs ? "Datasheet aún no publicado" : isEn ? "Datasheet not yet published" : "Datasheet ainda não publicado"}
</span>
)}
{serie.guia_de_programacao && (
<a href={serie.guia_de_programacao} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
<Code className="h-4 w-4" aria-hidden="true" />
{isEs ? "Guía de programación" : isEn ? "Programming guide" : "Guia de programação"}
{isDe ? "Programmierleitfaden" : isFr ? "Guide de programmation" : isEs ? "Guía de programación" : isEn ? "Programming guide" : "Guia de programação"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
)}
{serie.manual_tecnico && (
<a href={serie.manual_tecnico} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
<BookOpen className="h-4 w-4" aria-hidden="true" />
{isEs ? "Manual de referencia técnica" : isEn ? "Technical reference manual" : "Manual técnico"}
{isDe ? "Technisches Referenzhandbuch" : isFr ? "Manuel technique de référence" : isEs ? "Manual de referencia técnica" : isEn ? "Technical reference manual" : "Manual técnico"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
)}
</PageHero>
<section className="shell mt-10" aria-label={isEs ? "Resumen" : isEn ? "Summary" : "Resumo"}>
<section className="shell mt-10" aria-label={isDe ? "Zusammenfassung" : isFr ? "Résumé" : isEs ? "Resumen" : isEn ? "Summary" : "Resumo"}>
<dl className="grid grid-cols-2 gap-3 lg:grid-cols-4">
{fatos.map((fato) => (
<div key={fato.label} className="tile">
@@ -550,7 +753,7 @@ export default async function SerieDetail({ params }) {
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-gold" aria-hidden="true" />
<div>
<p className="font-semibold text-ink">
{isEs ? "Documentación preliminar" : isEn ? "Preliminary documentation" : "Documentação preliminar"}
{isDe ? "Vorläufige Dokumentation" : isFr ? "Documentation préliminaire" : isEs ? "Documentación preliminar" : isEn ? "Preliminary documentation" : "Documentação preliminar"}
</p>
<p className="mt-1">{serie.status_documentacao}</p>
</div>
@@ -559,13 +762,13 @@ export default async function SerieDetail({ params }) {
</section>
<div className="shell mt-10">
<SeriesTabMenu tabs={tabs} isEn={isEn} isEs={isEs} />
<PinRestrictions conexoes={conexoes} serieKey={key} isEn={isEn} isEs={isEs} />
<SeriesTabMenu tabs={tabs} isEn={isEn} isEs={isEs} isFr={isFr} isDe={isDe} />
<PinRestrictions conexoes={conexoes} serieKey={key} isEn={isEn} isEs={isEs} isFr={isFr} isDe={isDe} />
</div>
<div className="shell mt-12">
<nav
aria-label={isEs ? "Secciones de la ficha" : isEn ? "Datasheet sections" : "Seções da ficha"}
aria-label={isDe ? "Abschnitte des Datenblatts" : isFr ? "Sections de la fiche" : isEs ? "Secciones de la ficha" : isEn ? "Datasheet sections" : "Seções da ficha"}
className="nav-pill no-scrollbar sticky top-20 z-30 flex gap-1 overflow-x-auto rounded-full p-1.5"
>
{secoes.map((secao) => (
@@ -586,7 +789,11 @@ export default async function SerieDetail({ params }) {
<div className="panel flex flex-col items-start justify-between gap-6 p-7 sm:p-10 md:flex-row md:items-center">
<div className="max-w-2xl">
<h2 className="section-title">
{isEs ? (
{isDe ? (
<>Bereit zum Prototyping mit {key}?</>
) : isFr ? (
<>Prêt à prototyper avec {key} ?</>
) : isEs ? (
<>¿Listo para prototipar con {key}?</>
) : isEn ? (
<>Ready to prototype with {key}?</>
@@ -595,7 +802,11 @@ export default async function SerieDetail({ params }) {
)}
</h2>
<p className="mt-3 text-base text-muted">
{isEs
{isDe
? "Entdecken Sie die für diese Serie verfügbaren Entwicklungsboards mit USB, integrierten Sensoren und Links zum offiziellen Shop."
: isFr
? "Explorez les cartes de développement disponibles pour cette série, avec USB, capteurs intégrés et liens vers la boutique officielle."
: isEs
? "Explore las placas de desarrollo disponibles para esta serie, con USB, sensores integrados y enlaces a la tienda oficial."
: isEn
? "Explore development boards available for this series, with USB, onboard sensors, and official store links."
@@ -603,17 +814,17 @@ export default async function SerieDetail({ params }) {
</p>
</div>
<Link href={getLocalizedHref("/catalogo", currentLocale)} className="btn btn-primary shrink-0">
{isEs ? "Ver placas" : isEn ? "View boards" : "Ver placas"}
{isDe ? "Boards ansehen" : isFr ? "Voir les cartes" : isEs ? "Ver placas" : isEn ? "View boards" : "Ver placas"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
<nav aria-label={isEs ? "Otras series" : isEn ? "Other series" : "Outras séries"} className="mt-6 grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-center">
<nav aria-label={isDe ? "Andere Serien" : isFr ? "Autres séries" : isEs ? "Otras series" : isEn ? "Other series" : "Outras séries"} className="mt-6 grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-center">
{previousKey ? (
<Link href={getLocalizedHref(`/series/${previousKey}`, currentLocale)} className="card card-interactive group flex items-center gap-3 px-5 py-4">
<ArrowLeft className="h-4 w-4 text-muted transition-transform group-hover:-translate-x-1" aria-hidden="true" />
<span>
<span className="block text-xs text-muted">{isEs ? "Serie anterior" : isEn ? "Previous series" : "Série anterior"}</span>
<span className="block text-xs text-muted">{isDe ? "Vorherige Serie" : isFr ? "Série précédente" : isEs ? "Serie anterior" : isEn ? "Previous series" : "Série anterior"}</span>
<span className="block font-display text-lg font-semibold text-ink">{previousKey}</span>
</span>
</Link>
@@ -622,12 +833,12 @@ export default async function SerieDetail({ params }) {
)}
<Link href={getLocalizedHref("/comparacao", currentLocale)} className="btn btn-ghost justify-self-center">
<Scale className="h-4 w-4" aria-hidden="true" />
{isEs ? "Comparar series" : isEn ? "Compare series" : "Comparar séries"}
{isDe ? "Serien vergleichen" : isFr ? "Comparer les séries" : isEs ? "Comparar series" : isEn ? "Compare series" : "Comparar séries"}
</Link>
{nextKey ? (
<Link href={getLocalizedHref(`/series/${nextKey}`, currentLocale)} className="card card-interactive group flex items-center justify-end gap-3 px-5 py-4 text-right">
<span>
<span className="block text-xs text-muted">{isEs ? "Siguiente serie" : isEn ? "Next series" : "Próxima série"}</span>
<span className="block text-xs text-muted">{isDe ? "Nächste Serie" : isFr ? "Série suivante" : isEs ? "Siguiente serie" : isEn ? "Next series" : "Próxima série"}</span>
<span className="block font-display text-lg font-semibold text-ink">{nextKey}</span>
</span>
<ArrowRight className="h-4 w-4 text-muted transition-transform group-hover:translate-x-1" aria-hidden="true" />
@@ -673,12 +884,25 @@ export async function generateMetadata({ params }) {
const { locale, key } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const currentLocale = isDe ? "de" : isFr ? "fr" : isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isDe ? seriesDataDe : isFr ? seriesDataFr : isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const serie = seriesData[key];
if (!serie) {
return { title: isEs ? "Serie no encontrada" : isEn ? "Series not found" : "Série não encontrada", robots: { index: false, follow: false } };
return {
title: isDe
? "Serie nicht gefunden"
: isFr
? "Série non trouvée"
: isEs
? "Serie no encontrada"
: isEn
? "Series not found"
: "Série não encontrada",
robots: { index: false, follow: false },
};
}
const radio = [
@@ -687,7 +911,17 @@ export async function generateMetadata({ params }) {
serie.zigbee_thread && !String(serie.zigbee_thread).startsWith("Não") && !String(serie.zigbee_thread).startsWith("No") ? "802.15.4" : null,
].filter(Boolean).join(", ");
const descricao = isEs
const descricao = isDe
? `${serie.nome_completo}: ${serie.arquitetura}, ${serie.frequencia}, ` +
`${serie.memoria_sram} SRAM und ${serie.gpio} GPIOs` +
(radio ? `. Funk: ${radio}` : "") +
`. Vollständige Pinbelegung, Peripherie, Hardwaresicherheit und eingeschränkte Pins auf Deutsch.`
: isFr
? `${serie.nome_completo} : ${serie.arquitetura}, ${serie.frequencia}, ` +
`${serie.memoria_sram} de SRAM et ${serie.gpio} GPIO` +
(radio ? `. Radio : ${radio}` : "") +
`. Brochage complet, périphériques, sécurité matérielle et broches avec restrictions, en français.`
: isEs
? `${serie.nome_completo}: ${serie.arquitetura}, ${serie.frequencia}, ` +
`${serie.memoria_sram} de SRAM y ${serie.gpio} GPIO` +
(radio ? `. Radio: ${radio}` : "") +
@@ -703,10 +937,22 @@ export async function generateMetadata({ params }) {
`. Pinagem completa, periféricos, segurança em hardware e pinos com restrição, em português.`;
const imagem = serie.placa
? [{ url: serie.placa, width: 1600, height: 1091, alt: isEs ? `Patillaje de ${serie.nome_completo}` : isEn ? `Pinout of ${serie.nome_completo}` : `Pinagem do ${serie.nome_completo}` }]
? [{ url: serie.placa, width: 1600, height: 1091, alt: isDe ? `Pinbelegung von ${serie.nome_completo}` : isFr ? `Brochage de ${serie.nome_completo}` : isEs ? `Patillaje de ${serie.nome_completo}` : isEn ? `Pinout of ${serie.nome_completo}` : `Pinagem do ${serie.nome_completo}` }]
: [{ url: "/opengraph-image.png", width: 1200, height: 630, alt: "ESPDocs" }];
const keywords = isEs
const keywords = isDe
? [
serie.nome_completo, `${serie.nome_completo} pinout`, `${serie.nome_completo} Pinbelegung`,
`${serie.nome_completo} datasheet`, `${serie.nome_completo} Spezifikationen`,
`${serie.nome_completo} deutsch`, "ESP32", "Espressif", "Mikrocontroller",
]
: isFr
? [
serie.nome_completo, `${serie.nome_completo} pinout`, `${serie.nome_completo} brochage`,
`${serie.nome_completo} datasheet`, `${serie.nome_completo} spécifications`,
`${serie.nome_completo} français`, "ESP32", "Espressif", "microcontrôleur",
]
: isEs
? [
serie.nome_completo, `${serie.nome_completo} pinout`, `${serie.nome_completo} patillaje`,
`${serie.nome_completo} datasheet`, `${serie.nome_completo} especificaciones`,
@@ -726,14 +972,32 @@ export async function generateMetadata({ params }) {
const meta = {
...paginaMeta({
titulo: isEs ? `${serie.nome_completo}: especificaciones y patillaje` : isEn ? `${serie.nome_completo}: specifications and pinout` : `${serie.nome_completo}: especificações e pinagem`,
titulo: isDe
? `${serie.nome_completo}: Spezifikationen und Pinbelegung`
: isFr
? `${serie.nome_completo} : spécifications et brochage`
: isEs
? `${serie.nome_completo}: especificaciones y patillaje`
: isEn
? `${serie.nome_completo}: specifications and pinout`
: `${serie.nome_completo}: especificações e pinagem`,
descricao,
caminho: `/series/${key}`,
tipo: "article",
locale: currentLocale,
keywords,
}),
other: { "article:section": isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32" },
other: {
"article:section": isDe
? "ESP32-Serien"
: isFr
? "Séries ESP32"
: isEs
? "Series ESP32"
: isEn
? "ESP32 Series"
: "Séries ESP32",
},
};
meta.openGraph = { ...meta.openGraph, images: imagem };
app/[locale]/series/layout.jsx
+55 -7
View File
@@ -4,23 +4,41 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
const meta = paginaMeta({
titulo: isEs ? "Series ESP32: Guía técnica y patillaje" : isEn ? "ESP32 Series: Technical Guide and Pinouts" : "Séries ESP32",
descricao: isEs
titulo: isDe
? "ESP32-Serien: Technischer Leitfaden und Pinbelegung"
: isFr
? "Séries ESP32 : Guide technique et brochage"
: isEs
? "Series ESP32: Guía técnica y patillaje"
: isEn
? "ESP32 Series: Technical Guide and Pinouts"
: "Séries ESP32",
descricao: isDe
? "Alle 12 ESP32-Serien Seite an Seite: ESP32, S2, S3, S31, C2, C3, C5, C6, C61, P4, H2 und H4. Architektur, Speicher, Funk, Peripherie und Pinbelegung jeder Serie."
: isFr
? "Les 12 séries d'ESP32 côte à côte : ESP32, S2, S3, S31, C2, C3, C5, C6, C61, P4, H2 et H4. Architecture, mémoire, radio, périphériques et brochage de chacune."
: isEs
? "Las 12 series de ESP32 lado a lado: ESP32, S2, S3, S31, C2, C3, C5, C6, C61, P4, H2 y H4. Arquitectura, memoria, radio, periféricos y patillaje de cada una."
: isEn
? "All 12 ESP32 series side by side: ESP32, S2, S3, S31, C2, C3, C5, C6, C61, P4, H2 and H4. Architecture, memory, radio, peripherals and pinouts for each one."
: "As 12 séries de ESP32 lado a lado: ESP32, S2, S3, S31, C2, C3, C5, C6, C61, P4, H2 e H4. Arquitetura, memória, rádio, periféricos e pinagem de cada uma, em português.",
caminho: "/series",
locale,
keywords: isEs
keywords: isDe
? ["ESP32-Serien", "ESP32-Modelle", "ESP32 S3", "ESP32 C6", "ESP32 P4", "Unterschied zwischen ESP32"]
: isFr
? ["séries ESP32", "modèles ESP32", "ESP32 S3", "ESP32 C6", "ESP32 P4", "différence entre ESP32"]
: isEs
? ["series ESP32", "modelos de ESP32", "ESP32 S3", "ESP32 C6", "ESP32 P4", "diferencia entre ESP32"]
: isEn
? ["ESP32 series", "ESP32 models", "ESP32 S3", "ESP32 C6", "ESP32 P4", "difference between ESP32"]
: ["séries ESP32", "modelos de ESP32", "ESP32 S3", "ESP32 C6", "ESP32 P4", "diferença entre ESP32"],
});
meta.title = {
default: isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32",
default: isDe ? "ESP32-Serien" : isFr ? "Séries ESP32" : isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32",
template: "%s · ESPDocs",
};
return meta;
@@ -59,11 +77,35 @@ const faqsEs = [
},
];
const faqsFr = [
{
pergunta: "Combien de séries d'ESP32 existent actuellement ?",
resposta: "Actuellement, l'écosystème Espressif compte 12 séries principales : ESP32 classique, ESP32-S2, ESP32-S3, ESP32-S31, ESP32-C2, ESP32-C3, ESP32-C5, ESP32-C6, ESP32-C61, ESP32-P4, ESP32-H2 et ESP32-H4.",
},
{
pergunta: "Quelles sont les séries les plus récentes d'Espressif ?",
resposta: "Les séries les plus récentes incluent l'ESP32-P4 (axé sur la haute performance avec dual-core RISC-V à 400 MHz), l'ESP32-C5 (première puce avec Wi-Fi bi-bande 2,4/5 GHz d'Espressif) et l'ESP32-C61 (Wi-Fi 6 et Bluetooth 6 à faible coût).",
},
];
const faqsDe = [
{
pergunta: "Wie viele ESP32-Serien gibt es derzeit?",
resposta: "Derzeit umfasst das Espressif-Ökosystem 12 Hauptserien: klassischer ESP32, ESP32-S2, ESP32-S3, ESP32-S31, ESP32-C2, ESP32-C3, ESP32-C5, ESP32-C6, ESP32-C61, ESP32-P4, ESP32-H2 und ESP32-H4.",
},
{
pergunta: "Welche sind die neuesten Serien von Espressif?",
resposta: "Zu den neuesten Serien gehören der ESP32-P4 (fokussiert auf Hochleistung mit Dual-Core RISC-V bei 400 MHz), der ESP32-C5 (erster Chip mit Dual-Band 2,4/5 GHz Wi-Fi von Espressif) und der ESP32-C61 (kostengünstiges Wi-Fi 6 und Bluetooth 6).",
},
];
export default async function Layout({ children, params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const faqs = isEs ? faqsEs : isEn ? faqsEn : faqsPt;
const isFr = locale === "fr";
const isDe = locale === "de";
const faqs = isDe ? faqsDe : isFr ? faqsFr : isEs ? faqsEs : isEn ? faqsEn : faqsPt;
return (
<>
@@ -72,8 +114,14 @@ export default async function Layout({ children, params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isEn ? "Home" : "Início", caminho: isEs ? "/es" : isEn ? "/en" : "/" },
{ nome: isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32", caminho: isEs ? "/es/series" : isEn ? "/en/series" : "/series" },
{
nome: isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isEn ? "Home" : "Início",
caminho: isDe ? "/de" : isFr ? "/fr" : isEs ? "/es" : isEn ? "/en" : "/",
},
{
nome: isDe ? "ESP32-Serien" : isFr ? "Séries ESP32" : isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32",
caminho: isDe ? "/de/serien" : isFr ? "/fr/series" : isEs ? "/es/series" : isEn ? "/en/series" : "/series",
},
])
),
}}
app/[locale]/series/page.jsx
+106 -27
View File
@@ -9,6 +9,8 @@ import Link from "next/link";
import seriesDataPt from "@/public/series.json";
import seriesDataEn from "@/data/en/series.json";
import seriesDataEs from "@/data/es/series.json";
import seriesDataFr from "@/data/fr/series.json";
import seriesDataDe from "@/data/de/series.json";
import { getLocalizedHref } from "@/i18n/links";
import {
AlertTriangle,
@@ -45,31 +47,51 @@ const FILTROS_ES = [
{ id: "ia", rotulo: "Aceleración de IA", testa: (s) => Boolean(s.aceleradores_ia) },
];
const FILTROS_FR = [
{ id: "todas", rotulo: "Toutes", testa: () => true },
{ id: "riscv", rotulo: "RISC-V", testa: (s) => s.arquitetura.includes("RISC-V") },
{ id: "xtensa", rotulo: "Xtensa", testa: (s) => !s.arquitetura.includes("RISC-V") },
{ id: "matter", rotulo: "Matter", testa: (s) => s.matter === "Oui" || s.matter === "Yes" || s.matter === "Sim" || s.matter === "Sí" },
{ id: "ia", rotulo: "Accélération IA", testa: (s) => Boolean(s.aceleradores_ia) },
];
const FILTROS_DE = [
{ id: "todas", rotulo: "Alle", testa: () => true },
{ id: "riscv", rotulo: "RISC-V", testa: (s) => s.arquitetura.includes("RISC-V") },
{ id: "xtensa", rotulo: "Xtensa", testa: (s) => !s.arquitetura.includes("RISC-V") },
{ id: "matter", rotulo: "Matter", testa: (s) => s.matter === "Ja" || s.matter === "Yes" || s.matter === "Sim" || s.matter === "Sí" },
{ id: "ia", rotulo: "KI-Beschleunigung", testa: (s) => Boolean(s.aceleradores_ia) },
];
/** Marcador de segurança: o recurso que diferencia a série, não o que todas têm. */
function nivelSeguranca(serie, isEn, isEs) {
function nivelSeguranca(serie, isEn, isEs, isFr, isDe) {
const seg = serie.seguranca || {};
if (seg.key_manager === "Sim" || seg.key_manager === "Yes" || seg.key_manager === "Sí") return "Key Manager";
if (String(seg.ecdsa).startsWith("Sim") || String(seg.ecdsa).startsWith("Yes") || String(seg.ecdsa).startsWith("Sí")) {
return isEs ? "ECDSA en hardware" : isEn ? "Hardware ECDSA" : "ECDSA em hardware";
if (seg.key_manager === "Sim" || seg.key_manager === "Yes" || seg.key_manager === "Sí" || seg.key_manager === "Oui" || seg.key_manager === "Ja") return "Key Manager";
if (String(seg.ecdsa).startsWith("Sim") || String(seg.ecdsa).startsWith("Yes") || String(seg.ecdsa).startsWith("Sí") || String(seg.ecdsa).startsWith("Oui") || String(seg.ecdsa).startsWith("Ja")) {
return isDe ? "Hardware-ECDSA" : isFr ? "ECDSA matériel" : isEs ? "ECDSA en hardware" : isEn ? "Hardware ECDSA" : "ECDSA em hardware";
}
if (String(seg.ecc).startsWith("Sim") || String(seg.ecc).startsWith("Yes") || String(seg.ecc).startsWith("Sí")) {
return isEs ? "ECC en hardware" : isEn ? "Hardware ECC" : "ECC em hardware";
if (String(seg.ecc).startsWith("Sim") || String(seg.ecc).startsWith("Yes") || String(seg.ecc).startsWith("Sí") || String(seg.ecc).startsWith("Oui") || String(seg.ecc).startsWith("Ja")) {
return isDe ? "Hardware-ECC" : isFr ? "ECC matériel" : isEs ? "ECC en hardware" : isEn ? "Hardware ECC" : "ECC em hardware";
}
if (String(seg.aes).startsWith("AES")) return "AES + SHA";
return isEs ? "Solo SHA" : isEn ? "SHA only" : "Só SHA";
return isDe ? "Nur SHA" : isFr ? "SHA uniquement" : isEs ? "Solo SHA" : isEn ? "SHA only" : "Só SHA";
}
const simPt = (v) => !String(v).includes("Não");
const simEn = (v) => !String(v).includes("No") && !String(v).includes("Não");
const simEs = (v) => !String(v).includes("No") && !String(v).includes("Não");
const simFr = (v) => !String(v).includes("Non") && !String(v).includes("No") && !String(v).includes("Não");
const simDe = (v) => !String(v).includes("Nein") && !String(v).includes("No") && !String(v).includes("Não");
export default function Series() {
const pathname = usePathname();
const isEn = pathname?.startsWith("/en");
const isEs = pathname?.startsWith("/es");
const currentLocale = isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const filtros = isEs ? FILTROS_ES : isEn ? FILTROS_EN : FILTROS_PT;
const isFr = pathname?.startsWith("/fr");
const isDe = pathname?.startsWith("/de");
const currentLocale = isDe ? "de" : isFr ? "fr" : isEs ? "es" : isEn ? "en" : "pt";
const seriesData = isDe ? seriesDataDe : isFr ? seriesDataFr : isEs ? seriesDataEs : isEn ? seriesDataEn : seriesDataPt;
const filtros = isDe ? FILTROS_DE : isFr ? FILTROS_FR : isEs ? FILTROS_ES : isEn ? FILTROS_EN : FILTROS_PT;
const [filtro, setFiltro] = useState("todas");
const todas = Object.entries(seriesData);
@@ -84,12 +106,28 @@ export default function Series() {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Series" : isEn ? "Series" : "Séries" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isDe ? "Serien" : isFr ? "Séries" : isEs ? "Series" : isEn ? "Series" : "Séries" }]}
icon={Compass}
label={isEs ? `${todas.length} familias de Espressif` : isEn ? `${todas.length} Espressif families` : `${todas.length} famílias da Espressif`}
title={isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32"}
label={
isDe
? `${todas.length} Espressif-Familien`
: isFr
? `${todas.length} familles d'Espressif`
: isEs
? `${todas.length} familias de Espressif`
: isEn
? `${todas.length} Espressif families`
: `${todas.length} famílias da Espressif`
}
title={isDe ? "ESP32-Serien" : isFr ? "Séries ESP32" : isEs ? "Series ESP32" : isEn ? "ESP32 Series" : "Séries ESP32"}
lede={
isEs
isDe
? "Jede Serie wurde für einen bestimmten Projekttyp entwickelt, von Batteriesensoren bis hin zu KI-Beschleunigern. Öffnen Sie das Datenblatt für Pinbelegung, Peripherie und Sicherheit."
: isFr
? "Chaque série a été conçue pour un type de projet spécifique, des capteurs sur batterie aux accélérateurs IA. Ouvrez la fiche pour consulter le brochage, les périphériques et la sécurité."
: isEs
? "Cada serie fue diseñada para un tipo de proyecto específico, desde sensores a batería hasta aceleradores de IA. Abra la ficha para ver patillaje, periféricos y seguridad."
: isEn
? "Each series was designed for a specific project type, from battery-powered sensors to AI accelerators. Open the sheet to see pinout, peripherals, and security."
@@ -97,8 +135,8 @@ export default function Series() {
}
/>
<section className="shell pt-10 sm:pt-12" aria-label={isEs ? "Lista de series" : isEn ? "Series list" : "Lista de séries"}>
<div role="group" aria-label={isEs ? "Filtrar series" : isEn ? "Filter series" : "Filtrar séries"} className="flex flex-wrap gap-2">
<section className="shell pt-10 sm:pt-12" aria-label={isDe ? "Serienliste" : isFr ? "Liste des séries" : isEs ? "Lista de series" : isEn ? "Series list" : "Lista de séries"}>
<div role="group" aria-label={isDe ? "Serien filtern" : isFr ? "Filtrer les séries" : isEs ? "Filtrar series" : isEn ? "Filter series" : "Filtrar séries"} className="flex flex-wrap gap-2">
{filtros.map((f) => (
<button key={f.id} type="button" aria-pressed={filtro === f.id} onClick={() => setFiltro(f.id)} className="chip-btn">
{f.rotulo}
@@ -106,13 +144,50 @@ export default function Series() {
))}
</div>
<p role="status" aria-live="polite" className="mt-4 text-sm text-muted">
{series.length} {series.length === 1 ? (isEs ? "serie" : isEn ? "series" : "série") : (isEs ? "series" : isEn ? "series" : "séries")}
{series.length}{" "}
{series.length === 1
? isDe
? "Serie"
: isFr
? "série"
: isEs
? "serie"
: isEn
? "series"
: "série"
: isDe
? "Serien"
: isFr
? "séries"
: isEs
? "series"
: isEn
? "series"
: "séries"}
</p>
<div className="mt-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{series.map(([key, serie]) => {
const riscv = serie.arquitetura.includes("RISC-V");
const fatos = isEs
const fatos = isDe
? [
["Kerne", serie.nucleos],
["Taktfrequenz", serie.frequencia],
["SRAM", serie.memoria_sram],
["Wi-Fi", simDe(serie.wifi) ? "Ja" : "Nein"],
["Bluetooth", String(serie.bluetooth).includes("Nein") || String(serie.bluetooth).includes("No") || String(serie.bluetooth).includes("Não") ? "Nein" : "Ja"],
serie.consumo_energia?.deep_sleep ? ["Deep sleep", serie.consumo_energia.deep_sleep] : null,
].filter(Boolean)
: isFr
? [
["Cœurs", serie.nucleos],
["Fréquence", serie.frequencia],
["SRAM", serie.memoria_sram],
["Wi-Fi", simFr(serie.wifi) ? "Oui" : "Non"],
["Bluetooth", String(serie.bluetooth).includes("Non") || String(serie.bluetooth).includes("No") || String(serie.bluetooth).includes("Não") ? "Non" : "Oui"],
serie.consumo_energia?.deep_sleep ? ["Deep sleep", serie.consumo_energia.deep_sleep] : null,
].filter(Boolean)
: isEs
? [
["Núcleos", serie.nucleos],
["Frecuencia", serie.frequencia],
@@ -150,7 +225,7 @@ export default function Series() {
{fatos.map(([rotulo, valor]) => (
<div key={rotulo} className="flex items-baseline justify-between gap-4 py-2">
<dt className="text-muted">{rotulo}</dt>
<dd className={`text-right font-medium ${valor === "Não" || valor === "No" ? "text-muted" : "text-ink"}`}>{valor}</dd>
<dd className={`text-right font-medium ${valor === "Não" || valor === "No" || valor === "Non" || valor === "Nein" ? "text-muted" : "text-ink"}`}>{valor}</dd>
</div>
))}
</dl>
@@ -159,14 +234,14 @@ export default function Series() {
{serie.aceleradores_ia && (
<li className="chip chip-accent">
<Sparkles className="h-3 w-3" aria-hidden="true" />
{isEs ? "Aceleradores de IA" : isEn ? "AI Accelerators" : "Aceleradores de IA"}
{isDe ? "KI-Beschleuniger" : isFr ? "Accélérateurs IA" : isEs ? "Aceleradores de IA" : isEn ? "AI Accelerators" : "Aceleradores de IA"}
</li>
)}
<li className="chip">
<ShieldCheck className="h-3 w-3 text-accent" aria-hidden="true" />
{nivelSeguranca(serie, isEn, isEs)}
{nivelSeguranca(serie, isEn, isEs, isFr, isDe)}
</li>
{(serie.matter === "Sim" || serie.matter === "Yes" || serie.matter === "Sí") && (
{(serie.matter === "Sim" || serie.matter === "Yes" || serie.matter === "Sí" || serie.matter === "Oui" || serie.matter === "Ja") && (
<li className="chip">
<Home className="h-3 w-3 text-accent" aria-hidden="true" />
Matter
@@ -175,13 +250,13 @@ export default function Series() {
{serie.status_documentacao && (
<li className="chip">
<AlertTriangle className="h-3 w-3 text-gold" aria-hidden="true" />
{isEs ? "Documentación preliminar" : isEn ? "Preliminary documentation" : "Documentação preliminar"}
{isDe ? "Vorläufige Dokumentation" : isFr ? "Documentation préliminaire" : isEs ? "Documentación preliminar" : isEn ? "Preliminary documentation" : "Documentação preliminar"}
</li>
)}
</ul>
<span className="mt-5 inline-flex items-center gap-1 text-sm font-medium text-accent">
{isEs ? "Abrir ficha" : isEn ? "Open datasheet" : "Abrir ficha"}
{isDe ? "Datenblatt öffnen" : isFr ? "Ouvrir la fiche" : isEs ? "Abrir ficha" : isEn ? "Open datasheet" : "Abrir ficha"}
<ArrowUpRight className="h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" aria-hidden="true" />
</span>
</Link>
@@ -194,10 +269,14 @@ export default function Series() {
<div className="panel flex flex-col items-start justify-between gap-6 p-7 sm:p-10 md:flex-row md:items-center">
<div className="max-w-2xl">
<h2 className="section-title">
{isEs ? "¿Tiene dudas entre dos series?" : isEn ? "Unsure between two series?" : "Ficou em dúvida entre duas séries?"}
{isDe ? "Unsicher zwischen zwei Serien?" : isFr ? "Vous hésitez entre deux séries ?" : isEs ? "¿Tiene dudas entre dos series?" : isEn ? "Unsure between two series?" : "Ficou em dúvida entre duas séries?"}
</h2>
<p className="mt-3 text-base text-muted">
{isEs
{isDe
? "Der Vergleicher stellt bis zu vier Modelle gegenüber: Kerne, Funk, Speicher, Peripherie und Sicherheit."
: isFr
? "Le comparateur place jusqu'à quatre modèles côte à côte : cœurs, radio, mémoire, périphériques et sécurité."
: isEs
? "El comparador coloca hasta cuatro modelos lado a lado: núcleos, radio, memoria, periféricos y seguridad."
: isEn
? "The comparator tool puts up to four models side by side: cores, radio, memory, peripherals, and security."
@@ -206,7 +285,7 @@ export default function Series() {
</div>
<Link href={getLocalizedHref("/comparacao", currentLocale)} className="btn btn-primary shrink-0">
<Scale className="h-4 w-4" aria-hidden="true" />
{isEs ? "Comparar series" : isEn ? "Compare series" : "Comparar séries"}
{isDe ? "Serien vergleichen" : isFr ? "Comparer les séries" : isEs ? "Comparar series" : isEn ? "Compare series" : "Comparar séries"}
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
</div>
app/[locale]/sobre/page.jsx
+116 -26
View File
@@ -12,15 +12,33 @@ export async function generateMetadata({ params }) {
const { locale } = await params;
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
return paginaMeta({
titulo: isEs ? "Acerca del proyecto" : isEn ? "About the Project" : "Sobre o projeto",
descricao: isEs
titulo: isDe
? "Über das Projekt"
: isFr
? "À propos du projet"
: isEs
? "Acerca del proyecto"
: isEn
? "About the Project"
: "Sobre o projeto",
descricao: isDe
? "ESPDocs ist eine unabhängige Plattform, die die technische Dokumentation des ESP32-Ökosystems strukturiert. Erfahren Sie mehr über das Projekt und wie Sie beitragen können."
: isFr
? "ESPDocs est une plateforme indépendante qui organise la documentation technique de l'écosystème ESP32. Découvrez le projet et comment contribuer."
: isEs
? "ESPDocs es una plataforma independiente que organiza la documentación técnica del ecosistema ESP32. Conozca el proyecto y cómo contribuir."
: isEn
? "ESPDocs is an independent platform organizing technical documentation of the ESP32 ecosystem. Learn about the project and how to contribute."
: "O ESPDocs é uma plataforma independente que reúne a documentação do ecossistema ESP32 em português brasileiro. Saiba como o projeto nasceu e como contribuir.",
caminho: "/sobre",
keywords: isEs
keywords: isDe
? ["ESPDocs", "ESP32 Dokumentation", "ESP32 Open-Source-Projekt", "Open Source"]
: isFr
? ["ESPDocs", "documentation ESP32", "projet open source ESP32", "open source"]
: isEs
? ["ESPDocs", "documentación ESP32", "proyecto open source ESP32", "código abierto"]
: isEn
? ["ESPDocs", "ESP32 documentation", "open source ESP32 project"]
@@ -34,6 +52,8 @@ export default async function Sobre({ params }) {
const isPt = locale === "pt";
const isEn = locale === "en";
const isEs = locale === "es";
const isFr = locale === "fr";
const isDe = locale === "de";
const featuresPt = [
{ icon: Languages, title: "Em português", desc: "Dados técnicos organizados e apresentados em português do Brasil." },
@@ -56,7 +76,21 @@ export default async function Sobre({ params }) {
{ icon: Code, title: "Código abierto", desc: "Las contribuciones son bienvenidas en Gitea." },
];
const features = isEs ? featuresEs : isEn ? featuresEn : featuresPt;
const featuresFr = [
{ icon: Languages, title: "En français", desc: "Données techniques organisées et présentées clairement en français." },
{ icon: GitCompare, title: "Comparaisons visuelles", desc: "Tableaux et schémas pour choisir la bonne série sans ouvrir dix datasheets." },
{ icon: Globe, title: "Accès centralisé", desc: "Liens directs vers la documentation officielle, les dépôts et les exemples." },
{ icon: Code, title: "Open source", desc: "Les contributions sont les bienvenues sur Gitea." },
];
const featuresDe = [
{ icon: Languages, title: "Auf Deutsch", desc: "Technische Daten übersichtlich und strukturiert auf Deutsch aufbereitet." },
{ icon: GitCompare, title: "Visuelle Vergleiche", desc: "Tabellen und Diagramme zur Auswahl der richtigen Serie, ohne zehn Datenblätter zu öffnen." },
{ icon: Globe, title: "Zentraler Zugang", desc: "Direkte Links zu offizieller Dokumentation, Repositories und Beispielen." },
{ icon: Code, title: "Open Source", desc: "Beiträge sind auf Gitea herzlich willkommen." },
];
const features = isDe ? featuresDe : isFr ? featuresFr : isEs ? featuresEs : isEn ? featuresEn : featuresPt;
return (
<div className="site-canvas min-h-screen">
@@ -70,8 +104,8 @@ export default async function Sobre({ params }) {
dangerouslySetInnerHTML={{
__html: JSON.stringify(
jsonLd.trilha([
{ nome: isEs ? "Inicio" : isPt ? "Início" : "Home", caminho: isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isEs ? "Acerca del proyecto" : isPt ? "Sobre o Projeto" : "About the Project", caminho: isEn ? "/en/about" : isEs ? "/es/acerca" : "/sobre" },
{ nome: isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isPt ? "Início" : "Home", caminho: isDe ? "/de" : isFr ? "/fr" : isEn ? "/en" : isEs ? "/es" : "/" },
{ nome: isDe ? "Über das Projekt" : isFr ? "À propos du projet" : isEs ? "Acerca del proyecto" : isPt ? "Sobre o Projeto" : "About the Project", caminho: isDe ? "/de/ueber-uns" : isFr ? "/fr/a-propos" : isEn ? "/en/about" : isEs ? "/es/acerca" : "/sobre" },
])
),
}}
@@ -83,12 +117,18 @@ export default async function Sobre({ params }) {
<PageHero
isEn={isEn}
isEs={isEs}
trail={[{ label: isEs ? "Acerca" : isPt ? "Sobre" : "About" }]}
isFr={isFr}
isDe={isDe}
trail={[{ label: isDe ? "Über uns" : isFr ? "À propos" : isEs ? "Acerca" : isPt ? "Sobre" : "About" }]}
icon={Info}
label={isEs ? "Proyecto independiente" : isPt ? "Projeto independente" : "Independent project"}
title={isEs ? "Acerca de ESPDocs" : isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
label={isDe ? "Unabhängiges Projekt" : isFr ? "Projet indépendant" : isEs ? "Proyecto independiente" : isPt ? "Projeto independente" : "Independent project"}
title={isDe ? "Über ESPDocs" : isFr ? "À propos d'ESPDocs" : isEs ? "Acerca de ESPDocs" : isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
lede={
isEs
isDe
? "Eine inoffizielle deutschsprachige Plattform, die technische Informationen zum ESP32 strukturiert und Sie mit der offiziellen Dokumentation von Espressif verbindet. Entwickelt für die Open-Hardware-Community."
: isFr
? "Une plateforme non officielle en français qui organise les informations techniques de l'ESP32 et vous oriente vers la documentation officielle d'Espressif. Conçue pour la communauté du matériel libre."
: isEs
? "Una plataforma no oficial, en español, que organiza la información técnica del ESP32 y le conecta con la documentación oficial de Espressif. Creada para la comunidad de hardware abierto."
: isPt
? "Uma plataforma não oficial, em português, que organiza as informações técnicas do ESP32 e leva você à documentação oficial da Espressif. Feita para a comunidade de hardware livre."
@@ -97,7 +137,7 @@ export default async function Sobre({ params }) {
>
<a href={REPOSITORIO} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
<GiteaMark className="h-4 w-4" />
{isEs ? "Ver el repositorio" : isPt ? "Ver o repositório" : "View repository"}
{isDe ? "Repository ansehen" : isFr ? "Voir le dépôt" : isEs ? "Ver el repositorio" : isPt ? "Ver o repositório" : "View repository"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
</PageHero>
@@ -105,9 +145,13 @@ export default async function Sobre({ params }) {
<div className="shell section grid grid-cols-1 gap-10 pt-12 sm:pt-16 lg:grid-cols-[1fr_22rem] lg:gap-14">
<div className="min-w-0 max-w-3xl space-y-12">
<section aria-labelledby="missao">
<h2 id="missao" className="section-title">{isEs ? "Misión" : isPt ? "Missão" : "Mission"}</h2>
<h2 id="missao" className="section-title">{isDe ? "Mission" : isFr ? "Mission" : isEs ? "Misión" : isPt ? "Missão" : "Mission"}</h2>
<p className="mt-4 text-base leading-relaxed text-muted">
{isEs
{isDe
? "Den Zugang zum und das Verständnis für das ESP32-Ökosystem durch eine deutsche Oberfläche erleichtern, die Spezifikationen bündelt, Serien vergleicht, Frameworks vorstellt und offizielle Dokumentationslinks zentralisiert. Ziel ist es, Entwicklungszeit bei Firmware und IoT-Projekten zu sparen."
: isFr
? "Faciliter l'accès et la compréhension de l'écosystème ESP32 avec une interface en français qui organise les spécifications, compare les séries, présente les frameworks et centralise les liens vers la documentation officielle. L'objectif est de vous faire gagner du temps dans le développement de firmware et d'IoT."
: isEs
? "Facilitar el acceso y la comprensión del ecosistema ESP32 con una interfaz en español que organiza especificaciones, compara series, presenta frameworks y centraliza los enlaces a la documentación oficial. El objetivo es ahorrar tiempo en el desarrollo de firmware e IoT."
: isPt
? "Facilitar o acesso e a compreensão do ecossistema ESP32 com uma interface em português que organiza especificações, compara séries, apresenta frameworks e centraliza os links da documentação oficial. O objetivo é economizar o seu tempo no desenvolvimento de firmware e IoT."
@@ -116,9 +160,13 @@ export default async function Sobre({ params }) {
</section>
<section aria-labelledby="porque">
<h2 id="porque" className="section-title">{isEs ? "¿Por qué existe ESPDocs?" : isPt ? "Por que o ESPDocs existe" : "Why ESPDocs exists"}</h2>
<h2 id="porque" className="section-title">{isDe ? "Warum es ESPDocs gibt" : isFr ? "Pourquoi ESPDocs existe" : isEs ? "¿Por qué existe ESPDocs?" : isPt ? "Por que o ESPDocs existe" : "Why ESPDocs exists"}</h2>
<p className="mt-4 text-base leading-relaxed text-muted">
{isEs
{isDe
? "Informationen über den ESP32 sind oft über dichte Datenblätter, technische Referenzhandbücher (TRM) und sekundäre Repositories verstreut. ESPDocs verdichtet und strukturiert diese Daten für eine schnelle Vorabauswahl, bevor Sie tiefer in die offizielle Technik einsteigen."
: isFr
? "Les informations sur l'ESP32 sont souvent dispersées entre des fiches techniques denses, des manuels de référence technique (TRM) et des dépôts secondaires. ESPDocs condense et structure ces données pour une évaluation rapide avant d'approfondir l'ingénierie officielle."
: isEs
? "La información sobre el ESP32 suele estar dispersa entre hojas de datos densas, manuales de referencia técnica (TRM) y repositorios secundarios. ESPDocs condensa y estructura estos datos para una evaluación rápida antes de profundizar en la ingeniería oficial."
: isPt
? "As informações sobre os ESP32 costumam estar espalhadas entre datasheets densos, manuais de referência (TRM) e repositórios secundários, tudo em inglês. O ESPDocs condensa e estrutura esses dados para a triagem rápida, antes de você aprofundar na engenharia oficial."
@@ -140,16 +188,32 @@ export default async function Sobre({ params }) {
</section>
<section aria-labelledby="contribuir">
<h2 id="contribuir" className="section-title">{isEs ? "Cómo contribuir" : isPt ? "Como contribuir" : "How to contribute"}</h2>
<h2 id="contribuir" className="section-title">{isDe ? "Wie Sie beitragen können" : isFr ? "Comment contribuer" : isEs ? "Cómo contribuir" : isPt ? "Como contribuir" : "How to contribute"}</h2>
<p className="mt-4 text-base leading-relaxed text-muted">
{isEs
{isDe
? "Übersetzungskorrekturen, Tabellenanpassungen und neue Codebeispiele sind herzlich willkommen. Das Projekt wächst gemeinsam mit der Community."
: isFr
? "Les corrections de traduction, les ajustements de tableaux et les nouveaux exemples de code sont très appréciés. Le projet grandit avec la communauté."
: isEs
? "Las correcciones de traducción, ajustes en tablas y nuevos ejemplos de código son muy bienvenidos. El proyecto crece junto con la comunidad."
: isPt
? "Correções de tradução, ajustes em tabelas e novos exemplos de código são muito bem-vindos. O projeto cresce com a comunidade."
: "Translation fixes, table refinements and new code examples are welcome. The project grows with the community."}
</p>
<ol className="mt-6 space-y-3">
{(isEs
{(isDe
? [
"Erstellen Sie einen Fork des Repositories auf Gitea.",
"Implementieren Sie die Verbesserungen und prüfen Sie die offiziellen technischen Referenzen.",
"Eröffnen Sie einen Pull Request mit einer Beschreibung der vorgenommenen Änderungen.",
]
: isFr
? [
"Forkez le dépôt sur Gitea.",
"Apportez les améliorations et vérifiez les références techniques officielles.",
"Ouvrez une Pull Request décrivant les modifications apportées.",
]
: isEs
? [
"Haga un fork del repositorio en Gitea.",
"Implemente las mejoras y verifique las referencias técnicas oficiales.",
@@ -178,9 +242,13 @@ export default async function Sobre({ params }) {
</section>
<section aria-labelledby="acessibilidade">
<h2 id="acessibilidade" className="section-title">{isEs ? "Accesibilidad" : isPt ? "Acessibilidade" : "Accessibility"}</h2>
<h2 id="acessibilidade" className="section-title">{isDe ? "Barrierefreiheit" : isFr ? "Accessibilité" : isEs ? "Accesibilidad" : isPt ? "Acessibilidade" : "Accessibility"}</h2>
<p className="mt-4 text-base leading-relaxed text-muted">
{isEs
{isDe
? "ESPDocs legt großen Wert auf Lesbarkeit, hohen Kontrast (WCAG-Stufe AAA) und vollständige Tastaturnavigation. Wenn Sie auf Lese- oder Navigationsbarrieren stoßen, eröffnen Sie bitte ein Issue im Repository."
: isFr
? "ESPDocs privilégie la lisibilité, un contraste élevé (niveau AAA du WCAG) et une navigation complète au clavier. Si vous rencontrez un obstacle de lecture ou de navigation, ouvrez un ticket dans le dépôt."
: isEs
? "ESPDocs prioriza la legibilidad, el alto contraste (nivel AAA de WCAG) y la navegación completa por teclado. Si encuentra alguna barrera de lectura o navegación, abra un issue en el repositorio."
: isPt
? "O ESPDocs prioriza a legibilidade, o contraste alto (nível AAA da WCAG) e a navegação completa por teclado. Se encontrar alguma barreira de leitura ou navegação, abra uma issue no repositório."
@@ -189,7 +257,7 @@ export default async function Sobre({ params }) {
</section>
</div>
<aside className="space-y-5 lg:sticky lg:top-28 lg:self-start" aria-label={isEs ? "Autor y aviso legal" : isPt ? "Autor e aviso legal" : "Author and legal notice"}>
<aside className="space-y-5 lg:sticky lg:top-28 lg:self-start" aria-label={isDe ? "Autor und rechtlicher Hinweis" : isFr ? "Auteur et mentions légales" : isEs ? "Autor y aviso legal" : isPt ? "Autor e aviso legal" : "Author and legal notice"}>
<div className="panel p-6 sm:p-7">
<div className="flex items-center gap-4">
<span className="grid h-16 w-16 shrink-0 place-items-center rounded-2xl border border-line bg-white">
@@ -197,11 +265,29 @@ export default async function Sobre({ params }) {
</span>
<div>
<h2 className="font-display text-lg font-semibold text-ink">Lucas Rayan Guerra</h2>
<p className="text-sm text-muted">{isEs ? "Creador de Ciência Embarcada" : isPt ? "Criador do Ciência Embarcada" : "Creator of Ciência Embarcada"}</p>
<p className="text-sm text-muted">{isDe ? "Gründer von Ciência Embarcada" : isFr ? "Créateur de Ciência Embarcada" : isEs ? "Creador de Ciência Embarcada" : isPt ? "Criador do Ciência Embarcada" : "Creator of Ciência Embarcada"}</p>
</div>
</div>
<div className="mt-5 space-y-3 text-sm leading-relaxed text-muted">
{isEs ? (
{isDe ? (
<>
<p>
Systementwicklungstechniker, Informatikstudent an der UFRPE und Forscher im Bereich Blockchain und Kryptographie.
</p>
<p>
Software-Direktor bei Semine AgriTech und Referent bei Veranstaltungen wie REC&apos;n&apos;Play, der Inhalte zu Hardware, IoT und Cybersicherheit vermittelt.
</p>
</>
) : isFr ? (
<>
<p>
Technicien en développement de systèmes, étudiant en informatique à l'UFRPE et chercheur en blockchain et cryptographie.
</p>
<p>
Directeur logiciel chez Semine AgriTech et conférencier lors d'événements comme REC&apos;n&apos;Play, partageant des connaissances sur le matériel, l'IoT et la cybersécurité.
</p>
</>
) : isEs ? (
<>
<p>
Técnico en Desarrollo de Sistemas, estudiante de Ciencias de la Computación en la UFRPE e investigador en Blockchain y Criptografía.
@@ -233,15 +319,19 @@ export default async function Sobre({ params }) {
)}
</div>
<a href="https://cienciaembarcada.com.br" target="_blank" rel="noopener noreferrer" className="btn btn-ghost mt-6 w-full">
{isEs ? "Visitar Ciência Embarcada" : isPt ? "Visitar o Ciência Embarcada" : "Visit Ciência Embarcada"}
{isDe ? "Ciência Embarcada besuchen" : isFr ? "Visiter Ciência Embarcada" : isEs ? "Visitar Ciência Embarcada" : isPt ? "Visitar o Ciência Embarcada" : "Visit Ciência Embarcada"}
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
</a>
</div>
<div className="callout callout-warn">
<p className="font-semibold text-ink">{isEs ? "Aviso legal" : isPt ? "Aviso legal" : "Legal notice"}</p>
<p className="font-semibold text-ink">{isDe ? "Rechtlicher Hinweis" : isFr ? "Mentions légales" : isEs ? "Aviso legal" : isPt ? "Aviso legal" : "Legal notice"}</p>
<p className="mt-1">
{isEs
{isDe
? "ESPDocs ist ein Aggregator und Kurator. Die referenzierten Handbücher und Repositories sind Eigentum von Espressif Systems. Konsultieren Sie bei geschäftskritischen oder kommerziellen Projekten stets die offizielle Dokumentation."
: isFr
? "ESPDocs est une plateforme d'agrégation et de synthèse. Les manuels et dépôts référencés appartiennent à Espressif Systems. Pour les projets critiques ou commerciaux, consultez systématiquement la documentation officielle."
: isEs
? "ESPDocs es un agregador y organizador. Los manuales y repositorios referenciados pertenecen a Espressif Systems. En proyectos críticos o comerciales, consulte siempre la documentación oficial."
: isPt
? "O ESPDocs é um agregador e organizador. Os manuais e repositórios referenciados pertencem à Espressif Systems. Em projetos críticos ou comerciais, consulte sempre a documentação oficial."