zenno: add page titles and descriptions

zenno/src/routes/+layout.svelte

@@ -1,13 +1,31 @@
 <script lang="ts">
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.png';
+	import * as all from '$lib/all';
 	import { resolve } from '$app/paths';
+	import type { LayoutProps } from './$types';
+	import { page } from '$app/state';
 
-	let { children } = $props();
+	let { children }: LayoutProps = $props();
+
+	const cur = $derived(all.page(page.route.id));
+	const title = $derived(cur.name);
+	const desc = $derived(
+		cur.description ??
+			"She's read all about Umamusume, and she's always happy to share her knowledge and give recommendations! Tools and editorials for Umamusume optimization.",
+	);
 </script>
 
 <svelte:head>
-	<title>Zenno Rob Roy</title>
+	{#if title != null}
+		<title>Zenno Rob Roy &ndash; {title}</title>
+	{:else}
+		<title>Zenno Rob Roy</title>
+	{/if}
+	<meta name="description" content={desc} />
+	<meta name="color-scheme" content="light dark" />
+	<meta name="referrer" content="strict-origin-when-cross-origin" />
+	<meta name="robots" content="noimageindex" />
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
@@ -23,9 +41,9 @@
 			<a href={resolve('/doc')} class="mx-8 my-1 inline-block">Documents</a>
 		</span>
 	</nav>
-	<div class="mx-4 grow lg:m-auto lg:max-w-7xl lg:min-w-7xl">
+	<main class="mx-4 grow lg:m-auto lg:max-w-7xl lg:min-w-7xl">
 		{@render children()}
-	</div>
+	</main>
 	<footer
 		class="inset-x-0 bottom-0 mt-12 border-t bg-mist-300 p-4 text-center text-sm md:mt-20 dark:border-none dark:bg-mist-900"
 	>