250 lines
9.4 KiB
TypeScript
250 lines
9.4 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 { cookies, headers } from 'next/headers';
|
|
import './globals.css';
|
|
import { NavLink } from '@/components/NavLink';
|
|
import { SubpageNav } from '@/components/SubpageNav';
|
|
import { MobileNav } from '@/components/MobileNav';
|
|
import { ThemeToggle } from '@/components/ThemeToggle';
|
|
import { ScrollToTop } from '@/components/ScrollToTop';
|
|
import { Footer } from '@/components/Footer';
|
|
import { SetupScreen } from '@/components/SetupScreen';
|
|
import { getConfigOrNull, getThemeFontsUrl, AppConfig } from '@/lib/config';
|
|
import { accentForMode, accentText, onAccent } from '@/lib/config/theme';
|
|
import { isAdminPath } from '@/lib/admin/paths';
|
|
import { isInstallPath } from '@/lib/install';
|
|
import { isSiteLocked, isSiteUnlocked } from '@/lib/auth';
|
|
import { ogImageUrl } from '@/lib/ogImage';
|
|
import { THEME_INIT_SCRIPT } from '@/lib/themeScript';
|
|
// DevToolbarLoader is a Client Component (ssr: false is only allowed there)
|
|
import { DevToolbarLoader } from '@/components/DevToolbarLoader';
|
|
import AssetProtection from '@/components/AssetProtection';
|
|
import AnalyticsTracker from '@/components/AnalyticsTracker';
|
|
import { I18nProvider } from '@/components/I18nProvider';
|
|
import { resolveLocale, getDictionary } from '@/lib/i18n';
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const config = getConfigOrNull();
|
|
if (!config) {
|
|
// Nothing to describe, and nothing that should be indexed while broken.
|
|
return {
|
|
title: 'Setup Required',
|
|
robots: { index: false, follow: false },
|
|
icons: { icon: '/api/favicon' },
|
|
};
|
|
}
|
|
|
|
const siteTitle = config.seo.title;
|
|
const siteDescription = config.seo.description;
|
|
// A site behind a password has nothing to offer a crawler, and the SEO
|
|
// toggles are about a *public* site — so the lock overrides them rather
|
|
// than depending on the operator also remembering to set noIndex.
|
|
const locked = isSiteLocked();
|
|
const robots = {
|
|
index: !locked && !config.seo.noIndex,
|
|
follow: !locked && !config.seo.noFollow,
|
|
};
|
|
|
|
return {
|
|
// Without this, Next resolves Open Graph and canonical URLs against
|
|
// localhost. Absent when nobody configured a site URL, which leaves the
|
|
// previous behaviour rather than inventing a host.
|
|
...(config.siteUrl ? { metadataBase: new URL(config.siteUrl) } : {}),
|
|
title: {
|
|
default: siteTitle,
|
|
template: config.seo.titleTemplate,
|
|
},
|
|
description: siteDescription,
|
|
robots,
|
|
icons: {
|
|
icon: '/api/favicon',
|
|
apple: '/apple-touch-icon.png',
|
|
},
|
|
openGraph: {
|
|
title: siteTitle,
|
|
description: siteDescription,
|
|
type: 'website',
|
|
images: [ogImageUrl(siteTitle)],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: siteTitle,
|
|
description: siteDescription,
|
|
images: [ogImageUrl(siteTitle)],
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
|
const config = getConfigOrNull();
|
|
const requestHeaders = await headers();
|
|
const pathname = requestHeaders.get('x-pathname');
|
|
|
|
// gallery.yaml exists but cannot be derived — an empty gallery, a nameless
|
|
// subpage, a subpage with no albums. The admin page builder can write all
|
|
// three, and this layout is what /admin renders inside, so throwing here
|
|
// would take down the only tool that can undo the save. Render the minimum
|
|
// that keeps /admin usable and show everyone else the setup screen.
|
|
if (!config) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<body>{isAdminPath(pathname) || isInstallPath(pathname) ? children : <SetupScreen />}</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
const { theme } = config;
|
|
const fontsUrl = getThemeFontsUrl(theme);
|
|
|
|
const themeVars: Record<string, string> = {
|
|
// One accent per colour mode; tokens.css picks the active one as --accent,
|
|
// so the mode toggle switches it without a server round trip.
|
|
'--accent-dark': accentForMode(theme, 'dark'),
|
|
'--accent-light': accentForMode(theme, 'light'),
|
|
'--on-accent-dark': onAccent(accentForMode(theme, 'dark')),
|
|
'--on-accent-light': onAccent(accentForMode(theme, 'light')),
|
|
'--accent-text-dark': accentText(accentForMode(theme, 'dark'), 'dark'),
|
|
'--accent-text-light': accentText(accentForMode(theme, 'light'), 'light'),
|
|
'--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`,
|
|
};
|
|
|
|
// /admin and /install stay reachable during setup — /admin is the tool that
|
|
// completes an existing setup, /install is the wizard that performs the first
|
|
// one, so the setup screen must not lock either of them out (#326).
|
|
if (
|
|
(config as AppConfig & { needsSetup?: boolean }).needsSetup &&
|
|
!isAdminPath(pathname) &&
|
|
!isInstallPath(pathname)
|
|
) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<body>
|
|
<SetupScreen />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
const isAdmin = isAdminPath(pathname);
|
|
const isProofPage =
|
|
pathname?.startsWith('/proof/') === true ||
|
|
pathname?.startsWith('/c/') === true;
|
|
const locale = resolveLocale(config.lang);
|
|
const t = getDictionary(locale);
|
|
|
|
/*
|
|
* Whether this render is the site-wide gate. The gate itself is a page
|
|
* (`app/gate/page.tsx`) that `proxy.ts` rewrites to; all the layout does is
|
|
* strip the chrome around it, because a header listing every subpage would
|
|
* give away the shape of a site that is supposed to be shut.
|
|
*
|
|
* The same holds for the pages the proxy serves to a locked site
|
|
* (`UNGATED_PAGES` in proxy.ts): /impressum, /privacy and /contact render
|
|
* bare here until the visitor has unlocked the site.
|
|
*/
|
|
const cookieStore = await cookies();
|
|
const siteGated =
|
|
!isAdmin && !isInstallPath(pathname) && !isSiteUnlocked((name) => cookieStore.get(name)?.value);
|
|
|
|
return (
|
|
<html
|
|
lang={config.lang || 'en'}
|
|
suppressHydrationWarning
|
|
style={themeVars as React.CSSProperties}
|
|
data-preset={theme.preset}
|
|
data-grain={String(theme.grain)}
|
|
data-header-dot={String(theme.headerDot)}
|
|
data-photo-frame={theme.photoFrame}
|
|
data-transitions={String(config.transitions)}
|
|
/* The configured starting mode is rendered server-side so the first paint
|
|
is already right; `auto` deliberately carries no data-theme and lets the
|
|
inline script below decide from the OS. data-default-theme is what
|
|
that script and ThemeToggle read for a visitor who has never chosen
|
|
(#512). */
|
|
{...(config.colorMode === 'auto' ? {} : { 'data-theme': config.colorMode })}
|
|
data-default-theme={config.colorMode}
|
|
>
|
|
<head>
|
|
{/* Applies a stored or OS-derived mode before the first paint, on
|
|
every page this layout renders — the gate and /admin included.
|
|
The nonce is the one proxy.ts put in the CSP; without it the
|
|
script is blocked silently. */}
|
|
<script
|
|
nonce={requestHeaders.get('x-nonce') ?? undefined}
|
|
suppressHydrationWarning
|
|
dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
|
|
/>
|
|
<link rel="stylesheet" href={fontsUrl} />
|
|
</head>
|
|
<body>
|
|
<I18nProvider locale={locale}>
|
|
{siteGated || isAdmin ? (
|
|
children
|
|
) : isProofPage ? (
|
|
<>
|
|
<main id="main-content" tabIndex={-1} className="main">
|
|
{children}
|
|
</main>
|
|
|
|
<AssetProtection
|
|
disableRightClick={config.protection?.disableRightClick}
|
|
disableImageDrag={config.protection?.disableImageDrag}
|
|
/>
|
|
|
|
<AnalyticsTracker />
|
|
</>
|
|
) : (
|
|
<>
|
|
<a href="#main-content" className="skip-link">
|
|
{t.nav.skipToContent}
|
|
</a>
|
|
|
|
<header className="header">
|
|
<nav className="header__nav" aria-label={t.nav.mainNavAria}>
|
|
<span className="header__wordmark" aria-hidden="true">
|
|
{config.siteTitle}
|
|
</span>
|
|
|
|
<MobileNav>
|
|
<NavLink href="/">{t.nav.home}</NavLink>
|
|
<SubpageNav />
|
|
</MobileNav>
|
|
|
|
<ThemeToggle />
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content" tabIndex={-1} className="main">
|
|
{children}
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
{config.scrollToTop && <ScrollToTop />}
|
|
|
|
<AssetProtection
|
|
disableRightClick={config.protection?.disableRightClick}
|
|
disableImageDrag={config.protection?.disableImageDrag}
|
|
/>
|
|
|
|
<AnalyticsTracker />
|
|
|
|
{process.env.NODE_ENV === 'development' && <DevToolbarLoader />}
|
|
</>
|
|
)}
|
|
</I18nProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|