chore: add title and description to all pages

src/pages/404.astro

@@ -6,9 +6,12 @@ import { Verse } from '../components';
 
 import { Content as Haiku } from '../text/404/haiku.mdx';
 import { mapping } from '../mdx-components';
+
+const title = 'Error 404';
+const description = 'Page not found.';
 ---
 
-<GridLayout title="Error 404" grid="wide" class="grid" innerGrid>
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>Not Found.</PageTitle>
 	<Verse
 		class="z-10 col-start-1 col-end-17 row-start-2 text-3 italic mbe-10 mbs-10 md:col-start-3 md:col-end-9"

src/pages/ai-art.astro

@@ -15,9 +15,12 @@ import { mapping } from '../mdx-components';
 
 const allAiArt = await getCollection('ai-art');
 allAiArt.sort(sortBySortKey);
+
+const title = 'AI Art';
+const description = '…';
 ---
 
-<GridLayout title="Sketchnotes" grid="wide" class="grid" innerGrid>
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>AI Art</PageTitle>
 
 	<article

src/pages/ai-art/[...slug].astro

@@ -28,12 +28,15 @@ export async function getStaticPaths() {
 
 const { entry, prev, next } = Astro.props;
 const { Content } = await entry.render();
+
+const title = entry.data.title;
+const description = '…';
 ---
 
-<BaseLayout title={entry.data.title} header={false} footer={false}>
+<BaseLayout title={title} description={description} header={false} footer={false}>
 	<div class="grid h-full grid-cols-18">
 		<PageHeader
-			class="!mbe-0 z-10 col-span-full row-start-1 bg-transparent dark:bg-transparent"
+			class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
 			navigation={false}
 			backLink="/ai-art/"
 		/>

src/pages/colophon.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/PageLayout.astro
 title: Colophon
+description: …
 intro: In publishing, a colophon is a brief statement containing information about the publication.
 ---
 

src/pages/haiku.astro

@@ -12,9 +12,12 @@ import { mapping } from '../mdx-components';
 
 const allHaiku = await getCollection('haiku');
 allHaiku.sort(sortByDate).reverse();
+
+const title = 'Haiku';
+const description = '…';
 ---
 
-<GridLayout title="Haiku" grid="wide" class="grid" innerGrid>
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>Haiku</PageTitle>
 
 	<article

src/pages/haiku/[...slug].astro

@@ -25,12 +25,15 @@ export async function getStaticPaths() {
 }
 
 const { entry, prev, next } = Astro.props;
+
+const title = `Haiku ${entry.slug}`;
+const description = '…';
 ---
 
-<BaseLayout title={`Haiku ${entry.slug}`} header={false} footer={false}>
+<BaseLayout title={title} description={description} header={false} footer={false}>
 	<div class="grid h-full grid-cols-18 grid-rows-haiku">
 		<PageHeader
-			class="!mbe-0 z-10 col-span-full row-start-1 bg-transparent dark:bg-transparent"
+			class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
 			navigation={false}
 			backLink="/haiku/"
 		/>
@@ -39,14 +42,14 @@ const { entry, prev, next } = Astro.props;
 		>
 			<div class="grid h-full w-full items-center">
 				<Verse
-					class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
+					class="justify-center text-center text-3 font-black not-italic !leading-relaxed haiku:text-4"
 				>
 					{entry.data.de}
 				</Verse>
 			</div>
 			<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
 				<Verse
-					class="text-3 haiku:text-4 font-black justify-center text-center !leading-relaxed not-italic"
+					class="justify-center text-center text-3 font-black not-italic !leading-relaxed haiku:text-4"
 				>
 					{entry.data.en}
 				</Verse>

src/pages/imprint.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/PageLayout.astro
 title: Imprint
+description: …
 ---
 
 import { mapping } from "../mdx-components.ts";

src/pages/index.astro

@@ -1,8 +1,11 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { Headline } from '../components';
+
+const title = 'Homepage';
+const description = '…';
 ---
 
-<BaseLayout title="Homepage">
+<BaseLayout title={title} description={description}>
 	<Headline>Homepage</Headline>
 </BaseLayout>

src/pages/now.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/PageLayout.astro
 title: Now
+description: …
 ---
 
 import { mapping } from "../mdx-components.ts";

src/pages/projects.astro

@@ -12,15 +12,13 @@ import { Content as Intro } from '../text/projects/intro.mdx';
 import { mapping } from '../mdx-components';
 const allProjects = await getCollection('projects');
 allProjects.sort(sortBySortKey).reverse();
+
+const title = 'Projects';
+const description =
+	'I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are  projects I created over the last years.';
 ---
 
-<GridLayout
+<GridLayout title={title} description={description} grid="fullsize" class="grid" innerGrid>
-	title="Projects"
-	description="I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are  projects I created over the last years."
-	grid="fullsize"
-	class="grid"
-	innerGrid
->
 	<PageTitle
 		grid="wide"
 		innerGrid

src/pages/projects/[...slug].astro

@@ -31,9 +31,12 @@ export async function getStaticPaths() {
 
 const { entry, prev, next } = Astro.props;
 const { Content } = await entry.render();
+
+const title = entry.data.title;
+const description = '…';
 ---
 
-<GridLayout title={entry.data.title} grid="wide" innerGrid backLink="/projects/">
+<GridLayout title={title} description={description} grid="wide" innerGrid backLink="/projects/">
 	<PageTitle slot="title">
 		{entry.data.title}
 	</PageTitle>

src/pages/sketchnotes.astro

@@ -15,9 +15,12 @@ import { mapping } from '../mdx-components';
 
 const allSketchnotes = await getCollection('sketchnotes');
 allSketchnotes.sort(sortBySortKey);
+
+const title = 'Sketchnotes';
+const description = 'This is a collection of Sketchnotes I’ve drawn.';
 ---
 
-<GridLayout title="Sketchnotes" grid="wide" class="grid" innerGrid>
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
 
 	<article

src/pages/sketchnotes/[...slug].astro

@@ -30,12 +30,15 @@ export async function getStaticPaths() {
 
 const { entry, prev, next } = Astro.props;
 const { Content } = await entry.render();
+
+const title = entry.data.title;
+const description = '…';
 ---
 
-<BaseLayout title={entry.data.title} header={false} footer={false}>
+<BaseLayout title={title} description={description} header={false} footer={false}>
 	<div class="grid h-full grid-cols-18">
 		<PageHeader
-			class="!mbe-0 z-10 col-span-full row-start-1 bg-transparent dark:bg-transparent"
+			class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
 			navigation={false}
 			backLink="/sketchnotes/"
 		/>

src/pages/tools.mdx

@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/PageLayout.astro
 title: Tools
+description: …
 intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools.
 ---
 

src/pages/traditional-colors-of-japan.astro

@@ -8,9 +8,13 @@ import { Content as Intro } from '../text/traditional-colors-of-japan/intro.mdx'
 import colors from '../data/colors-japan.json';
 
 import { mapping } from '../mdx-components';
+
+const title = 'The Traditional Colors of Japan';
+const description =
+	'I took the time and converted all colors in the book “Traditional Colors of Japan” by Nobyoshi Hamada into an ASE file free to download.';
 ---
 
-<GridLayout title="The Traditional Colors of Japan" grid="wide" class="grid" innerGrid>
+<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>The Traditional Colors of&nbsp;Japan</PageTitle>
 
 	<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center">
@@ -21,12 +25,12 @@ import { mapping } from '../mdx-components';
 		<AmazonBook
 			alt="The Traditional Colors of Japan"
 			asin="475624100X"
-			class="mie-[1.5vw] max-w-[300px] [&_img]:self-end"
+			class="max-w-[300px] mie-[1.5vw] [&_img]:self-end"
 		/>
 		<AmazonBook
 			alt="Traditional Japanese Color Palette"
 			asin="475624114X"
-			class="mis-[1.5vw] max-w-[300px] [&_img]:self-end"
+			class="max-w-[300px] mis-[1.5vw] [&_img]:self-end"
 		/>
 	</article>