blog.z0x.ca/src/pages/blog/[...page].astro
z0x 36870785bc
All checks were successful
build dist / build-dist (push) Successful in 32s
refactor: biome lint
2025-04-24 22:12:22 -04:00

72 lines
1.9 KiB
Text

---
import { type CollectionEntry, getCollection } from "astro:content";
import BlogCard from "@/components/BlogCard.astro";
import Breadcrumbs from "@/components/Breadcrumbs.astro";
import Container from "@/components/Container.astro";
import PaginationComponent from "@/components/ui/pagination";
import { SITE } from "@/consts";
import Layout from "@/layouts/Layout.astro";
import type { PaginateFunction } from "astro";
export async function getStaticPaths({
paginate,
}: {
paginate: PaginateFunction;
}) {
const allPosts = await getCollection("blog", ({ data }) => !data.draft);
return paginate(
allPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()),
{ pageSize: SITE.postsPerPage },
);
}
const { page } = Astro.props;
const postsByYear = page.data.reduce(
(acc: Record<string, CollectionEntry<"blog">[]>, post) => {
const year = post.data.date.getFullYear().toString();
(acc[year] ??= []).push(post);
return acc;
},
{},
);
const years = Object.keys(postsByYear).sort(
(a, b) => Number.parseInt(b) - Number.parseInt(a),
);
---
<Layout title="Blog" description="Blog">
<Container class="flex grow flex-col gap-y-6">
<Breadcrumbs
items={[
{ label: 'Blog', href: '/blog', icon: 'lucide:archive' },
{ label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
]}
/>
<div class="flex min-h-[calc(100vh-18rem)] flex-col gap-y-8">
{
years.map((year) => (
<section class="flex flex-col gap-y-4">
<div class="font-medium">{year}</div>
<ul class="flex flex-col gap-4">
{postsByYear[year].map((post) => (
<li>
<BlogCard entry={post} />
</li>
))}
</ul>
</section>
))
}
</div>
<PaginationComponent
currentPage={page.currentPage}
totalPages={page.lastPage}
baseUrl="/blog/"
client:load
/>
</Container>
</Layout>