replace auto category slug with explicit slug

src/components/Category.astro

@@ -1,22 +1,20 @@
 ---
-import { cn, sluglify } from '@/utils'
+import { cn } from '@/utils'
 
-const { name = 'View All', activeCategory } = Astro.props
+const { category, activeCategory } = Astro.props
 const currentPath = Astro.url.pathname
-const unsluglifyNameCategory = sluglify(name.toLowerCase())
 
 const isActive =
-	activeCategory?.toLocaleLowerCase() === unsluglifyNameCategory ||
-	(currentPath === '/' && name === 'View All')
+	(category && activeCategory === category) || (!category /* View All */ && currentPath === '/')
 ---
 
 <a
-	href={name === 'View All' ? '/' : sluglify(`/category/${unsluglifyNameCategory}/1`)}
+	href={!category ? '/' : `/category/${category.slug}/1`}
 	class={cn(
 		`text-gray-600 dark:text-gray-300  pb-2.5 first-letter:uppercase font-medium hover:text-gray-800 border-b-2 border-opacity-0 dark:border-opacity-0 border-black dark:border-white dark:hover:border-white hover:border-opacity-100 transition-colors duration-150 ease-linear  `,
 		isActive &&
 			`border-black border-b-2 text-black z-10  dark:border-white dark:text-white dark:border-opacity-100 border-opacity-100`
 	)}
 >
-	{name}
+	{category?.title || 'View All'}
 </a>

src/components/ListCategories.astro

@@ -8,11 +8,7 @@ const { activeCategory } = Astro.props
 
 <div class='relative flex flex-wrap min-w-full gap-5'>
 	<Category />
-	{
-		categories.map((category: string) => (
-			<Category name={category} activeCategory={activeCategory} />
-		))
-	}
+	{categories.map((category) => <Category category={category} activeCategory={activeCategory} />)}
 
 	<div class='hidden sm:block absolute w-full bottom-0 border-b-2 -z-40 dark:border-gray-600'></div>
 </div>

src/content/config.ts

@@ -13,7 +13,7 @@ const blog = defineCollection({
 				.or(z.date())
 				.transform((val) => new Date(val)),
 			heroImage: image(),
-			category: z.enum(CATEGORIES),
+			category: z.enum(CATEGORIES.map((category) => category.title)),
 			tags: z.array(z.string()),
 			draft: z.boolean().default(false)
 		})

src/data/categories.ts

@@ -1,8 +1,18 @@
 // List of categories for blog posts
-export const CATEGORIES = [
-	'Category 1',
-	'Category 2',
-	'Category 3',
-	'Category 4',
-	'Category 5'
-] as const
+const CATEGORY_TITLES = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
+
+function sluglify(text: string) {
+	return text.replace(/\s+/g, '-').toLowerCase()
+}
+
+export const CATEGORIES = CATEGORY_TITLES.map((title) => ({ title, slug: sluglify(title) }))
+
+// Alternatively, you can be explicit with the slugs by replacing the content of the whole file with:
+//
+// export const CATEGORIES = [
+// 	{ slug: 'category-1', title: 'Category 1' },
+// 	{ slug: 'category-2', title: 'Category 2' },
+// 	{ slug: 'category-3', title: 'Category 3' },
+// 	{ slug: 'category-4', title: 'Category 4' },
+// 	{ slug: 'category-5', title: 'Category 5' },
+// ] as const

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

@@ -3,41 +3,32 @@ import BaseLayout from '@/layouts/BaseLayout'
 import ListPosts from '@/components/ListPosts'
 import ListCategories from '@/components/ListCategories'
 import TitlePage from '@/components/TitlePage'
-import { sluglify, unsluglify, getCategories, getPosts } from '@/utils'
+import { getCategories, getPosts } from '@/utils'
 import { siteConfig } from '@/data/site.config'
 import Pagination from '@/components/Pagination'
 
 export async function getStaticPaths({ paginate }: any) {
 	const categories = await getCategories()
 	const allPosts = await getPosts()
 
-	return categories.flatMap((category: string) => {
-		const unsluglifyNameCategory = unsluglify(category!.toLowerCase())
-		const filteredPosts = allPosts.filter(
-			(post) => post.data.category.toLowerCase() === unsluglifyNameCategory
-		)
+	return categories.flatMap((category) => {
+		const filteredPosts = allPosts.filter((post) => post.data.category === category.title)
 
 		return paginate(filteredPosts, {
-			params: {
-				category: sluglify(category.toLowerCase())
-			},
+			params: { category: category.slug },
+			props: { category },
 			pageSize: siteConfig.paginationSize
 		})
 	})
 }
-const params = Astro.params
-const { page } = Astro.props
 
-const unsluglifyNameCategory = unsluglify(params.category!.toLowerCase())
-const categoryName = (await getCategories()).find(
-	(category) => category.toLowerCase() === unsluglifyNameCategory
-)
+const { category, page } = Astro.props
 const posts = page.data
 ---
 
-<BaseLayout title={categoryName}>
-	<TitlePage title={categoryName} />
-	<ListCategories activeCategory={params.category} />
+<BaseLayout title={category.title}>
+	<TitlePage title={category.title} />
+	<ListCategories activeCategory={category} />
 	<ListPosts posts={posts} />
 	<Pagination page={page} />
 </BaseLayout>

src/utils/index.ts

@@ -1,4 +1,3 @@
-export { sluglify, unsluglify } from './sluglify'
 export { cn } from './cn'
 export { getCategories, getPosts, getTags, getPostByTag, filterPostsByCategory } from './post'
 export { remarkReadingTime } from './readTime'

src/utils/post.ts

@@ -3,12 +3,10 @@ import { CATEGORIES } from '@/data/categories'
 
 export const getCategories = async () => {
 	const posts = await getCollection('blog')
-	const categories = new Set(
+	const usedCategories = new Set(
 		posts.filter((post) => !post.data.draft).map((post) => post.data.category)
 	)
-	return Array.from(categories).sort((a, b) =>
-		CATEGORIES.indexOf(a) < CATEGORIES.indexOf(b) ? -1 : 1
-	)
+	return CATEGORIES.filter((category) => usedCategories.has(category.title))
 }
 
 export const getPosts = async (max?: number) => {
@@ -50,4 +48,3 @@ export const filterPostsByCategory = async (category: string) => {
 		.filter((post) => !post.data.draft)
 		.filter((post) => post.data.category.toLowerCase() === category)
 }
-