Fix category name encoding in pagination

Author: H0R5E

src/routes/blog/category/[category]/+page.server.js

@@ -3,11 +3,14 @@ import fetchPosts from "$lib/assets/js/fetchPosts";
 import { underscoreToSpace } from "$lib/assets/ts/utils.js";
 
 export const load = async ({ params }) => {
-  const category = underscoreToSpace(params.category);
+  const category = params.category;
   const page = params.page || 1;
   const options = { category, limit: -1 };
   const { posts: allPosts } = await fetchPosts(options);
-  const { posts } = await fetchPosts({ category, limit: postsPerPage });
+  const { posts } = await fetchPosts({
+    category: underscoreToSpace(category),
+    limit: postsPerPage,
+  });
 
   const total = allPosts.length;
   const pagesAvailable = Math.ceil(total / postsPerPage);

src/routes/blog/category/[category]/+page.svelte

@@ -1,5 +1,6 @@
 <!-- Renders any page at /blog/category/* -->
 <script lang="ts">
+  import { underscoreToSpace } from "$lib/assets/ts/utils";
   import PostsList from "$lib/components/PostsList.svelte";
   let { data } = $props();
 
@@ -11,7 +12,7 @@
 </svelte:head>
 
 <div class="flex w-full flex-col items-center p-4 pb-32">
-  <span class="scroll-mt-16 pb-8 pt-4 font-script text-4xl"
-    >Category: {category}</span>
+  <span class="font-script scroll-mt-16 pt-4 pb-8 text-4xl"
+    >Category: {underscoreToSpace(category)}</span>
   <PostsList {posts} />
 </div>

src/routes/blog/category/[category]/page/+page.server.js

@@ -2,6 +2,5 @@ import { redirect } from "@sveltejs/kit";
 import { underscoreToSpace } from "$lib/assets/ts/utils.js";
 
 export const load = async ({ params }) => {
-  const category = underscoreToSpace(params.category);
-  redirect(301, `/blog/category/${category}/`);
+  redirect(301, `/blog/category/${params.category}/`);
 };

src/routes/blog/category/[category]/page/[page]/+page.server.js

@@ -4,7 +4,7 @@ import { redirect } from "@sveltejs/kit";
 import { underscoreToSpace } from "$lib/assets/ts/utils.js";
 
 export const load = async ({ url, params, fetch }) => {
-  const category = underscoreToSpace(params.category);
+  const category = params.category;
   const page = parseInt(params.page) || 1;
 
   // Keeps from duplicating the blog index route as page 1
@@ -14,7 +14,10 @@ export const load = async ({ url, params, fetch }) => {
 
   let offset = page * postsPerPage - postsPerPage;
 
-  const totalPostsRes = await fetchPosts({ category: category, limit: -1 });
+  const totalPostsRes = await fetchPosts({
+    category: underscoreToSpace(category),
+    limit: -1,
+  });
   const total = totalPostsRes.posts.length;
   const { posts } = await fetchPosts({ offset, page, category });
 

src/routes/blog/category/[category]/page/[page]/+page.svelte

@@ -1,5 +1,6 @@
 <!-- This file handles any /blog/page/x route for pagination -->
 <script lang="ts">
+  import { underscoreToSpace } from "$lib/assets/ts/utils";
   import PostsList from "$lib/components/PostsList.svelte";
   import { postsPerPage, siteDescription } from "$lib/config";
 
@@ -13,15 +14,16 @@
 
 <svelte:head>
   <title
-    >Category: {category} (posts {lowerBound}–{upperBound} of {totalPosts})</title>
+    >Category: {underscoreToSpace(category)} (posts {lowerBound}–{upperBound} of {totalPosts})</title>
 </svelte:head>
 
 <!-- TODO: this is duplicated across multiple `+page.svelte` files -->
 
 <div class="flex w-full flex-col py-4 pb-32">
   {#if posts.length}
     <span class="font-script mx-auto scroll-mt-16 pt-4 pb-8 text-4xl"
-      >Category: {category} (posts {lowerBound}–{upperBound} of {totalPosts})</span>
+      >Category: {underscoreToSpace(category)} (posts {lowerBound}–{upperBound} of
+      {totalPosts})</span>
     <PostsList {posts} />
   {:else}
     <h1>Oops!</h1>

svelte.config.js

@@ -95,6 +95,7 @@ const config = {
         "/api/rss.xml/",
         "/blog/",
         "/blog/category/",
+        "/blog/category/[category]/page",
         "/blog/page",
         "/blog/post",
       ],