a9737ad8e7
- Add configurable theme system with 4 presets (studio, minimal, editorial, classic) - Theme controls fonts, colors, accent, photo frames, grain, and header dot - Resolve themes from gallery.yaml: string shorthand or full object override - Inject theme as CSS custom properties on <html> element - Dynamic Google Fonts loading based on theme config - OG image route reads accent/background from theme - Refactor Studio overrides into conditional CSS via data-attributes Documentation: - Add docs/gallery-config.md with comprehensive configuration reference - Add docs/theming.md with preset reference and custom theme guide - Slim README to link to detailed docs Fix CSS regression: - Fix passepartout frame overflow:visible breaking next/image fill rendering - Remove duplicate .photo-grid__item block that stripped overflow:hidden Testing: - Add e2e/photo-grid.spec.ts with 3 regression tests: - Grid items render with real dimensions - overflow:hidden CSS guard (catches the exact bug fixed) - Images load with real pixel data (not blurhash) Tooling: - Add scripts/screenshots.ts for automated theme screenshot generation - Handles dev server lifecycle, theme cycling, FadeIn + lazy image handling
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
/**
|
|
* Root layout — site header with portfolio-style navigation.
|
|
* Shows all subpages + standalone albums as nav links.
|
|
* Injects theme CSS custom properties from gallery.yaml config.
|
|
*/
|
|
|
|
import type { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import './globals.css';
|
|
import { SubpageNav } from '@/components/SubpageNav';
|
|
import { ThemeToggle } from '@/components/ThemeToggle';
|
|
import { ScrollToTop } from '@/components/ScrollToTop';
|
|
import { Footer } from '@/components/Footer';
|
|
import { getConfig, getGoogleFontsUrl } from '@/lib/config';
|
|
|
|
const siteTitle = process.env.SITE_TITLE || 'Gallery';
|
|
const siteDescription = 'A curated photography portfolio';
|
|
|
|
export const metadata: Metadata = {
|
|
title: siteTitle,
|
|
description: siteDescription,
|
|
icons: {
|
|
apple: '/apple-touch-icon.png',
|
|
},
|
|
openGraph: {
|
|
title: siteTitle,
|
|
description: siteDescription,
|
|
type: 'website',
|
|
images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: siteTitle,
|
|
description: siteDescription,
|
|
images: [`/api/og?title=${encodeURIComponent(siteTitle)}`],
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
const { theme } = getConfig();
|
|
const fontsUrl = getGoogleFontsUrl(theme);
|
|
|
|
// Inject theme values as CSS custom properties
|
|
const themeVars: Record<string, string> = {
|
|
'--accent': theme.accent,
|
|
'--accent-dim': `${theme.accent}1f`,
|
|
'--font-serif': `'${theme.fonts.heading}', Georgia, 'Times New Roman', serif`,
|
|
'--font-sans': `'${theme.fonts.body}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
|
|
'--font-caption': `'${theme.fonts.caption}', Georgia, serif`,
|
|
'--radius-sm': `${theme.radius}px`,
|
|
'--radius-md': `${Math.round(theme.radius * 1.5)}px`,
|
|
'--radius-lg': `${theme.radius * 2}px`,
|
|
};
|
|
|
|
return (
|
|
<html
|
|
lang="en"
|
|
suppressHydrationWarning
|
|
style={themeVars as React.CSSProperties}
|
|
data-grain={theme.grain}
|
|
data-header-dot={theme.headerDot}
|
|
data-photo-frame={theme.photoFrame}
|
|
>
|
|
<head>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
<link rel="stylesheet" href={fontsUrl} />
|
|
</head>
|
|
<body>
|
|
<header className="header">
|
|
<nav className="header__nav">
|
|
<Link href="/" className="header__nav-link">
|
|
Home
|
|
</Link>
|
|
<SubpageNav />
|
|
<Link href="/about" className="header__nav-link">
|
|
About
|
|
</Link>
|
|
<ThemeToggle />
|
|
</nav>
|
|
</header>
|
|
<main className="main">{children}</main>
|
|
<Footer />
|
|
<ScrollToTop />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|