From 1af8dd8c8d3bd71845bb63a01ef91be02d2fc9c0 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:38:13 -0700
Subject: [PATCH 1/5] fix: Cataloging problem on /post

---
 src/hooks.ts                         |  1 -
 src/lib/components/PostHeader.svelte |  2 +-
 src/lib/components/PostList.svelte   | 64 ++++++++++++++++++++++++++++
 src/routes/page/[slug]/+page.svelte  | 58 +++----------------------
 src/routes/page/[slug]/+page.ts      |  8 ++--
 src/routes/post/+page.server.ts      | 19 ++++++---
 src/routes/post/+page.svelte         | 22 +++-------
 svelte.config.js                     |  1 -
 8 files changed, 93 insertions(+), 82 deletions(-)
 create mode 100644 src/lib/components/PostList.svelte

diff --git a/src/hooks.ts b/src/hooks.ts
index 7ea2285..ac5feb1 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,7 +1,6 @@
 import type { Reroute } from '@sveltejs/kit';
 
 const translated: Record<string, string> = {
-	'/post': '/page/1',
 };
 
 export const reroute: Reroute = ({ url }) => {
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index c11f8d6..8410440 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Post } from '$lib/types'
-	import DividerVertical from "svelte-radix/DividerVertical.svelte";
+	import DividerVertical from "svelte-radix/DividerVertical.svelte"
 	export let post: Post;
 
 	export let inactive: bool = false;
diff --git a/src/lib/components/PostList.svelte b/src/lib/components/PostList.svelte
new file mode 100644
index 0000000..1c4968e
--- /dev/null
+++ b/src/lib/components/PostList.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
+	import type { Post } from '$lib/types'
+ 	import PostHeader from './PostHeader.svelte';
+
+	export let posts: Post[];
+	// The page navigation bar will not show if these numbers are not provided.
+	export let maxPageN: number = 0;
+	export let pageN: number = 0;
+
+	const disableLinkPrev = pageN == 1;
+	const disableLinkNext = pageN == maxPageN;
+	const prevLink = pageN == 1 ? "/post" : `/page/${pageN - 1}`;
+</script>
+
+<ul id="catalog" class="content">
+	{#each posts as post}
+		<li>
+			<PostHeader {post}/>
+		</li>
+	{/each}
+</ul>
+<!-- Navigation bar -->
+{#if maxPageN}
+	<hr class="separator" />
+	<div id="page-navigator">
+		<a
+			class="nav-link icon"
+			class:disabled-link={disableLinkPrev}
+			href="/post"><DoubleArrowLeft /></a>
+		<a
+			class="nav-link icon"
+			class:disabled-link={disableLinkPrev}
+			href={prevLink}><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/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
+		<a
+			class="nav-link icon"
+			class:disabled-link={disableLinkNext}
+			href="/page/{maxPageN}"><DoubleArrowRight /></a>
+	</div>
+{/if}
+
+<style>
+	#page-navigator {
+		display: flex;
+		flex-direction: horizontal;
+		justify-content: space-between;
+		margin: 1em auto 1em auto;
+		width: 80%;
+		align-items: center;
+	}
+	#page-map {
+		display: inline-block;
+	}
+	#page-num {
+		color: rgb(128,128,128);
+	}
+</style>
diff --git a/src/routes/page/[slug]/+page.svelte b/src/routes/page/[slug]/+page.svelte
index 09996f0..4e5e710 100644
--- a/src/routes/page/[slug]/+page.svelte
+++ b/src/routes/page/[slug]/+page.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	export let data: PageData;
-	const { posts, pageN, maxPageN } = data;
-	import siteMetadata from '$content/metadata.json';
+	import siteMetadata from '$content/metadata.json'
+	import PostList from '$lib/components/PostList.svelte'
 
-	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
-	import PostHeader from '$lib/components/PostHeader.svelte';
-
-	const disableLinkPrev = pageN == 1;
-	const disableLinkNext = pageN == maxPageN;
+	import type { PageData } from './$types'
+	export let data: PageData
+	const { posts, pageN, maxPageN } = data
 </script>
 
 <svelte:head>
@@ -16,49 +12,7 @@
 </svelte:head>
 
 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each posts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
-<hr class="separator" />
-<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/{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/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
-	<a
-		class="nav-link icon"
-		class:disabled-link={disableLinkNext}
-		href="/page/{maxPageN}"><DoubleArrowRight /></a>
-</div>
+<PostList {posts} {pageN} {maxPageN}/>
 
 <style>
-	#page-navigator {
-		display: flex;
-		flex-direction: horizontal;
-		justify-content: space-between;
-		margin: 1em auto 1em auto;
-		width: 80%;
-		align-items: center;
-	}
-	#page-map {
-		display: inline-block;
-	}
-	#page-num {
-		color: rgb(128,128,128);
-	}
 </style>
diff --git a/src/routes/page/[slug]/+page.ts b/src/routes/page/[slug]/+page.ts
index dd9e8c7..c4753bb 100644
--- a/src/routes/page/[slug]/+page.ts
+++ b/src/routes/page/[slug]/+page.ts
@@ -1,7 +1,7 @@
-import { error } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
-import { getPosts } from '$lib/posts';
-import siteMetadata from '$content/metadata.json';
+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;
diff --git a/src/routes/post/+page.server.ts b/src/routes/post/+page.server.ts
index fc78cd1..f4fffc8 100644
--- a/src/routes/post/+page.server.ts
+++ b/src/routes/post/+page.server.ts
@@ -1,7 +1,14 @@
-import type { PageLoad } from './$types';
-import { getPosts } from '$lib/posts';
+import type { PageLoad } from './$types'
+import { getPosts } from '$lib/posts'
+import siteMetadata from '$content/metadata.json'
 
-export const load: PageLoad = async (_) => {
-	const allPosts = await getPosts();
-	return { allPosts };
-};
+export const load: PageLoad = async () => {
+	const posts = await getPosts();
+	const pageSize = siteMetadata?.pageSize || 3;
+	const maxPageN = Math.ceil(posts.length / pageSize);
+
+	return {
+		maxPageN,
+		posts: posts.slice(0, pageSize),
+	};
+}
diff --git a/src/routes/post/+page.svelte b/src/routes/post/+page.svelte
index 249c48f..62a29e4 100644
--- a/src/routes/post/+page.svelte
+++ b/src/routes/post/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+	import siteMetadata from '$content/metadata.json';
+	import PostList from '$lib/components/PostList.svelte'
+
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const { allPosts } = data;
-	import siteMetadata from '$content/metadata.json';
-	import PostHeader from '$lib/components/PostHeader.svelte';
+	const { posts, maxPageN } = data;
 </script>
 
 <svelte:head>
@@ -11,17 +12,4 @@
 </svelte:head>
 
 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each allPosts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
-<hr class="separator" />
-
-<style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
-</style>
+<PostList {posts} pageN=1 {maxPageN}/>
diff --git a/svelte.config.js b/svelte.config.js
index 9820d65..e5db83a 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -79,7 +79,6 @@ const config = {
       prerender: {
          crawl: true,
          entries: [
-            "/page/1/",
          ],
       },
 		alias: {
-- 
2.44.1


From 19519fb30e2c336e36280bc0ea491d3b55b6e34c Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:46:44 -0700
Subject: [PATCH 2/5] fix: Prerender page crawling

---
 svelte.config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index e5db83a..0febb69 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -78,8 +78,7 @@ const config = {
       }),
       prerender: {
          crawl: true,
-         entries: [
-         ],
+         entries: ['*'],
       },
 		alias: {
          $content: contentDir,
-- 
2.44.1


From 38aeb1e80d1590b319e9b5d96ea44902585cbde9 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:48:02 -0700
Subject: [PATCH 3/5] refactor: Use PostList in tag

---
 src/routes/tag/[slug]/+page.svelte | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/routes/tag/[slug]/+page.svelte b/src/routes/tag/[slug]/+page.svelte
index 42ad300..ef8521c 100644
--- a/src/routes/tag/[slug]/+page.svelte
+++ b/src/routes/tag/[slug]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import PostList from '$lib/components/PostList.svelte'
+	import siteMetadata from '$content/metadata.json';
 	export let data: PageData;
 	const { name, posts } = data;
-	import siteMetadata from '$content/metadata.json';
-	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>
 
 <svelte:head>
@@ -11,19 +11,9 @@
 </svelte:head>
 
 <h1>{name} ({posts.length})</h1>
-
 <hr class="separator" />
-<ul id="catalog" class="content">
-	{#each posts as post}
-		<li>
-			<PostHeader post={post}/>
-		</li>
-	{/each}
-</ul>
+<PostList {posts}/>
 <hr class="separator" />
 
 <style>
-	#catalog li {
-		margin-bottom: 10px;
-	}
 </style>
-- 
2.44.1


From 401db3787ec61523f32af1a691de5392f428ca0c Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:51:03 -0700
Subject: [PATCH 4/5] fix: Remove /page/1 link

---
 src/lib/components/PostList.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/PostList.svelte b/src/lib/components/PostList.svelte
index 1c4968e..d2de152 100644
--- a/src/lib/components/PostList.svelte
+++ b/src/lib/components/PostList.svelte
@@ -10,7 +10,8 @@
 
 	const disableLinkPrev = pageN == 1;
 	const disableLinkNext = pageN == maxPageN;
-	const prevLink = pageN == 1 ? "/post" : `/page/${pageN - 1}`;
+	const firstPageLink = "/post";
+	const prevLink = pageN <= 2 ? firstPageLink : `/page/${pageN - 1}`;
 </script>
 
 <ul id="catalog" class="content">
@@ -27,7 +28,7 @@
 		<a
 			class="nav-link icon"
 			class:disabled-link={disableLinkPrev}
-			href="/post"><DoubleArrowLeft /></a>
+			href={firstPageLink}><DoubleArrowLeft /></a>
 		<a
 			class="nav-link icon"
 			class:disabled-link={disableLinkPrev}
-- 
2.44.1


From 62485531e52af166c4cc7734342cfde80391d206 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 11:16:44 -0700
Subject: [PATCH 5/5] test: Navigate to page 2

---
 src/lib/components/PostList.svelte |  4 ++++
 tests/post.spec.ts                 | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/lib/components/PostList.svelte b/src/lib/components/PostList.svelte
index d2de152..35d4b91 100644
--- a/src/lib/components/PostList.svelte
+++ b/src/lib/components/PostList.svelte
@@ -26,10 +26,12 @@
 	<hr class="separator" />
 	<div id="page-navigator">
 		<a
+			aria-label="First Page"
 			class="nav-link icon"
 			class:disabled-link={disableLinkPrev}
 			href={firstPageLink}><DoubleArrowLeft /></a>
 		<a
+			aria-label="Prev Page"
 			class="nav-link icon"
 			class:disabled-link={disableLinkPrev}
 			href={prevLink}><ChevronLeft /></a>
@@ -37,10 +39,12 @@
 			<p id="page-num">{pageN}/{maxPageN}</p>
 		</div>
 		<a
+			aria-label="Next Page"
 			class="nav-link icon"
 			class:disabled-link={disableLinkNext}
 			href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
 		<a
+			aria-label="Last Page"
 			class="nav-link icon"
 			class:disabled-link={disableLinkNext}
 			href="/page/{maxPageN}"><DoubleArrowRight /></a>
diff --git a/tests/post.spec.ts b/tests/post.spec.ts
index bcd1052..fde2be8 100644
--- a/tests/post.spec.ts
+++ b/tests/post.spec.ts
@@ -5,3 +5,15 @@ test('Navigate to blog post', async ({ page }) => {
 	await page.getByText('The Perfect Math Class').click();
 	await expect(page).toHaveURL("/post/the-perfect-math-class/");
 });
+
+test('Navigate to page 2', async ({ page }) => {
+	await page.goto('/post');
+	await page.getByRole('link', { name: 'Next Page' }).click();
+	await expect(page).toHaveURL("/page/2/");
+	await page.getByRole('link', { name: 'Prev Page' }).click();
+	await expect(page).toHaveURL("/post/");
+	await page.getByRole('link', { name: 'Last Page' }).click();
+	await expect(page).toHaveURL("/page/2/");
+	await page.getByRole('link', { name: 'First Page' }).click();
+	await expect(page).toHaveURL("/post/");
+});
-- 
2.44.1