99 lines
3.1 KiB
TypeScript
99 lines
3.1 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 { DevToolbar } from '@/components/DevToolbar';
|
|
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 config = getConfig();
|
|
const { theme } = config;
|
|
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-preset={theme.preset}
|
|
data-grain={theme.grain}
|
|
data-header-dot={theme.headerDot}
|
|
data-photo-frame={theme.photoFrame}
|
|
data-transitions={config.transitions}
|
|
>
|
|
<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>
|
|
{config.map && (
|
|
<Link href="/map" className="header__nav-link">
|
|
Map
|
|
</Link>
|
|
)}
|
|
<ThemeToggle />
|
|
</nav>
|
|
</header>
|
|
<main className="main">{children}</main>
|
|
<Footer />
|
|
<ScrollToTop />
|
|
{process.env.NODE_ENV === 'development' && <DevToolbar />}
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|