ESPDocs/app/layout.jsx

import { JetBrains_Mono, Manrope, Space_Grotesk } from "next/font/google";
import "./globals.css";
import Providers from "@/components/Providers";
import { SITE, jsonLd } from "@/lib/seo";

const spaceGrotesk = Space_Grotesk({
	subsets: ["latin"],
	variable: "--font-space-grotesk",
	display: "swap",
	weight: ["500", "600", "700"],
});

const manrope = Manrope({
	subsets: ["latin"],
	variable: "--font-manrope",
	display: "swap",
	weight: ["400", "500", "600", "700"],
});

const jetbrainsMono = JetBrains_Mono({
	subsets: ["latin"],
	variable: "--font-jetbrains",
	display: "swap",
	weight: ["400", "500", "600"],
});

export const metadata = {
	// metadataBase é o que transforma caminhos relativos em URLs absolutas nas
	// tags canonical e og:image. Sem ele, o Google recebe og:image quebrado.
	metadataBase: new URL(SITE.url),

	title: {
		default: "ESPDocs · Documentação do ESP32 em português",
		// Cada página fornece só o próprio nome; o sufixo entra automaticamente.
		template: "%s · ESPDocs",
	},
	description:
		"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.",

	applicationName: "ESPDocs",
	authors: [{ name: "Lucas Rayan Guerra", url: "https://lucasrguerra.dev.br" }],
	creator: "Lucas Rayan Guerra",
	publisher: "Ciência Embarcada",
	category: "technology",

	keywords: [
		"ESP32", "ESP32 português", "documentação ESP32", "pinout ESP32",
		"ESP32-S3", "ESP32-C3", "ESP32-C6", "ESP32-P4", "ESP32-H2",
		"comparar ESP32", "qual ESP32 escolher", "datasheet ESP32",
		"microcontrolador", "Espressif", "ESP-IDF", "IoT", "sistemas embarcados",
	],

	alternates: { canonical: "/" },

	openGraph: {
		type: "website",
		locale: "pt_BR",
		url: SITE.url,
		siteName: "ESPDocs",
		title: "ESPDocs · Documentação do ESP32 em português",
		description:
			"Especificações, pinagem, comparação e seleção das 12 séries de microcontroladores ESP32, em português brasileiro.",
	},

	twitter: {
		card: "summary_large_image",
		title: "ESPDocs · Documentação do ESP32 em português",
		description:
			"Especificações, pinagem, comparação e seleção das 12 séries de ESP32, em português.",
	},

	robots: {
		index: true,
		follow: true,
		googleBot: {
			index: true,
			follow: true,
			"max-image-preview": "large",
			"max-snippet": -1,
			"max-video-preview": -1,
		},
	},

	icons: {
		icon: [
			{ url: "/favicon.ico", sizes: "48x48", type: "image/x-icon" },
			{ url: "/favicon-48x48.png", sizes: "48x48", type: "image/png" },
			{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
			{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
			{ url: "/icon-192.png", sizes: "192x192", type: "image/png" },
			{ url: "/icon-512.png", sizes: "512x512", type: "image/png" },
			{ url: "/icon.svg", type: "image/svg+xml" },
		],
		apple: [
			{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
		],
		shortcut: "/favicon.ico",
	},
	manifest: "/site.webmanifest",
	formatDetection: { telephone: false, address: false, email: false },
};

export const viewport = {
	themeColor: [
		{ media: "(prefers-color-scheme: light)", color: "#f5f6f8" },
		{ media: "(prefers-color-scheme: dark)", color: "#07090d" },
	],
};

export default function RootLayout({ children }) {
	return (
		<html lang="pt-BR" className={`${spaceGrotesk.variable} ${manrope.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
			<head>
				{/* Dados estruturados do site e da organização. É o que permite ao
				    Google montar o box de busca interna e entender a autoria. */}
				<script
					type="application/ld+json"
					dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd.siteESociedade()) }}
				/>
			</head>
			<body className="font-sans antialiased bg-canvas text-ink overflow-x-clip" 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"
				>
					Pular para o conteúdo
				</a>
				<Providers>
					{children}
				</Providers>
			</body>
		</html>
	);
}