New post: Challenging the chatbot

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

@@ -61,27 +61,28 @@ export default async function Page({ params }: Props) {
 						className="object-cover object-middle"
 					/>
 				</div>
-				<div className="grid w-full grid-cols-1 gap-1 text-secondary sm:grid-cols-[1fr_auto_1fr] sm:items-center">
-					<p className="sm:justify-self-start">{formatDate(metadata.date)}</p>
-					<p className="sm:justify-self-center">
-						by{' '}
-						<Link href={metadata.author.url} target="_blank" rel="noopener noreferrer">
-							{metadata.author.name}
-						</Link>
-					</p>
-					<p className="sm:justify-self-end">{metadata.category}</p>
-				</div>
 				<article className="mx-auto max-w-full sm:max-w-2xl">
-					<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-8">
 						<div className="flex flex-col gap-2">
 							<h1>{metadata.title}</h1>
 							{metadata.subtitle ? <h3 className="mt-0 text-secondary">{metadata.subtitle}</h3> : null}
+							<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-secondary">
+								<span>{formatDate(metadata.date)}</span>
+								<span aria-hidden="true">&middot;</span>
+								<Link href={metadata.author.url} target="_blank" rel="noopener noreferrer">
+									{metadata.author.name}
+								</Link>
+								<span aria-hidden="true">&middot;</span>
+								<span>{metadata.category}</span>
+							</div>
 						</div>
 						<TableOfContents items={toc} />
-						<Post />
+						<div className="flex flex-col gap-4">
+							<Post />
+						</div>
 					</div>
 					<div className="flex flex-col gap-4 pt-8">
-						<CTA category={metadata.category} />
+						<CTA category={metadata.category} size="compact" />
 						<NextPost slug={slug} />
 					</div>
 				</article>

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

@@ -1,4 +1,7 @@
+import Link from 'next/link'
+import { CATEGORIES, type Category } from '~/lib/constants/blog'
 import { META } from '~/lib/constants/metadata'
+import { cn } from '~/lib/utils/cn'
 import { createMetadata } from '~/lib/utils/create-metadata'
 import { getPostMetadata } from '~/lib/utils/posts'
 import { Card } from '~/ui/card'
@@ -9,17 +12,87 @@ export const metadata = createMetadata({
 	title: `Blog | ${META.title}`
 })
 
-export default async function Page() {
+type BlogSearchParams = Promise<Record<string, string | string[] | undefined>>
+
+const CATEGORY_SLUG_BY_LABEL = Object.fromEntries(
+	Object.values(CATEGORIES).map(category => [category, category.toLowerCase().replaceAll(' ', '-')])
+) as Record<Category, string>
+
+const CATEGORY_LABEL_BY_SLUG = Object.fromEntries(
+	Object.entries(CATEGORY_SLUG_BY_LABEL).map(([category, slug]) => [slug, category])
+) as Record<string, Category>
+
+const getSelectedCategories = (categoryParam: string | string[] | undefined) => {
+	const selectedSlugs = Array.isArray(categoryParam)
+		? categoryParam.flatMap(category => category.split(','))
+		: categoryParam
+			? categoryParam.split(',')
+			: []
+
+	return selectedSlugs
+		.map(slug => CATEGORY_LABEL_BY_SLUG[slug])
+		.filter((category): category is Category => Boolean(category))
+}
+
+const getCategoryHref = (category: Category, selectedCategories: Category[]) => {
+	const nextCategories = selectedCategories.includes(category)
+		? selectedCategories.filter(selectedCategory => selectedCategory !== category)
+		: [...selectedCategories, category]
+
+	if (nextCategories.length === 0) return '/blog'
+
+	const params = new URLSearchParams()
+	params.set(
+		'category',
+		nextCategories.map(nextCategory => CATEGORY_SLUG_BY_LABEL[nextCategory]).join(',')
+	)
+
+	return `/blog?${params.toString()}`
+}
+
+export default async function Page({ searchParams }: { searchParams: BlogSearchParams }) {
 	const posts = await getPostMetadata()
+	const resolvedSearchParams = await searchParams
+	const selectedCategories = getSelectedCategories(resolvedSearchParams.category)
+	const categories = Object.values(CATEGORIES).filter(category =>
+		posts.some(post => post.category === category)
+	)
+	const filteredPosts =
+		selectedCategories.length > 0
+			? posts.filter(post => selectedCategories.includes(post.category))
+			: posts
 
 	return (
 		<div className="flex min-h-screen flex-col items-center gap-16 p-4 py-32">
-			<div className="flex flex-col items-center gap-2">
-				<h1>Blog</h1>
-				<p className="text-secondary">The latest from our team</p>
+			<div className="flex flex-col items-center gap-6">
+				<div className="flex flex-col items-center gap-2">
+					<h1>Blog</h1>
+					<p className="text-secondary">The latest from our team</p>
+				</div>
+				<div className="flex max-w-3xl flex-wrap items-center justify-center gap-2">
+					{categories.map(category => {
+						const isSelected = selectedCategories.includes(category)
+
+						return (
+							<Link
+								href={getCategoryHref(category, selectedCategories)}
+								key={category}
+								aria-current={isSelected ? 'page' : undefined}
+								className={cn(
+									'rounded-full border px-4 py-2 font-medium text-sm no-underline transition-all',
+									isSelected
+										? 'border-primary bg-primary text-accent'
+										: 'border-subtle text-secondary hover:border-primary/30 hover:text-primary'
+								)}
+							>
+								{category}
+							</Link>
+						)
+					})}
+				</div>
 			</div>
 			<div className="grid max-w-4xl gap-16 sm:grid-cols-2">
-				{posts.map((post, index) => (
+				{filteredPosts.map((post, index) => (
 					<Card
 						imgSrc={post.bannerImageUrl}
 						imgAlt={post.title}
@@ -29,6 +102,9 @@ export default async function Page() {
 					/>
 				))}
 			</div>
+			{filteredPosts.length === 0 ? (
+				<p className="max-w-md text-center text-secondary">No posts match the selected filters.</p>
+			) : null}
 		</div>
 	)
 }