feat: replace slugified title with unslugified tag name (#198)

Update slugified titles to be unslugified in the tag page. This is for better SEO and better a11y. Url and tag elelemnts will still be slugified.

Closes: #179

src/pages/tags/[tag].astro

@@ -13,6 +13,7 @@ import getSortedPosts from "@utils/getSortedPosts";
 export interface Props {
   post: CollectionEntry<"blog">;
   tag: string;
+  tagName: string;
 }
 
 export async function getStaticPaths() {
@@ -20,15 +21,15 @@ export async function getStaticPaths() {
 
   const tags = getUniqueTags(posts);
 
-  return tags.map(tag => {
+  return tags.map(({ tag, tagName }) => {
     return {
       params: { tag },
-      props: { tag },
+      props: { tag, tagName },
     };
   });
 }
 
-const { tag } = Astro.props;
+const { tag, tagName } = Astro.props;
 
 const posts = await getCollection("blog", ({ data }) => !data.draft);
 
@@ -37,12 +38,12 @@ const tagPosts = getPostsByTag(posts, tag);
 const sortTagsPost = getSortedPosts(tagPosts);
 ---
 
-<Layout title={`Tag:${tag} | ${SITE.title}`}>
+<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
   <Header activeNav="tags" />
   <Main
-    pageTitle={[`Tag:`, `${tag}`]}
+    pageTitle={[`Tag:`, `${tagName}`]}
     titleTransition={tag}
-    pageDesc={`All the articles with the tag "${tag}".`}
+    pageDesc={`All the articles with the tag "${tagName}".`}
   >
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
     <ul>

src/pages/tags/index.astro

@@ -17,7 +17,7 @@ let tags = getUniqueTags(posts);
   <Header activeNav="tags" />
   <Main pageTitle="Tags" pageDesc="All the tags used in posts.">
     <ul>
-      {tags.map(tag => <Tag name={tag} size="lg" />)}
+      {tags.map(({ tag }) => <Tag {tag} size="lg" />)}
     </ul>
   </Main>
   <Footer />