Lucas RayanandClaude Sonnet 5.5
5a9fe676fc
CI / Lint e auditorias (push) Successful in 1m10s
CI / Trivy (dependências e segredos) (push) Successful in 12s
CI / Imagem Docker (linux/arm64) (push) Successful in 2m39s
Release / Plano (reaproveitar a imagem?) (push) Successful in 6s
Release / ci (push) Skipped
Release / Publica a imagem (linux/arm64) (push) Successful in 18s
Release / Cria a release no Gitea (push) Successful in 5s
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
362 lines
16 KiB
React
362 lines
16 KiB
React
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
import PageHero from "@/components/PageHero";
|
|
import SectionHead from "@/components/SectionHead";
|
|
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 frameworksDataZh from "@/data/zh-CN/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";
|
|
|
|
const GUIAS_PT = [
|
|
{
|
|
icon: GraduationCap,
|
|
titulo: "Estou começando",
|
|
texto: "Arduino ou MicroPython são os caminhos mais rápidos para testar sensores e APIs. Para produto, vá de ESP-IDF ou Rust.",
|
|
links: [
|
|
["Arduino", "/frameworks/Arduino"],
|
|
["MicroPython", "/frameworks/MicroPython"],
|
|
["Rust", "/frameworks/Rust-ESP"],
|
|
],
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
titulo: "Nuvem e casa conectada",
|
|
texto: "ESP-Matter para interoperabilidade, ESP-RainMaker para nuvem pronta e Zigbee para redes locais de baixo consumo.",
|
|
links: [
|
|
["RainMaker", "/frameworks/ESP-RainMaker"],
|
|
["Matter", "/frameworks/ESP-Matter"],
|
|
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
|
|
],
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
titulo: "Áudio, voz e IA",
|
|
texto: "ESP-ADF para áudio, ESP-SR para reconhecimento de fala offline e ESP-NN para acelerar TinyML.",
|
|
links: [
|
|
["Áudio", "/frameworks/ESP-ADF", Music],
|
|
["Voz", "/frameworks/ESP-SR", Mic],
|
|
["IA", "/frameworks/ESP-NN", Brain],
|
|
],
|
|
},
|
|
];
|
|
|
|
const GUIAS_EN = [
|
|
{
|
|
icon: GraduationCap,
|
|
titulo: "Getting Started",
|
|
texto: "Arduino or MicroPython are the fastest routes to test sensors and APIs. For production, go with ESP-IDF or Rust.",
|
|
links: [
|
|
["Arduino", "/frameworks/Arduino"],
|
|
["MicroPython", "/frameworks/MicroPython"],
|
|
["Rust", "/frameworks/Rust-ESP"],
|
|
],
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
titulo: "Cloud and Connected Home",
|
|
texto: "ESP-Matter for interoperability, ESP-RainMaker for ready-made cloud, and Zigbee for low-power local mesh networks.",
|
|
links: [
|
|
["RainMaker", "/frameworks/ESP-RainMaker"],
|
|
["Matter", "/frameworks/ESP-Matter"],
|
|
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
|
|
],
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
titulo: "Audio, Voice and AI",
|
|
texto: "ESP-ADF for audio processing, ESP-SR for offline speech recognition, and ESP-NN for accelerating TinyML.",
|
|
links: [
|
|
["Audio", "/frameworks/ESP-ADF", Music],
|
|
["Voice", "/frameworks/ESP-SR", Mic],
|
|
["AI", "/frameworks/ESP-NN", Brain],
|
|
],
|
|
},
|
|
];
|
|
|
|
const GUIAS_ES = [
|
|
{
|
|
icon: GraduationCap,
|
|
titulo: "Estoy comenzando",
|
|
texto: "Arduino o MicroPython son los caminos más rápidos para probar sensores y APIs. Para producto, elija ESP-IDF o Rust.",
|
|
links: [
|
|
["Arduino", "/frameworks/Arduino"],
|
|
["MicroPython", "/frameworks/MicroPython"],
|
|
["Rust", "/frameworks/Rust-ESP"],
|
|
],
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
titulo: "Nube y hogar conectado",
|
|
texto: "ESP-Matter para interoperabilidad, ESP-RainMaker para nube lista y Zigbee para redes locales de bajo consumo.",
|
|
links: [
|
|
["RainMaker", "/frameworks/ESP-RainMaker"],
|
|
["Matter", "/frameworks/ESP-Matter"],
|
|
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
|
|
],
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
titulo: "Audio, voz e IA",
|
|
texto: "ESP-ADF para procesamiento de audio, ESP-SR para reconocimiento de voz offline y ESP-NN para acelerar TinyML.",
|
|
links: [
|
|
["Audio", "/frameworks/ESP-ADF", Music],
|
|
["Voz", "/frameworks/ESP-SR", Mic],
|
|
["IA", "/frameworks/ESP-NN", Brain],
|
|
],
|
|
},
|
|
];
|
|
|
|
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],
|
|
],
|
|
},
|
|
];
|
|
const GUIAS_ZH = [
|
|
{
|
|
icon: GraduationCap,
|
|
titulo: "快速上手",
|
|
texto: "Arduino 或 MicroPython 是测试传感器和 API 最快的途径。量产请选择 ESP-IDF 或 Rust。",
|
|
links: [
|
|
["Arduino", "/frameworks/Arduino"],
|
|
["MicroPython", "/frameworks/MicroPython"],
|
|
["Rust", "/frameworks/Rust-ESP"],
|
|
],
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
titulo: "云与智能家居",
|
|
texto: "需要互操作用 ESP-Matter，想要现成的云用 ESP-RainMaker，做低功耗本地 Mesh 网络用 Zigbee。",
|
|
links: [
|
|
["RainMaker", "/frameworks/ESP-RainMaker"],
|
|
["Matter", "/frameworks/ESP-Matter"],
|
|
["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
|
|
],
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
titulo: "音频、语音与 AI",
|
|
texto: "音频处理用 ESP-ADF，离线语音识别用 ESP-SR，加速 TinyML 用 ESP-NN。",
|
|
links: [
|
|
["音频", "/frameworks/ESP-ADF", Music],
|
|
["语音", "/frameworks/ESP-SR", Mic],
|
|
["AI", "/frameworks/ESP-NN", Brain],
|
|
],
|
|
},
|
|
];
|
|
|
|
export default async function Frameworks({ params }) {
|
|
const { locale } = await params;
|
|
const isEn = locale === "en";
|
|
const isEs = locale === "es";
|
|
const isFr = locale === "fr";
|
|
const isDe = locale === "de";
|
|
const isZh = locale === "zh-CN";
|
|
const currentLocale = isEs ? "es" : isEn ? "en" : isFr ? "fr" : isZh ? "zh-CN" : isDe ? "de" : "pt";
|
|
const frameworksData = isEs ? frameworksDataEs : isEn ? frameworksDataEn : isFr ? frameworksDataFr : isZh ? frameworksDataZh : isDe ? frameworksDataDe : frameworksDataPt;
|
|
const frameworks = Object.entries(frameworksData);
|
|
const guias = isEs ? GUIAS_ES : isEn ? GUIAS_EN : isFr ? GUIAS_FR : isZh ? GUIAS_ZH : isDe ? GUIAS_DE : GUIAS_PT;
|
|
|
|
return (
|
|
<div className="site-canvas min-h-screen">
|
|
<Header />
|
|
|
|
<main id="conteudo">
|
|
<PageHero
|
|
isEn={isEn}
|
|
isEs={isEs}
|
|
isFr={isFr}
|
|
isDe={isDe} isZh={isZh}
|
|
trail={[{ label: isEs ? "Frameworks y SDKs" : isEn ? "Frameworks & SDKs" : isFr ? "Frameworks et SDKs" : isZh ? "框架与 SDK" : isDe ? "Frameworks & SDKs" : "Frameworks e SDKs" }]}
|
|
icon={Layers}
|
|
label={isEs ? `${frameworks.length} frameworks y SDKs` : isEn ? `${frameworks.length} frameworks and SDKs` : isFr ? `${frameworks.length} frameworks et SDKs` : isZh ? `${frameworks.length} 个框架与 SDK` : 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" : isZh ? "ESP32 框架与 SDK" : 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."
|
|
: isZh ? "从原生 C/C++ 与 FreeRTOS，到 Rust，再到物联网云、语音识别、音频和 Matter。按你想构建的东西来选。" : 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" : isFr ? "Par où commencer" : isZh ? "从哪里开始" : 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">
|
|
<span className="grid h-10 w-10 place-items-center rounded-full bg-accent-soft text-accent">
|
|
<Icon className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<h2 className="mt-4 font-display text-xl font-semibold tracking-[-0.03em] text-ink">{titulo}</h2>
|
|
<p className="mt-2 flex-1 text-sm leading-relaxed text-muted">{texto}</p>
|
|
<ul className="mt-5 flex flex-wrap gap-2 border-t border-line pt-4">
|
|
{links.map(([rotulo, href, Extra]) => (
|
|
<li key={rotulo}>
|
|
<Link href={getLocalizedHref(href, currentLocale)} className="chip-btn">
|
|
{Extra && <Extra className="h-4 w-4" aria-hidden="true" />}
|
|
{rotulo}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="shell mt-10">
|
|
<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">
|
|
<span className="chip chip-accent">
|
|
<Box className="h-3.5 w-3.5" aria-hidden="true" />
|
|
{isEs ? "Arquitectura modular" : isEn ? "Modular architecture" : isFr ? "Architecture modulaire" : isZh ? "模块化架构" : 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">
|
|
{isEs ? (
|
|
<>
|
|
Instale controladores de pantalla (LVGL), pilas industriales (Modbus), integraciones en la nube y paquetes de soporte para placas
|
|
(BSPs) con una sola línea en su manifiesto <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>.
|
|
</>
|
|
) : isEn ? (
|
|
<>
|
|
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>.
|
|
</>
|
|
) : isZh ? ( <>
|
|
通过 <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> 清单中的一行，即可安装显示驱动（LVGL）、工业协议栈（Modbus）、云功能和开发板包（BSP）。
|
|
</> ) : 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
|
|
(BSPs) com uma linha no manifesto <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>.
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<Link href={getLocalizedHref("/componentes", currentLocale)} className="btn btn-primary shrink-0">
|
|
{isEs ? "Explorar componentes" : isEn ? "Explore components" : isFr ? "Explorer les composants" : isZh ? "探索组件" : isDe ? "Komponenten erkunden" : "Explorar componentes"}
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="shell section" aria-labelledby="todos-titulo">
|
|
<SectionHead
|
|
id="todos-titulo"
|
|
eyebrow={isEs ? "Todos" : isEn ? "All" : "Todos"}
|
|
title={isEs ? "Todos los frameworks" : isEn ? "All frameworks" : isFr ? "Tous les frameworks" : isZh ? "全部框架" : 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." : isZh ? "每张卡片包含功能、理想应用场景、代码示例和官方链接。" : 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">
|
|
{frameworks.map(([key, framework]) => (
|
|
<Link key={key} href={getLocalizedHref(`/frameworks/${encodeURIComponent(key)}`, currentLocale)} className="card card-interactive group flex flex-col p-5 sm:p-6">
|
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
<h3 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">{framework.nome}</h3>
|
|
<span className="chip max-w-full">{framework.linguagem}</span>
|
|
</div>
|
|
<p className="mt-1 text-sm text-muted">{framework.tipo}</p>
|
|
<p className="mt-3 line-clamp-3 text-sm leading-relaxed text-muted">{framework.descricao}</p>
|
|
|
|
<ul className="mt-5 flex flex-1 flex-wrap content-start gap-1.5">
|
|
{framework.casos_uso.slice(0, 3).map((caso) => (
|
|
<li key={caso} className="chip max-w-full">
|
|
<span className="truncate">{caso}</span>
|
|
</li>
|
|
))}
|
|
</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" : isFr ? "Voir les détails et l'exemple" : isZh ? "查看详情与示例" : 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>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|