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