Add prev/next pager to notes layout

package.json

@@ -43,7 +43,7 @@
 		"prettier-plugin-svelte": "^3.5.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"shiki": "^3.23.0",
-		"simple-icons": "^16.13.0",
+		"simple-icons": "^16.14.0",
 		"svelte": "^5.55.0",
 		"svelte-check": "^4.4.5",
 		"sveltekit-embed": "^0.0.22",

src/lib/components/Pager.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { twMerge } from 'tailwind-merge';
+
+	interface Props {
+		prev?: { title: string; path: string };
+		next?: { title: string; path: string };
+		class?: string;
+	}
+
+	let { prev, next, class: className }: Props = $props();
+</script>
+
+{#if prev || next}
+	<nav
+		class={twMerge(className, 'flex flex-wrap gap-6 border-t-2 border-secondary pt-8 text-primary')}
+	>
+		{#if prev}
+			<div class="grow basis-2xs">
+				<a href={prev.path} class="flex items-start justify-start gap-1">
+					<ChevronLeft class="size-6 pt-1" />
+					<span class="text-xl font-semibold text-pretty max-inline-xs">{prev.title}</span>
+				</a>
+			</div>
+		{/if}
+		{#if next}
+			<div class="grow basis-2xs">
+				<a href={next.path} class="flex items-start justify-end gap-1">
+					<span class="text-right text-xl font-semibold text-pretty max-inline-xs">
+						{next.title}
+					</span>
+					<ChevronRight class="size-6 pt-1" />
+				</a>
+			</div>
+		{/if}
+	</nav>
+{/if}

src/lib/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Favicon } from './favicon.svelte';
 export { default as Footer } from './Footer.svelte';
 export { default as NoteList } from './NoteList.svelte';
+export { default as Pager } from './Pager.svelte';
 export { default as PostList } from './PostList.svelte';
 export { default as StackblitzEmbed } from './stackblitz-embed.svelte';
 export { default as VideoList } from './VideoList.svelte';

src/routes/notes/+layout.server.ts

@@ -7,17 +7,23 @@ import type { LayoutServerLoad } from './$types';
 export const prerender = true;
 
 export const load: LayoutServerLoad = async ({ url }) => {
-	const note = notes.find((note) => note.path === url.pathname);
+	const index = notes.findIndex((note) => note.path === url.pathname);
 
-	if (!note) {
+	if (index === -1) {
 		error(404, 'Note not found.');
 	}
 
+	const note = notes[index];
+	const prev = index < notes.length - 1 ? notes[index + 1] : undefined; // The higher the index the older the note.
+	const next = index > 0 ? notes[index - 1] : undefined;
+
 	const recommendedVideos = latestVideos.slice(0, 3);
 
 	return {
 		origin: ORIGIN,
 		note,
+		prev,
+		next,
 		recommendedVideos,
 		seo: {
 			title: note.title,

src/routes/notes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { VideoList } from '$lib/components';
+	import { VideoList, Pager } from '$lib/components';
 	import { Clock } from '@lucide/svelte';
 	import { NoteHeader, SeoCanonicalUrl } from '@maiertech/sveltekit-helpers';
 	import type { LayoutProps } from './$types';
@@ -17,7 +17,7 @@
 		<NoteHeader value={data.note} class="mb-8" />
 		{@render children()}
 
-		<p aria-hidden="true" class="mt-8 text-center text-lg text-ink-muted">◆ ◆ ◆</p>
+		<Pager prev={data.prev} next={data.next} class="mt-8" />
 	</div>
 
 	<aside class="flex grow basis-2xs flex-col gap-3">