replace auto category slug with explicit slug

This allows the content creator to be in control of what each category
looks like in the URL. Maybe there are fewer words, etc.

Author: odedniv

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, '-')
+}
+
+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)
 }
-