refactor: add missing navigation aria sections

src/pages/haiku.astro

@@ -23,7 +23,7 @@ allHaiku.sort(sortByDate).reverse();
 		<Intro components={mapping} />
 	</article>
 
-	<div class="col-start-1 col-end-17 md:col-start-2 md:col-end-14">
+	<nav class="col-start-1 col-end-17 md:col-start-2 md:col-end-14" aria-label="Haiku">
 		<ol class="grid list-none grid-cols-haiku-list justify-items-center gap-[1rem]">
 			{
 				allHaiku.map(({ slug }) => (
@@ -39,5 +39,5 @@ allHaiku.sort(sortByDate).reverse();
 				))
 			}
 		</ol>
-	</div>
+	</nav>
 </GridLayout>

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

@@ -0,0 +1,72 @@
+---
+import { getCollection } from 'astro:content';
+
+import { sortBySortKey } from '../../utils/sort-by-sortkey';
+
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHeader from '../../components/PageHeader.astro';
+import Pagination from '../../components/Pagination.astro';
+import { Headline } from '../../components';
+
+import { mapping } from '../../mdx-components';
+
+export async function getStaticPaths() {
+	const sketchnotesEntries = await getCollection('sketchnotes');
+	const numberOfPages = sketchnotesEntries.length;
+	sketchnotesEntries.sort(sortBySortKey).reverse();
+
+	return sketchnotesEntries.map((entry, index) => ({
+		params: { slug: entry.slug },
+		props: {
+			entry,
+			next:
+				index + 1 === numberOfPages
+					? { slug: null, data: null }
+					: sketchnotesEntries[index + 1],
+			prev: index === 0 ? {} : sketchnotesEntries[index - 1],
+		},
+	}));
+}
+
+const { entry, prev, next } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<BaseLayout title={entry.data.title} 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"
+			navigation={false}
+			backLink="/sketchnotes/"
+		/>
+		<div
+			class="haiku:grid-cols-haiku-xl col-span-full row-start-1 row-end-3 grid w-full grid-cols-haiku"
+		>
+			<div class="grid h-full w-full items-center">
+				<div>
+					<Headline>{entry.data.title}</Headline>
+					<Content components={mapping} />
+				</div>
+			</div>
+			<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
+				{
+					entry.data.images.map(({ src }: { src: string }) => (
+						<div class="grid h-full w-full items-center">
+							<img
+								alt={entry.data.title}
+								class="h-full w-full object-cover"
+								src={src}
+							/>
+						</div>
+					))
+				}
+			</div>
+		</div>
+		<Pagination
+			nextText={'Next'}
+			nextUrl={next.slug && `/sketchnotes/${next.slug}`}
+			previousText={'Next'}
+			previousUrl={prev.slug && `/sketchnotes/${prev.slug}`}
+		/>
+	</div>
+</BaseLayout>