HangerThem
61ea416ab8
- Replace the create-next-app README with real project docs (features, env vars, frontmatter schema, Markdown extensions, deployment) - Drop ESLint (unused by any script; oxlint is the linter) and the unrelated 'hast' package; move oxlint, oxfmt and puppeteer to devDependencies (locked versions unchanged) - Extract PostList, used by the tag and category pages - Use shared Intl formatters for post dates, pinned to Europe/Prague so the build server's timezone can't shift dates - Use <h1> for the tag/category page headings (same styling) - Remove math/mermaid flags from posts that don't use them; fix a typo in the Tessera cover alt text
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { getAllCategories } from '@/lib/categories'
|
|
import { getAllPostsMeta } from '@/lib/posts'
|
|
import { slugify } from '@/utils/slug'
|
|
import type { Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
import { PostList } from '@/components/post/PostList'
|
|
import { pageMetadata } from '@/app/metadata'
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
return pageMetadata({
|
|
title: 'Categories',
|
|
description: 'All post categories on the blog',
|
|
path: '/categories',
|
|
})
|
|
}
|
|
|
|
export default function CategoriesPage() {
|
|
const categories = getAllCategories()
|
|
const posts = getAllPostsMeta()
|
|
const categoryNames = Object.keys(categories).toSorted((a, b) => a.localeCompare(b))
|
|
|
|
return (
|
|
<main className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 w-full">
|
|
<h1 className="font-mono text-sm text-fg-dim mb-2">~/categories</h1>
|
|
|
|
<ul className="border-l border-border ml-1">
|
|
{categoryNames.map((category) => {
|
|
const categoryPosts = posts.filter((post) => post.category === category)
|
|
|
|
return (
|
|
<li key={category} className="pl-5">
|
|
<Link
|
|
href={`/categories/${slugify(category)}`}
|
|
className="group flex items-baseline gap-2 py-2 px-2 -ml-2 hover:bg-accent/10 transition-colors"
|
|
>
|
|
<span className="font-bold group-hover:text-accent transition-colors">
|
|
{category}
|
|
</span>
|
|
<span className="text-xs text-fg">({categoryPosts.length})</span>
|
|
</Link>
|
|
|
|
<PostList posts={categoryPosts} className="ml-3" />
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</main>
|
|
)
|
|
}
|