feat: Implement the 9-category parameter system by updating the root layout for dynamic configuration and enhancing the Definition of Done with detailed checklists.

2026-02-03 08:37:36 +01:00
parent 643231b7b0
commit 6c7ae06e58
7 changed files with 786 additions and 14 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,27 @@
 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",
@@ -8,21 +29,69 @@ export const metadata: Metadata = {
    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="de">
+    <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>
  );