From e823d76cbc8ce2f269177690160b5ddc1dc20436 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sat, 28 Sep 2024 00:27:15 -0700
Subject: [PATCH 01/10] feat: Page transitions

---
 src/routes/+layout.svelte        | 18 +++++++++++++-----
 src/routes/+layout.ts            |  6 ++++++
 src/routes/PageTransition.svelte | 17 +++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/PageTransition.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f152ced..45c2981 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,9 @@
 	import { page } from '$app/stores';
 	import Footer from "./Footer.svelte";
 	import Navbar from "./Navbar.svelte";
+	import PageTransition from "./PageTransition.svelte";
+
+	export let data : { url: string };
 </script>
 
 <!-- Homepage has its own navbar with animations -->
@@ -12,13 +15,18 @@
 			<Navbar />
 			<slot name="header" />
 		</div>
-		<div id="content">
-			<slot />
+		<main>
+			<PageTransition url={data.url}>
+				<slot />
+			</PageTransition>
 			<Footer />
-		</div>
+		</main>
 	</div>
 {:else}
-	<slot />
+	<!-- On the home page -->
+	<PageTransition url={data.url}>
+		<slot />
+	</PageTransition>
 	<Footer />
 {/if}
 
@@ -97,7 +105,7 @@
 			gap: 20px;
 		}
 	}
-	#content {
+	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 522d7b2..3bf2ff0 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -2,3 +2,9 @@ export const prerender = true;
 
 // Prevent page 404 on refresh
 export const trailingSlash = 'always';
+
+export async function load({ url }) {
+	return {
+		url: url.pathname
+	}
+}
diff --git a/src/routes/PageTransition.svelte b/src/routes/PageTransition.svelte
new file mode 100644
index 0000000..60df1d9
--- /dev/null
+++ b/src/routes/PageTransition.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+
+	export let url: string
+</script>
+
+{#key url}
+	<div class="transition" in:fade>
+		<slot />
+	</div>
+{/key}
+
+<style>
+	.transition {
+		height: 100%;
+	}
+</style>

From ccdcff016433799b7aa4fb41f4d3760f3d967303 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 15:37:28 -0700
Subject: [PATCH 02/10] feat: Testing fixture posts

---
 src/content/post/placeholder1.md           | 1 +
 src/content/post/placeholder2.md           | 8 ++++++++
 src/content/post/placeholder3.md           | 8 ++++++++
 src/content/post/the-perfect-math-class.md | 6 ++++++
 4 files changed, 23 insertions(+)
 create mode 100644 src/content/post/placeholder2.md
 create mode 100644 src/content/post/placeholder3.md
 create mode 100644 src/content/post/the-perfect-math-class.md

diff --git a/src/content/post/placeholder1.md b/src/content/post/placeholder1.md
index ec423d5..72a5f65 100644
--- a/src/content/post/placeholder1.md
+++ b/src/content/post/placeholder1.md
@@ -3,6 +3,7 @@ title: Placeholder 1
 date: '2024-09-01'
 description: "This is a placeholder description"
 tags: ["a123", "ボースト"]
+series: ["placeholder"]
 ---
 # 1st Level Heading
 
diff --git a/src/content/post/placeholder2.md b/src/content/post/placeholder2.md
new file mode 100644
index 0000000..356955e
--- /dev/null
+++ b/src/content/post/placeholder2.md
@@ -0,0 +1,8 @@
+---
+title: Placeholder 2
+date: '2024-09-20'
+description: "This is a placeholder description"
+tags: ["a123"]
+series: ["placeholder"]
+---
+## Content
diff --git a/src/content/post/placeholder3.md b/src/content/post/placeholder3.md
new file mode 100644
index 0000000..52bf7b5
--- /dev/null
+++ b/src/content/post/placeholder3.md
@@ -0,0 +1,8 @@
+---
+title: Placeholder 3
+date: '2024-09-24'
+description: "This is a placeholder description"
+tags: []
+series: ["placeholder"]
+---
+## Content
diff --git a/src/content/post/the-perfect-math-class.md b/src/content/post/the-perfect-math-class.md
new file mode 100644
index 0000000..e1d3717
--- /dev/null
+++ b/src/content/post/the-perfect-math-class.md
@@ -0,0 +1,6 @@
+---
+title: The Perfect Math Class
+date: '2024-09-15'
+tags: ["Cirno"]
+---
+# Content

From 16d767cf76cfd2deb6a3e005f21ee95111d7b5d5 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 16:40:26 -0700
Subject: [PATCH 03/10] feat: Pages

---
 .../components/PostHeader.svelte}             |  0
 src/lib/posts.ts                              | 26 ++++++++++++
 src/routes/+layout.svelte                     |  4 +-
 src/routes/Navbar.svelte                      |  4 +-
 src/routes/page/[slug]/+page.svelte           | 40 +++++++++++++++++++
 src/routes/page/[slug]/+page.ts               | 22 ++++++++++
 src/routes/post/+page.server.ts               | 29 ++------------
 src/routes/post/+page.svelte                  |  4 +-
 8 files changed, 97 insertions(+), 32 deletions(-)
 rename src/{routes/post/Heading.svelte => lib/components/PostHeader.svelte} (100%)
 create mode 100644 src/lib/posts.ts
 create mode 100644 src/routes/page/[slug]/+page.svelte
 create mode 100644 src/routes/page/[slug]/+page.ts

diff --git a/src/routes/post/Heading.svelte b/src/lib/components/PostHeader.svelte
similarity index 100%
rename from src/routes/post/Heading.svelte
rename to src/lib/components/PostHeader.svelte
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
new file mode 100644
index 0000000..855c1e3
--- /dev/null
+++ b/src/lib/posts.ts
@@ -0,0 +1,26 @@
+export async function getPosts() {
+	const allPostFiles = import.meta.glob('$content/post/*.md');
+	const iterablePostFiles = Object.entries(allPostFiles);
+
+	const allPosts = await Promise.all(
+		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
+			const { metadata } = await resolver();
+			const pathPost = pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
+
+			return {
+				meta: {
+					...metadata,
+					date: new Date(metadata.date),
+				},
+				path: pathPost
+			};
+		})
+	);
+
+	allPosts.sort((post1, post2) => {
+		const date1: Date = post1.meta.date;
+		const date2: Date = post2.meta.date;
+		return date2.getTime() - date1.getTime();
+	});
+	return allPosts;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 45c2981..fa257e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -31,12 +31,12 @@
 {/if}
 
 <style>
-	:global(.navbar-link) {
+	:global(.nav-link) {
 		@apply text-lg;
 		font-weight: 500;
 		font-family: serif;
 	}
-	:global(p.navbar-link) {
+	:global(p.nav-link) {
 		color: rgb(128,128,128);
 	}
 	:global(a) {
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 3dd5789..4e29a33 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -10,10 +10,10 @@
 <div id="navbar" class="h-5 space-x-4">
 	{#each routes as item}
 		{#if item.inactive ?? false}
-			<p class="navbar-link"
+			<p class="nav-link"
 				>{item.name}</p>
 		{:else}
-			<a class="navbar-link"
+			<a class="nav-link"
 				 class:active-link={isActiveLink($page.url.pathname, item.route)}
 				 href={item.route}>{item.name}</a>
 		{/if}
diff --git a/src/routes/page/[slug]/+page.svelte b/src/routes/page/[slug]/+page.svelte
new file mode 100644
index 0000000..5b6b4ee
--- /dev/null
+++ b/src/routes/page/[slug]/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	const { posts, pageN, maxPageN } = data;
+	import siteMetadata from '$content/metadata.json';
+
+	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight, DotsHorizontal } from 'svelte-radix';
+	import PostHeader from '$lib/components/PostHeader.svelte';
+</script>
+
+<svelte:head>
+	<title>Page {pageN } | {siteMetadata.blogName}</title>
+</svelte:head>
+
+<hr class="separator" />
+<ul id="catalog" class="content">
+	{#each posts as post}
+		<li>
+			<PostHeader metadata={post.meta} link={post.path} />
+		</li>
+	{/each}
+</ul>
+<hr class="separator" />
+<div id="pagenum">
+	<a class="nav-link icon" href="/page/1"><DoubleArrowLeft /></a>
+	<a class="nav-link icon" href="/page/{pageN-1}"><ChevronLeft /></a>
+	<p class="nav-link icon"><DotsHorizontal/></p>
+	<a class="nav-link icon" href="/page/{pageN+1}"><ChevronRight /></a>
+	<a class="nav-link icon" href="/page/{maxPageN}"><DoubleArrowRight /></a>
+</div>
+
+<style>
+	#pagenum {
+		display: flex;
+		flex-direction: horizontal;
+		justify-content: space-between;
+		margin-left: 6em;
+		margin-right: 6em;
+	}
+</style>
diff --git a/src/routes/page/[slug]/+page.ts b/src/routes/page/[slug]/+page.ts
new file mode 100644
index 0000000..dd9e8c7
--- /dev/null
+++ b/src/routes/page/[slug]/+page.ts
@@ -0,0 +1,22 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+import { getPosts } from '$lib/posts';
+import siteMetadata from '$content/metadata.json';
+
+export const load: PageLoad = async ({ params }) => {
+	const pageN: number = +params.slug;
+	if (!pageN) throw error(404);
+
+	const posts = await getPosts();
+
+	const pageSize = siteMetadata?.pageSize || 3;
+
+	const maxPageN = Math.ceil(posts.length / pageSize);
+	if (pageN < 0 || pageN > maxPageN) throw error(404);
+
+	return {
+		pageN,
+		posts: posts.slice((pageN - 1) * pageSize, pageN * pageSize),
+		maxPageN,
+	};
+}
diff --git a/src/routes/post/+page.server.ts b/src/routes/post/+page.server.ts
index 368c4b9..fc78cd1 100644
--- a/src/routes/post/+page.server.ts
+++ b/src/routes/post/+page.server.ts
@@ -1,30 +1,7 @@
 import type { PageLoad } from './$types';
+import { getPosts } from '$lib/posts';
 
 export const load: PageLoad = async (_) => {
-	const allPostFiles = import.meta.glob('$content/post/*.md');
-	const iterablePostFiles = Object.entries(allPostFiles);
-
-	const allPosts = await Promise.all(
-		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
-			const { metadata } = await resolver();
-			const pathPost = pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
-
-			return {
-				meta: {
-					...metadata,
-					date: new Date(metadata.date),
-				},
-				path: pathPost
-			};
-		})
-	);
-
-	allPosts.sort((post1, post2) => {
-		const date1: Date = post1.meta.date;
-		const date2: Date = post2.meta.date;
-		return date2.getTime() - date1.getTime();
-	});
-	return {
-		allPosts
-	};
+	const allPosts = await getPosts();
+	return { allPosts };
 };
diff --git a/src/routes/post/+page.svelte b/src/routes/post/+page.svelte
index f5925fd..5298603 100644
--- a/src/routes/post/+page.svelte
+++ b/src/routes/post/+page.svelte
@@ -3,7 +3,7 @@
 	export let data: PageData;
 	const { allPosts } = data;
 	import siteMetadata from '$content/metadata.json';
-	import Heading from './Heading.svelte';
+	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>
 
 <svelte:head>
@@ -14,7 +14,7 @@
 <ul id="catalog" class="content">
 	{#each allPosts as post}
 		<li>
-			<Heading metadata={post.meta} link={post.path} />
+			<PostHeader metadata={post.meta} link={post.path} />
 		</li>
 	{/each}
 </ul>

From d1cc88397b700cda353f126b123e141f151258d0 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 17:39:40 -0700
Subject: [PATCH 04/10] feat: Render disabled links

---
 src/lib/sitemap.ts                  |  5 ++--
 src/routes/+layout.svelte           |  5 ++--
 src/routes/+page.svelte             |  6 +---
 src/routes/Navbar.svelte            | 15 ++++------
 src/routes/page/[slug]/+page.svelte | 43 ++++++++++++++++++++++-------
 src/routes/post/[slug]/+page.svelte |  4 +--
 6 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index 34c2365..97f9051 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -1,6 +1,7 @@
-export const routes: { route: string, name: string, inactive?: boolean }[] = [
+export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
-	{ route: "/art", name: "Art", inactive: true },
+	{ route: "/tag", name: "Tags", disabled: true },
+	{ route: "/gallery", name: "Gallery", disabled: true },
 	{ route: "/archives", name: "Archives" },
 ];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fa257e3..7170bf9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,8 +36,9 @@
 		font-weight: 500;
 		font-family: serif;
 	}
-	:global(p.nav-link) {
+	:global(a.disabled-link) {
 		color: rgb(128,128,128);
+		pointer-events: none;
 	}
 	:global(a) {
 		color: theme('colors.eucalyptus.400');
@@ -72,7 +73,7 @@
 			}
 		}
 	}
-	:global(a.active-link) {
+	:global(a.current-link) {
 		color: theme('colors.magenta.500');
 
 		&::after {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 89861ee..f8c035e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -53,11 +53,7 @@
 				{#each routes as item}
 					{#if item.route !== "/"}
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
-						{#if item.inactive ?? false}
-							<p class="navbar-link">{item.name}</p>
-						{:else}
-							<a class="navbar-link" href={item.route}>{item.name}</a>
-						{/if}
+						<a class="navbar-link" href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 					{/if}
 				{/each}
 			</div>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 4e29a33..a4339de 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -2,21 +2,18 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 
-	function isActiveLink(pathname, route) {
+	function isCurrentLink(pathname, route) {
 		return route != "/" && pathname.startsWith(route);
 	}
 </script>
 
 <div id="navbar" class="h-5 space-x-4">
 	{#each routes as item}
-		{#if item.inactive ?? false}
-			<p class="nav-link"
-				>{item.name}</p>
-		{:else}
-			<a class="nav-link"
-				 class:active-link={isActiveLink($page.url.pathname, item.route)}
-				 href={item.route}>{item.name}</a>
-		{/if}
+		<a
+			class="nav-link"
+			class:current-link={isCurrentLink($page.url.pathname, item.route)}
+			class:disabled-link={item.disabled}
+			href={item.route}>{item.name}</a>
 	{/each}
 </div>
 
diff --git a/src/routes/page/[slug]/+page.svelte b/src/routes/page/[slug]/+page.svelte
index 5b6b4ee..06aba2b 100644
--- a/src/routes/page/[slug]/+page.svelte
+++ b/src/routes/page/[slug]/+page.svelte
@@ -4,8 +4,11 @@
 	const { posts, pageN, maxPageN } = data;
 	import siteMetadata from '$content/metadata.json';
 
-	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight, DotsHorizontal } from 'svelte-radix';
+	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
 	import PostHeader from '$lib/components/PostHeader.svelte';
+
+	const disableLinkPrev = pageN == 1;
+	const disableLinkNext = pageN == maxPageN;
 </script>
 
 <svelte:head>
@@ -21,20 +24,40 @@
 	{/each}
 </ul>
 <hr class="separator" />
-<div id="pagenum">
-	<a class="nav-link icon" href="/page/1"><DoubleArrowLeft /></a>
-	<a class="nav-link icon" href="/page/{pageN-1}"><ChevronLeft /></a>
-	<p class="nav-link icon"><DotsHorizontal/></p>
-	<a class="nav-link icon" href="/page/{pageN+1}"><ChevronRight /></a>
-	<a class="nav-link icon" href="/page/{maxPageN}"><DoubleArrowRight /></a>
+<div id="page-navigator">
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkPrev}
+		href="/page/1"><DoubleArrowLeft /></a>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkPrev}
+		href="/page/{pageN-1}"><ChevronLeft /></a>
+	<div id="page-map">
+		<p id="page-num">{pageN}/{maxPageN}</p>
+	</div>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkNext}
+		href="/page/{pageN+1}"><ChevronRight /></a>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkNext}
+		href="/page/{maxPageN}"><DoubleArrowRight /></a>
 </div>
 
 <style>
-	#pagenum {
+	#page-navigator {
 		display: flex;
 		flex-direction: horizontal;
 		justify-content: space-between;
-		margin-left: 6em;
-		margin-right: 6em;
+		margin: 1em 6em 1em 6em;
+		align-items: center;
+	}
+	#page-map {
+		display: inline-block;
+	}
+	#page-num {
+		color: rgb(128,128,128);
 	}
 </style>
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 80f44ee..e25a1a1 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -3,14 +3,14 @@
 	export let data: PageData;
 	const { metadata, Content } = data;
 	import siteMetadata from '$content/metadata.json';
-	import Heading from '../Heading.svelte';
+	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>
 
 <svelte:head>
 	<title>{metadata.title} | {siteMetadata.blogName}</title>
 </svelte:head>
 
-<Heading metadata={metadata}/>
+<PostHeader metadata={metadata}/>
 
 <hr />
 <article class="prose lg:prose-xl dark:prose-invert p-4">

From bed7d508ff3f383972c2baa74864c3a8e7bbe394 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 18:45:35 -0700
Subject: [PATCH 05/10] feat: Render pages

---
 src/hooks.ts                         | 11 +++++++++++
 src/lib/components/PostHeader.svelte |  2 +-
 src/lib/posts.ts                     |  2 +-
 src/routes/Navbar.svelte             |  3 ++-
 src/routes/gallery/+page.svelte      |  0
 src/routes/page/[slug]/+page.svelte  |  7 ++++---
 src/routes/tag/+page.svelte          |  0
 svelte.config.js                     |  6 ++++++
 tests/post.spec.ts                   |  7 +++++++
 9 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks.ts
 create mode 100644 src/routes/gallery/+page.svelte
 create mode 100644 src/routes/tag/+page.svelte
 create mode 100644 tests/post.spec.ts

diff --git a/src/hooks.ts b/src/hooks.ts
new file mode 100644
index 0000000..7ea2285
--- /dev/null
+++ b/src/hooks.ts
@@ -0,0 +1,11 @@
+import type { Reroute } from '@sveltejs/kit';
+
+const translated: Record<string, string> = {
+	'/post': '/page/1',
+};
+
+export const reroute: Reroute = ({ url }) => {
+	if (url.pathname in translated) {
+		return translated[url.pathname];
+	}
+};
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index 8911892..0d01ff6 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -35,7 +35,7 @@
 <style>
 	#post-heading {
 		@apply flex flex-col;
-		width: 100%;
+		margin: .5em 1em .5em 1em;
 	}
 	#post-title {
 		@apply text-3xl;
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index 855c1e3..ff2065e 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -5,7 +5,7 @@ export async function getPosts() {
 	const allPosts = await Promise.all(
 		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
 			const { metadata } = await resolver();
-			const pathPost = pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
+			const pathPost = "/post/" + pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
 
 			return {
 				meta: {
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index a4339de..a6aba2b 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -3,7 +3,8 @@
 	import { routes } from "$lib/sitemap.ts"
 
 	function isCurrentLink(pathname, route) {
-		return route != "/" && pathname.startsWith(route);
+		return route != "/" && pathname.startsWith(route)
+			 || route == "/post" && pathname.startsWith("/page");
 	}
 </script>
 
diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/page/[slug]/+page.svelte b/src/routes/page/[slug]/+page.svelte
index 06aba2b..a57b3e5 100644
--- a/src/routes/page/[slug]/+page.svelte
+++ b/src/routes/page/[slug]/+page.svelte
@@ -32,14 +32,14 @@
 	<a
 		class="nav-link icon"
 		class:disabled-link={disableLinkPrev}
-		href="/page/{pageN-1}"><ChevronLeft /></a>
+		href="/page/{Math.max(1, pageN-1)}"><ChevronLeft /></a>
 	<div id="page-map">
 		<p id="page-num">{pageN}/{maxPageN}</p>
 	</div>
 	<a
 		class="nav-link icon"
 		class:disabled-link={disableLinkNext}
-		href="/page/{pageN+1}"><ChevronRight /></a>
+		href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
 	<a
 		class="nav-link icon"
 		class:disabled-link={disableLinkNext}
@@ -51,7 +51,8 @@
 		display: flex;
 		flex-direction: horizontal;
 		justify-content: space-between;
-		margin: 1em 6em 1em 6em;
+		margin: 1em auto 1em auto;
+		width: 80%;
 		align-items: center;
 	}
 	#page-map {
diff --git a/src/routes/tag/+page.svelte b/src/routes/tag/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/svelte.config.js b/svelte.config.js
index 10d220e..2ffb103 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -40,6 +40,12 @@ const config = {
          precompress: false,
          trailingSlash: 'always',
       }),
+      prerender: {
+         crawl: true,
+         entries: [
+            "/page/1/",
+         ],
+      },
 		alias: {
          $content: contentDir,
 			"@/*": "./*",
diff --git a/tests/post.spec.ts b/tests/post.spec.ts
new file mode 100644
index 0000000..bcd1052
--- /dev/null
+++ b/tests/post.spec.ts
@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('Navigate to blog post', async ({ page }) => {
+	await page.goto('/post');
+	await page.getByText('The Perfect Math Class').click();
+	await expect(page).toHaveURL("/post/the-perfect-math-class/");
+});

From 636a00f8265e296a31b9c70abb39421c49641af5 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 18:48:08 -0700
Subject: [PATCH 06/10] feat: Use blur transition

---
 src/routes/PageTransition.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/PageTransition.svelte b/src/routes/PageTransition.svelte
index 60df1d9..e152971 100644
--- a/src/routes/PageTransition.svelte
+++ b/src/routes/PageTransition.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition'
+	import { blur } from 'svelte/transition'
 
 	export let url: string
 </script>
 
 {#key url}
-	<div class="transition" in:fade>
+	<div class="transition" in:blur>
 		<slot />
 	</div>
 {/key}

From 22787eceda1700c9bdc5a517b582666deeff0fd6 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Thu, 10 Oct 2024 12:00:35 -0700
Subject: [PATCH 07/10] feat: Tag system

---
 README.md                            |  2 +-
 src/lib/components/PostHeader.svelte |  2 +-
 src/lib/posts.ts                     | 23 ++++++++++++++++++----
 src/lib/sitemap.ts                   |  2 +-
 src/routes/tag/+page.server.ts       |  7 +++++++
 src/routes/tag/+page.svelte          | 28 +++++++++++++++++++++++++++
 src/routes/tag/[slug]/+page.svelte   | 29 ++++++++++++++++++++++++++++
 src/routes/tag/[slug]/+page.ts       | 10 ++++++++++
 8 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/tag/+page.server.ts
 create mode 100644 src/routes/tag/[slug]/+page.svelte
 create mode 100644 src/routes/tag/[slug]/+page.ts

diff --git a/README.md b/README.md
index 77f68d6..7cc754f 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ npm run dev [-- --open]
 ### Formatting
 
 ``` bash
-npx run eslint
+npx eslint
 ```
 
 ### Testing
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index 0d01ff6..5546dcc 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -25,7 +25,7 @@
 					<DividerVertical />
 					</div>
 				{/if}
-				<a href="/">{tag}</a>
+				<a href="/tag/{tag}">{tag}</a>
 			{/each}
 		</p>
 		<p class="text-l text-gray-500">{date}</p>
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index ff2065e..0c31b6e 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -1,8 +1,8 @@
-export async function getPosts() {
+export async function getPosts(tag: string | null = null) {
 	const allPostFiles = import.meta.glob('$content/post/*.md');
 	const iterablePostFiles = Object.entries(allPostFiles);
 
-	const allPosts = await Promise.all(
+	let posts = await Promise.all(
 		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
 			const { metadata } = await resolver();
 			const pathPost = "/post/" + pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
@@ -16,11 +16,26 @@ export async function getPosts() {
 			};
 		})
 	);
+	if (tag)
+		posts = posts.filter(obj => obj.meta.tags.includes(tag))
 
-	allPosts.sort((post1, post2) => {
+	posts.sort((post1, post2) => {
 		const date1: Date = post1.meta.date;
 		const date2: Date = post2.meta.date;
 		return date2.getTime() - date1.getTime();
 	});
-	return allPosts;
+	return posts;
+}
+
+export async function getTags() {
+	const allPostFiles = import.meta.glob('$content/post/*.md');
+	const iterablePostFiles = Object.entries(allPostFiles);
+
+	const allPosts: string[][] = await Promise.all(
+		iterablePostFiles.map(async ([_, resolver]) => {
+			const { metadata } = await resolver();
+			return metadata.tags;
+		})
+	);
+	return new Set(allPosts.flat());
 }
diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index 97f9051..3b312b9 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -1,7 +1,7 @@
 export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
-	{ route: "/tag", name: "Tags", disabled: true },
+	{ route: "/tag", name: "Tags" },
 	{ route: "/gallery", name: "Gallery", disabled: true },
 	{ route: "/archives", name: "Archives" },
 ];
diff --git a/src/routes/tag/+page.server.ts b/src/routes/tag/+page.server.ts
new file mode 100644
index 0000000..a5bf330
--- /dev/null
+++ b/src/routes/tag/+page.server.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+import { getTags } from '$lib/posts';
+
+export const load: PageLoad = async (_) => {
+	const allTags = await getTags();
+	return { allTags };
+};
diff --git a/src/routes/tag/+page.svelte b/src/routes/tag/+page.svelte
index e69de29..2386ccf 100644
--- a/src/routes/tag/+page.svelte
+++ b/src/routes/tag/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	const { allTags } = data;
+	import siteMetadata from '$content/metadata.json';
+</script>
+
+<svelte:head>
+	<title>Tags | {siteMetadata.blogName}</title>
+</svelte:head>
+
+<h1>Tags</h1>
+
+<hr class="separator" />
+<ul id="catalog" class="content">
+	{#each allTags as tag}
+		<li>
+			<a href="/tag/{tag}">{tag}</a>
+		</li>
+	{/each}
+</ul>
+<hr class="separator" />
+
+<style>
+	#catalog li {
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/src/routes/tag/[slug]/+page.svelte b/src/routes/tag/[slug]/+page.svelte
new file mode 100644
index 0000000..ccf9660
--- /dev/null
+++ b/src/routes/tag/[slug]/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	const { name, posts } = data;
+	import siteMetadata from '$content/metadata.json';
+	import PostHeader from '$lib/components/PostHeader.svelte';
+</script>
+
+<svelte:head>
+	<title>{name} | {siteMetadata.blogName}</title>
+</svelte:head>
+
+<h1>{name}</h1>
+
+<hr class="separator" />
+<ul id="catalog" class="content">
+	{#each posts as post}
+		<li>
+			<PostHeader metadata={post.meta} link={post.path} />
+		</li>
+	{/each}
+</ul>
+<hr class="separator" />
+
+<style>
+	#catalog li {
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/src/routes/tag/[slug]/+page.ts b/src/routes/tag/[slug]/+page.ts
new file mode 100644
index 0000000..f3a0fe0
--- /dev/null
+++ b/src/routes/tag/[slug]/+page.ts
@@ -0,0 +1,10 @@
+import type { PageLoad } from './$types';
+import { getPosts } from '$lib/posts';
+
+export const load: PageLoad = async ({ params }) => {
+	const posts = await getPosts(params.slug);
+	return {
+		name: params.slug,
+		posts,
+	};
+}

From 2175e30325cf6034ed9331325b7027b984464b47 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Thu, 10 Oct 2024 12:06:42 -0700
Subject: [PATCH 08/10] fix: Use ISO date format

---
 src/lib/components/PostHeader.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index 5546dcc..f8d78ce 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -3,7 +3,7 @@
 	export let metadata : { title: string, description: string, tags: [string], date: Date };
 
 	export let link: Option<string> = null;
-	const date = metadata.date.toLocaleDateString();
+	const date = metadata.date.toISOString().slice(0,-14);
 </script>
 
 <div id="post-heading">

From 568c1b740fd975cba6b8ebc2f23b7ffb7ffb3142 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Thu, 10 Oct 2024 12:16:44 -0700
Subject: [PATCH 09/10] feat: Display series

---
 src/lib/components/PostHeader.svelte |  7 +++++++
 src/routes/tag/+page.svelte          | 13 ++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index f8d78ce..edfba5c 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -4,10 +4,14 @@
 
 	export let link: Option<string> = null;
 	const date = metadata.date.toISOString().slice(0,-14);
+	const series = metadata?.series || [];
 </script>
 
 <div id="post-heading">
 	<h2>
+		{#each series as seriesTag}
+			<p class="series-tag">{seriesTag}</p>
+		{/each}
 		{#if link}
 			<a id="post-title" href={link}>{metadata.title}</a>
 		{:else}
@@ -40,4 +44,7 @@
 	#post-title {
 		@apply text-3xl;
 	}
+	.series-tag {
+		color: theme('colors.sunglow.600');
+	}
 </style>
diff --git a/src/routes/tag/+page.svelte b/src/routes/tag/+page.svelte
index 2386ccf..b0b49de 100644
--- a/src/routes/tag/+page.svelte
+++ b/src/routes/tag/+page.svelte
@@ -12,17 +12,16 @@
 <h1>Tags</h1>
 
 <hr class="separator" />
-<ul id="catalog" class="content">
+<div id="catalog" class="content">
 	{#each allTags as tag}
-		<li>
-			<a href="/tag/{tag}">{tag}</a>
-		</li>
+		<a class="tag" href="/tag/{tag}">{tag}</a>
 	{/each}
-</ul>
+</div>
 <hr class="separator" />
 
 <style>
-	#catalog li {
-		margin-bottom: 10px;
+	.tag {
+		margin-left: 1em;
+		margin-right: 1em;
 	}
 </style>

From 8662b2469ad00d67203b8374c1d9ee356998bc52 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Thu, 10 Oct 2024 14:40:14 -0700
Subject: [PATCH 10/10] feat: Name in navbar

---
 src/routes/Navbar.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index a6aba2b..3857553 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
+	import { name } from '$content/metadata.json';
 
 	function isCurrentLink(pathname, route) {
 		return route != "/" && pathname.startsWith(route)
@@ -9,6 +10,7 @@
 </script>
 
 <div id="navbar" class="h-5 space-x-4">
+	<p id="bio-name">{name}</p>
 	{#each routes as item}
 		<a
 			class="nav-link"
@@ -19,6 +21,12 @@
 </div>
 
 <style>
+	#bio-name {
+		font-family: serif;
+		font-size: 3rem;
+		font-weight: normal;
+		color: theme('colors.java.800');
+	}
 	#navbar {
 		display: flex;
 		flex-direction: column;