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/components/Tag.astro

@@ -1,10 +1,10 @@
 ---
 export interface Props {
-  name: string;
+  tag: string;
   size?: "sm" | "lg";
 }
 
-const { name, size = "sm" } = Astro.props;
+const { tag, size = "sm" } = Astro.props;
 ---
 
 <li
@@ -13,8 +13,8 @@ const { name, size = "sm" } = Astro.props;
   }`}
 >
   <a
-    href={`/tags/${name.toLowerCase()}`}
-    transition:name={name.toLowerCase()}
+    href={`/tags/${tag}`}
+    transition:name={tag}
     class={`${size === "sm" ? "text-sm" : "text-lg"} pr-2 group`}
   >
     <svg
@@ -24,7 +24,7 @@ const { name, size = "sm" } = Astro.props;
         d="M16.018 3.815 15.232 8h-4.966l.716-3.815-1.964-.37L8.232 8H4v2h3.857l-.751 4H3v2h3.731l-.714 3.805 1.965.369L8.766 16h4.966l-.714 3.805 1.965.369.783-4.174H20v-2h-3.859l.751-4H21V8h-3.733l.716-3.815-1.965-.37zM14.106 14H9.141l.751-4h4.966l-.752 4z"
       ></path>
     </svg>
-    &nbsp;<span>{name.toLowerCase()}</span>
+     &nbsp;<span>{tag}</span>
   </a>
 </li>
 

src/layouts/PostDetails.astro

@@ -70,7 +70,7 @@ const layoutProps = {
     </article>
 
     <ul class="my-8">
-      {tags.map(tag => <Tag name={slugifyStr(tag)} />)}
+      {tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
     </ul>
     <div class="flex justify-end">
       <button

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 />

src/utils/getUniqueTags.ts

@@ -1,16 +1,21 @@
 import { slugifyStr } from "./slugify";
 import type { CollectionEntry } from "astro:content";
 
+interface Tag {
+  tag: string;
+  tagName: string;
+}
+
 const getUniqueTags = (posts: CollectionEntry<"blog">[]) => {
   const filteredPosts = posts.filter(({ data }) => !data.draft);
-  const tags: string[] = filteredPosts
+  const tags: Tag[] = filteredPosts
     .flatMap(post => post.data.tags)
-    .map(tag => slugifyStr(tag))
+    .map(tag => ({ tag: slugifyStr(tag), tagName: tag }))
     .filter(
-      (value: string, index: number, self: string[]) =>
-        self.indexOf(value) === index
+      (value, index, self) =>
+        self.findIndex(tag => tag.tag === value.tag) === index
     )
-    .sort((tagA: string, tagB: string) => tagA.localeCompare(tagB));
+    .sort((tagA, tagB) => tagA.tag.localeCompare(tagB.tag));
   return tags;
 };