feat: Render pages

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

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;

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: {

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>
 

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 {

svelte.config.js

@@ -40,6 +40,12 @@ const config = {
          precompress: false,
          trailingSlash: 'always',
       }),
+      prerender: {
+         crawl: true,
+         entries: [
+            "/page/1/",
+         ],
+      },
 		alias: {
          $content: contentDir,
 			"@/*": "./*",

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