fix tag pages

.astro/content-assets.mjs

@@ -1,10 +1,10 @@
 
+import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
-import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
-export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
+export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
 		

src/components/Blog/Tags.astro

@@ -1,4 +1,6 @@
 ---
+import { getSlug } from 'src/utils/tags';
+
 interface Props {
 	tags: string[];
 }
@@ -10,7 +12,7 @@ const { tags } = Astro.props;
 	{
 		tags.sort().map((tag: string, index: number) => (
 			<>
-				<a class="tag" href={`/blog/tag/${encodeURIComponent(tag)}`}>
+				<a class="tag" href={`/blog/tag/${encodeURIComponent(getSlug(tag))}`}>
 					{tag}
 				</a>
 				{index < tags.length - 1 ? ' | ' : ''}

src/pages/blog/tag/[tag].astro

@@ -2,27 +2,19 @@
 import { getCollection } from 'astro:content';
 import Layout from '@layouts/Layout.astro';
 import { add, format } from 'date-fns';
+import { getTags } from 'src/utils/tags';
 
 export async function getStaticPaths() {
-	const posts = await getCollection('blog');
+	const tags = await getTags();
-
-	const tags = ['all'];
-
-	posts.forEach((post) => {
-		post.data.tags.forEach((tag) => {
-			if (!tags.includes(tag)) {
-				tags.push(tag);
-			}
-		});
-	});
 
 	return tags.map((tag) => ({
-		params: { tag },
+		params: { tag: tag.slug },
-		props: { tag },
+		props: { tagName: tag.value },
 	}));
 }
 
 const { tag }: { tag?: string } = Astro.params;
+const { tagName } = Astro.props;
 
 const posts = await getCollection('blog', ({ data }) => {
 	if (!tag) {
@@ -33,21 +25,17 @@ const posts = await getCollection('blog', ({ data }) => {
 		return true;
 	}
 
-	return data.tags.includes(tag);
+	return data.tags.includes(tagName);
 });
 
-if (posts.length === 0) {
-	return Astro.redirect('/404');
-}
-
 posts.sort(
 	(a, b) =>
 		Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
 );
 ---
 
-<Layout title={`Blog - ${tag}`}>
+<Layout title={`Blog - ${tagName}`}>
-	<h1>All posts tagged: {tag}</h1>
+	<h1>All posts tagged: {tagName}</h1>
 	<ul>
 		{
 			posts.map((post) => (

src/utils/tags.ts

@@ -0,0 +1,40 @@
+import { getCollection } from 'astro:content';
+
+export function getSlug(input: string): string {
+	return input
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+export interface Tag {
+	value: string;
+	slug: string;
+}
+
+export async function getTags(): Promise<Tag[]> {
+	const posts = await getCollection('blog');
+
+	const tags: Tag[] = [
+		{
+			value: 'All',
+			slug: 'all',
+		},
+	];
+
+	posts.forEach((post) => {
+		post.data.tags.forEach((tag) => {
+			const tagToAdd = {
+				value: tag,
+				slug: getSlug(tag),
+			};
+
+			if (!tags.includes(tagToAdd)) {
+				tags.push(tagToAdd);
+			}
+		});
+	});
+
+	return tags;
+}