ESPDocs/app/[locale]/componentes/layout.jsx

import { paginaMeta, jsonLd } from "@/lib/seo";

export async function generateMetadata({ params }) {
	const { locale } = await params;
	const isEn = locale === "en";
	return paginaMeta({
		titulo: isEn
			? "ESP Component Registry & IDF Component Manager · ESPDocs"
			: "ESP Component Registry & IDF Component Manager · ESPDocs",
		descricao: isEn
			? "Official interactive catalog of the ESP Component Registry: display drivers, LVGL, ESP-SR voice recognition, RainMaker, BSPs, and 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,
		keywords: isEn
			? [
					"ESP Component Registry",
					"IDF Component Manager",
					"idf_component.yml",
					"idf.py add-dependency",
					"ESP32 components",
					"espressif esp_lvgl_port",
					"espressif esp_rainmaker",
					"espressif esp-sr",
					"ESP-IDF libraries",
				]
			: [
					"ESP Component Registry",
					"IDF Component Manager",
					"idf_component.yml",
					"idf.py add-dependency",
					"componentes ESP32",
					"espressif esp_lvgl_port",
					"espressif esp_rainmaker",
					"espressif esp-sr",
					"bibliotecas ESP-IDF",
				],
	});
}

const faqsPt = [
	{
		pergunta: "O que é o ESP Component Registry e o IDF Component Manager?",
		resposta: "O ESP Component Registry (components.espressif.com) é o repositório oficial de pacotes modulares da Espressif. O IDF Component Manager é a ferramenta integrada ao ESP-IDF (a partir do v4.4 e padrão no v5.x+) que baixa, compila e resolve versões de dependências automaticamente a partir do manifesto idf_component.yml.",
	},
	{
		pergunta: "Como adicionar um componente ao meu projeto ESP-IDF?",
		resposta: "Você pode executar o comando 'idf.py add-dependency \"namespace/componente^versao\"' no terminal do projeto (por exemplo: idf.py add-dependency \"espressif/esp_lvgl_port^2.4.0\") ou editar diretamente o arquivo main/idf_component.yml.",
	},
	{
		pergunta: "Qual a diferença entre usar o Component Registry e git submodules?",
		resposta: "O Component Registry elimina a complexidade de gerenciar submódulos Git pesados e versões manuais. Ele oferece versionamento semântico (^ e ~), resolução automática de dependências transitivas e compilação modular sob demanda.",
	},
	{
		pergunta: "Posso criar e publicar meus próprios componentes?",
		resposta: "Sim, qualquer desenvolvedor ou empresa pode publicar componentes públicos ou privados no ESP Component Registry utilizando a ferramenta oficial Compote CLI (pip install idf-component-manager).",
	},
];

const faqsEn = [
	{
		pergunta: "What is the ESP Component Registry and IDF Component Manager?",
		resposta: "The ESP Component Registry (components.espressif.com) is the official central repository for modular Espressif packages. The IDF Component Manager is integrated into ESP-IDF (v4.4+ and default in v5.x+) to automatically download, compile, and resolve dependency versions from an idf_component.yml manifest.",
	},
	{
		pergunta: "How to add a component to an ESP-IDF project?",
		resposta: "You can run 'idf.py add-dependency \"namespace/component^version\"' in your project terminal (for example: idf.py add-dependency \"espressif/esp_lvgl_port^2.4.0\") or edit main/idf_component.yml directly.",
	},
	{
		pergunta: "What is the difference between using Component Registry and git submodules?",
		resposta: "The Component Registry eliminates the complexity of managing heavy Git submodules and manual tracking. It provides semantic versioning (^ and ~), automatic transitive dependency resolution, and modular on-demand compilation.",
	},
	{
		pergunta: "Can I create and publish my own components?",
		resposta: "Yes, any developer or company can publish public or private components to the ESP Component Registry using the official Compote CLI tool (pip install idf-component-manager).",
	},
];

export default async function ComponentesLayout({ children, params }) {
	const { locale } = await params;
	const isEn = locale === "en";
	const faqs = isEn ? faqsEn : faqsPt;

	return (
		<>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{
					__html: JSON.stringify(
						jsonLd.trilha([
							{ nome: isEn ? "Home" : "Início", caminho: isEn ? "/en" : "/" },
							{ nome: "ESP Component Registry", caminho: isEn ? "/en/components" : "/componentes" },
						])
					),
				}}
			/>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{
					__html: JSON.stringify(jsonLd.perguntas(faqs)),
				}}
			/>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{
					__html: JSON.stringify(
						jsonLd.aplicacaoWeb({
							nome: isEn ? "ESP Component Registry Hub & Manifest Builder" : "Hub do ESP Component Registry & Construtor de Manifesto",
							descricao: isEn
								? "Curated catalog and idf_component.yml manifest generator for modular ESP-IDF components."
								: "Catálogo curado e gerador de manifesto idf_component.yml para componentes modulares do ESP-IDF.",
							caminho: isEn ? "/en/components" : "/componentes",
							locale,
						})
					),
				}}
			/>
			{children}
		</>
	);
}