diff --git a/src/components/Category.astro b/src/components/Category.astro index 41b90a8a..17da09e0 100644 --- a/src/components/Category.astro +++ b/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 === '/') --- - {name} + {category?.title || 'View All'} diff --git a/src/components/ListCategories.astro b/src/components/ListCategories.astro index 68c47e50..46c16ee8 100644 --- a/src/components/ListCategories.astro +++ b/src/components/ListCategories.astro @@ -8,11 +8,7 @@ const { activeCategory } = Astro.props
- { - categories.map((category: string) => ( - - )) - } + {categories.map((category) => )}
diff --git a/src/content/config.ts b/src/content/config.ts index 035dba99..59557bd8 100644 --- a/src/content/config.ts +++ b/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) }) diff --git a/src/data/categories.ts b/src/data/categories.ts index d2e7d53b..dd7f38e8 100644 --- a/src/data/categories.ts +++ b/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 diff --git a/src/pages/category/[category]/[page].astro b/src/pages/category/[category]/[page].astro index a1db7e4c..cb23628a 100644 --- a/src/pages/category/[category]/[page].astro +++ b/src/pages/category/[category]/[page].astro @@ -3,7 +3,7 @@ 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' @@ -11,33 +11,24 @@ 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 --- - - - + + + diff --git a/src/utils/index.ts b/src/utils/index.ts index 5e4a27e5..4d9d7da5 100644 --- a/src/utils/index.ts +++ b/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' diff --git a/src/utils/post.ts b/src/utils/post.ts index 7c71bd8e..dfc9c9f2 100644 --- a/src/utils/post.ts +++ b/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) } - diff --git a/src/utils/sluglify.ts b/src/utils/sluglify.ts deleted file mode 100644 index 5b747a72..00000000 --- a/src/utils/sluglify.ts +++ /dev/null @@ -1,7 +0,0 @@ -export function sluglify(text: string) { - return text.replace(/\s+/g, '-') -} - -export function unsluglify(text: string) { - return text.replace(/-/g, ' ') -}