99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
|
import "@/theme/globals.css";
|
|
|
|
/**
|
|
* Root Layout
|
|
*
|
|
* This layout is designed to work with the 9-category parameter system.
|
|
* It supports:
|
|
* - Dynamic locale (from spec.client.locale or content.defaultLanguage)
|
|
* - Google Fonts loading (from spec.brand.fonts)
|
|
* - Scroll behavior (from spec.interaction.scrollBehavior)
|
|
* - Meta tags for SEO
|
|
*
|
|
* CUSTOMIZATION INSTRUCTIONS:
|
|
* 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
|
|
* 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
|
|
* 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
|
|
* 4. Update metadata based on spec.brand and spec.seo
|
|
*/
|
|
|
|
// TODO: Update these values based on ProjectSpec.json
|
|
// - title: from spec.brand.name or spec.meta.projectName
|
|
// - description: from spec.brand.description
|
|
// - keywords: from spec.seo.primaryKeywords
|
|
export const metadata: Metadata = {
|
|
title: "Website",
|
|
description: "Generated website",
|
|
robots: {
|
|
index: true,
|
|
follow: true,
|
|
},
|
|
// Open Graph tags - update based on spec
|
|
openGraph: {
|
|
type: "website",
|
|
locale: "de_DE",
|
|
// title, description, images will be set per project
|
|
},
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
|
|
themeColor: "#ffffff",
|
|
};
|
|
|
|
/**
|
|
* Font Loading
|
|
*
|
|
* To add Google Fonts based on spec.brand.fonts:
|
|
*
|
|
* 1. Import from next/font/google:
|
|
* import { Inter, Playfair_Display } from "next/font/google";
|
|
*
|
|
* 2. Configure fonts:
|
|
* const headingFont = Playfair_Display({
|
|
* subsets: ["latin"],
|
|
* variable: "--font-heading",
|
|
* display: "swap",
|
|
* });
|
|
*
|
|
* const bodyFont = Inter({
|
|
* subsets: ["latin"],
|
|
* variable: "--font-body",
|
|
* display: "swap",
|
|
* });
|
|
*
|
|
* 3. Apply to html element:
|
|
* <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
|
|
*
|
|
* 4. Update globals.css to use the variables:
|
|
* --font-sans: var(--font-body), system-ui, sans-serif;
|
|
* --font-heading: var(--font-heading), Georgia, serif;
|
|
*/
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
// TODO: Update lang attribute based on spec.client.locale
|
|
// Examples: "de", "de-AT", "de-CH", "en", "en-US"
|
|
const locale = "de";
|
|
|
|
return (
|
|
<html lang={locale}>
|
|
{/*
|
|
Scroll Behavior:
|
|
- If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
|
|
- Or set scroll-behavior: smooth in globals.css on html element
|
|
|
|
Example with smooth scrolling:
|
|
<html lang={locale} className="scroll-smooth">
|
|
*/}
|
|
<body>{children}</body>
|
|
</html>
|
|
);
|
|
}
|