refactor: add missing navigation aria sections

src/components/MainNavigation.astro

@@ -8,7 +8,11 @@ import navigation from '../data/navigation.json';
 const currentPath = new URL(Astro.request.url).pathname;
 ---
 
-<nav class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3" role="navigation">
+<nav
+	class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
+	role="navigation"
+	aria-label="Main"
+>
 	<ul class="flex flex-wrap">
 		{
 			navigation.map(({ title, url }) => (

src/components/SocialLinks.astro

@@ -6,7 +6,7 @@ import { Link } from '.';
 import data from '../data/social-links.json';
 ---
 
-<div class="flex flex-1 sm:justify-center">
+<nav class="flex flex-1 sm:justify-center" aria-label="Social Links">
 	{
 		data.map(({ text, url, icon, props = {} }) => (
 			<Link
@@ -20,4 +20,4 @@ import data from '../data/social-links.json';
 			</Link>
 		))
 	}
-</div>
+</nav>

src/components/Subnavigation.astro

@@ -8,7 +8,7 @@ import { Link } from '.';
 const currentPath = new URL(Astro.request.url).pathname;
 ---
 
-<div class="glow flex gap-12">
+<nav class="glow flex gap-12" aria-label="Subnavigation">
 	<ul>
 		{
 			data.main.map(({ title, url }) => (
@@ -42,4 +42,4 @@ const currentPath = new URL(Astro.request.url).pathname;
 			))
 		}
 	</ul>
-</div>
+</nav>

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>