feat(ui): show url paths of category and tags in slug format

resolve #489

src/app/(blog)/categories/[category]/page.tsx

@@ -3,8 +3,9 @@ import type { Metadata } from 'next'
 
 import { KnowledgeList } from 'components/KnowledgeList'
 
-import { getUniqueCategoryList, getPostListOfCategory } from 'lib/categories'
+import { getUniqueCategoryList, getPostListOfCategory, getNormalCategoryString } from 'lib/categories'
 import { getSortedPosts } from 'lib/getSortedPosts'
+import { transformToSlug } from 'lib/utils'
 import { FolderOpen } from './Icons'
 
 interface Props {
@@ -13,21 +14,21 @@ interface Props {
 
 export function generateMetadata({ params }: Props): Metadata {
   return {
-    title: `mfg-b | ${params.category}`,
-    description: `Posts about ${params.category} category`
+    title: `mfg-b | ${getNormalCategoryString(params.category)}`,
+    description: `Posts about ${getNormalCategoryString(params.category)} category`
   }
 }
 
 export default function Page({ params }: Props) {
   const { category } = params
 
-  const postList = getSortedPosts(getPostListOfCategory(category))
+  const postList = getSortedPosts(getPostListOfCategory(transformToSlug(category)))
 
   return (
     <div className="blog-content-w m-auto">
       <h1 className="mb-5 font-bold text-2xl flex items-center gap-2">
         <FolderOpen weight="duotone" className="text-3xl" />
-        {category}
+        {getNormalCategoryString(category)}
       </h1>
       <main>
         <KnowledgeList posts={postList} />
@@ -39,5 +40,5 @@ export default function Page({ params }: Props) {
 export async function generateStaticParams() {
   const categoryList = getUniqueCategoryList()
 
-  return categoryList.map(category => ({ category }))
+  return categoryList.map(category => ({ category: transformToSlug(category) }))
 }

src/app/(blog)/categories/page.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { getCategoriesAndNumberOfPosts } from 'lib/categories'
+import { transformToSlug } from 'lib/utils'
 
 export const metadata: Metadata = {
   title: 'mfg-b | Categories',
@@ -19,7 +20,7 @@ export default function Page() {
         {categories
           .sort((a, b) => a.category.localeCompare(b.category))
           .map((categoryData, index) => (
-            <Link key={index} href={`/categories/${categoryData.category}`}>
+            <Link key={index} href={`/categories/${transformToSlug(categoryData.category)}`}>
               <div className="py-1 px-4 rounded-lg border-2 border-solid border-neutral-700 dark:border-neutral-500 hover:border-blue-700 dark:hover:border-blue-500 font-bold text-neutral-700 dark:text-neutral-500 hover:text-blue-700 dark:hover:text-blue-500  hover:bg-blue-700/10 dark:hover:bg-blue-500/10 duration-100 hover:cursor-pointer">
                 <p>
                   {categoryData.category}

src/app/(blog)/post/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { allPosts, type Post } from 'contentlayer/generated'
 
 import { Date } from 'components/Date'
 import { authors } from 'lib/authors'
+import { transformToSlug } from 'lib/utils'
 
 interface Props {
   params: { slug: string }
@@ -55,7 +56,7 @@ export default function Page({ params }: Props) {
           <p>
             <Date dateString={post.date} /> &#8226;{' '}
             <Link
-              href={`/category/${post.category}`}
+              href={`/category/${transformToSlug(post.category)}`}
               className="hover:text-blue-500 dark:hover:text-blue-400"
             >
               {post.category}
@@ -71,7 +72,7 @@ export default function Page({ params }: Props) {
           )}
           <p className="flex flex-wrap gap-3 mt-1">
             {tags.map((tag, index) => (
-              <Link href={`/tag/${tag}`} key={index}>
+              <Link href={`/tag/${transformToSlug(tag)}`} key={index}>
                 <span className="flex items-center justify-center gap-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors duration-200 hover:cursor-pointe">
                   {tag} <FiTag size={15} />
                 </span>

src/app/(blog)/tag/[tag]/page.tsx

@@ -3,29 +3,30 @@ import type { Metadata } from 'next'
 
 import { KnowledgeList } from 'components/KnowledgeList'
 
-import { getUniqueTagListFromPosts, getPostListBasedOnTag } from 'lib/tags'
+import { getUniqueTagListFromPosts, getPostListBasedOnTag, getNormalTagString } from 'lib/tags'
 import { getSortedPosts } from 'lib/getSortedPosts'
 import { Tag } from './Icons'
+import { transformToSlug } from 'lib/utils'
 
 interface Props {
   params: { tag: string }
 }
 
 export function generateMetadata({ params }: Props): Metadata {
   return {
-    title: `mfg-b | ${params.tag}`,
-    description: `Posts with tag ${params.tag}`
+    title: `mfg-b | ${getNormalTagString(params.tag)}`,
+    description: `Posts with tag "${getNormalTagString(params.tag)}"`
   }
 }
 
 export default function Page({ params }: Props) {
   const { tag } = params
-  const postList = getSortedPosts(getPostListBasedOnTag(tag))
+  const postList = getSortedPosts(getPostListBasedOnTag(transformToSlug(tag)))
 
   return (
     <div className="blog-content-w m-auto">
       <h1 className="mb-5 font-bold text-2xl flex items-end gap-2">
-        {tag}
+        {getNormalTagString(tag)}
         <Tag />
       </h1>
       <main>
@@ -38,5 +39,5 @@ export default function Page({ params }: Props) {
 export async function generateStaticParams() {
   const tagList = getUniqueTagListFromPosts()
 
-  return tagList.map(tag => ({ tag }))
+  return tagList.map(tag => ({ tag: transformToSlug(tag) }))
 }

src/lib/authors.ts

@@ -1,6 +1,6 @@
 import { allPosts } from 'contentlayer/generated'
 
-import { removeRepeatedValuesFromArray } from './utils'
+import { removeRepeatedValuesFromArray, transformToSlug } from './utils'
 import { getSortedPosts } from './getSortedPosts'
 
 export function getAuthors() {
@@ -10,11 +10,11 @@ export function getAuthors() {
 }
 
 export function getAuthorByUser(user: string) {
-  return authors.filter(author => author.user === user)[0]
+  return authors.filter(author => transformToSlug(author.user) === transformToSlug(user))[0]
 }
 
 export function getPostsByAuthor(authorUsername: string) {
-  const postList = allPosts.filter(post => post.author === authorUsername)
+  const postList = allPosts.filter(post => transformToSlug(post.author) === transformToSlug(authorUsername))
 
   return getSortedPosts(postList)
 }

src/lib/categories.ts

@@ -1,5 +1,5 @@
 import { allPosts } from 'contentlayer/generated'
-import { getFrequencyOfValue, removeRepeatedValuesFromArray } from './utils'
+import { getFrequencyOfValue, removeRepeatedValuesFromArray, transformToSlug } from './utils'
 
 const getRawCategoryList = () => allPosts.map(post => post.category)
 
@@ -28,4 +28,10 @@ export function getCategoriesAndNumberOfPosts(): CategoriesAndNumberOfPosts[] {
 }
 
 export const getPostListOfCategory = (category: string) =>
-  allPosts.filter(post => post.category === category)
+  allPosts.filter(post => transformToSlug(post.category) === transformToSlug(category))
+
+  export function getNormalCategoryString(category: string) {
+    const categories = getUniqueCategoryList()
+
+    return categories.find(currCategory => transformToSlug(currCategory) === transformToSlug(category))
+  }

src/lib/tags.ts

@@ -1,5 +1,5 @@
 import { allPosts } from 'contentlayer/generated'
-import { removeRepeatedValuesFromArray } from './utils'
+import { removeRepeatedValuesFromArray, transformToSlug } from './utils'
 
 const getRawTagListFromPosts = (): string[] => {
   const listOfTagList = allPosts.map(post => {
@@ -20,9 +20,15 @@ export const getUniqueTagListFromPosts = () =>
 
 export function getPostListBasedOnTag(tag: string) {
   const filteredPostList = allPosts.filter(post => {
-    const listOfTags = post.tags.split(',').map(rawTag => rawTag.trim())
-    return listOfTags.includes(tag)
+    const listOfTags = post.tags.split(',').map(rawTag => transformToSlug(rawTag.trim()))
+    return listOfTags.includes(transformToSlug(tag))
   })
 
   return filteredPostList
 }
+
+export function getNormalTagString(tag: string) {
+  const allTags = getUniqueTagListFromPosts()
+
+  return allTags.find(currTag => transformToSlug(currTag) === transformToSlug(tag))
+}