64 lines
2.8 KiB
Plaintext
64 lines
2.8 KiB
Plaintext
---
|
|
import '../styles/base.css';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import { langFromUrl, switchLang, t, type Lang } from '../i18n/ui';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
lang?: Lang;
|
|
ogImage?: string;
|
|
/** Pages that only make sense as the answer to an action, such as the contact form result. */
|
|
noindex?: boolean;
|
|
/** The surface the page opens on. 'night' for pages that start on a dark hero, so the header
|
|
is drawn in its night tone from the first frame instead of switching after load. */
|
|
tone?: 'paper' | 'night';
|
|
}
|
|
|
|
const lang: Lang = Astro.props.lang ?? langFromUrl(Astro.url);
|
|
const { title, description, noindex, tone = 'paper' } = Astro.props;
|
|
const ui = t(lang);
|
|
const fullTitle = title === ui.meta.home.title ? title : `${title}. ${ui.meta.siteName}`;
|
|
const canonical = new URL(Astro.url.pathname, Astro.site);
|
|
const altEn = new URL(switchLang(Astro.url, 'en'), Astro.site);
|
|
const altDe = new URL(switchLang(Astro.url, 'de'), Astro.site);
|
|
---
|
|
<!doctype html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>{fullTitle}</title>
|
|
<meta name="description" content={description} />
|
|
{noindex && <meta name="robots" content="noindex" />}
|
|
<meta name="color-scheme" content="light" />
|
|
<!-- Tints the browser chrome (the iOS status bar) to match the surface the page opens on:
|
|
--night for a dark hero, --paper otherwise. The header script updates it on scroll. -->
|
|
<meta name="theme-color" content={tone === 'night' ? '#0E100F' : '#E9E5DF'} />
|
|
<link rel="canonical" href={canonical} />
|
|
<link rel="alternate" hreflang="en" href={altEn} />
|
|
<link rel="alternate" hreflang="de" href={altDe} />
|
|
<link rel="alternate" hreflang="x-default" href={altEn} />
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="preload" href="/fonts/inter-tight-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content={ui.meta.siteName} />
|
|
<meta property="og:title" content={fullTitle} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:url" content={canonical} />
|
|
<meta property="og:locale" content={lang === 'de' ? 'de_DE' : 'en_GB'} />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<script is:inline>document.documentElement.classList.add('js');</script>
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main">{ui.nav.skip}</a>
|
|
<Header lang={lang} tone={tone} />
|
|
<main id="main" tabindex="-1">
|
|
<slot />
|
|
</main>
|
|
<Footer lang={lang} />
|
|
</body>
|
|
</html>
|