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 }) => {

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;

src/lib/components/PostList.svelte

@@ -0,0 +1,69 @@
+<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 firstPageLink = "/post";
+	const prevLink = pageN <= 2 ? firstPageLink : `/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
+			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>
+		<div id="page-map">
+			<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>
+	</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>

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>

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;

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),
 	};
+}

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}/>

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>

svelte.config.js

@@ -91,9 +91,7 @@ const config = {
       }),
       prerender: {
          crawl: true,
-         entries: [
-            "/page/1/",
-         ],
+         entries: ['*'],
       },
 		alias: {
          $content: contentDir,

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/");
+});