Fix category with reserved character (#431)

* fix: Encode category in URLs to handle reserved characters

* fix: Encode category names in static paths to handle reserved characters

src/components/PostMeta.astro

@@ -53,7 +53,7 @@ const className = Astro.props.class;
             <Icon name="material-symbols:book-2-outline-rounded" class="text-xl"></Icon>
         </div>
         <div class="flex flex-row flex-nowrap items-center">
-            <a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category`
+            <a href={url(`/archive/category/${encodeURIComponent(category || 'uncategorized')}/`)} aria-label=`View all posts in the ${category} category`
                class="link-lg transition text-50 text-sm font-medium
                             hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                 {category || i18n(I18nKey.uncategorized)}

src/pages/archive/category/[category].astro

@@ -10,13 +10,13 @@ export async function getStaticPaths() {
 	return categories.map((category) => {
 		return {
 			params: {
-				category: category.name,
+				category: encodeURIComponent(category.name),
 			},
 		};
 	});
 }
 
-const category = Astro.params.category as string;
+const category = decodeURIComponent(Astro.params.category as string);
 ---
 
 <MainGridLayout title={i18n(I18nKey.archive)} description={i18n(I18nKey.archive)}>

src/utils/url-utils.ts

@@ -19,7 +19,7 @@ export function getPostUrlBySlug(slug: string): string {
 export function getCategoryUrl(category: string): string {
 	if (category === i18n(i18nKey.uncategorized))
 		return url("/archive/category/uncategorized/");
-	return url(`/archive/category/${category}/`);
+	return url(`/archive/category/${encodeURIComponent(category)}/`);
 }
 
 export function getDir(path: string): string {