75 lines
2.2 KiB
Plaintext
75 lines
2.2 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import Card from "@components/Card";
|
|
import Footer from "@components/Footer.astro";
|
|
import Header from "@components/Header.astro";
|
|
import { SITE } from "@config";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Main from "@layouts/Main.astro";
|
|
import getPostsByGroupCondition from "@utils/getPostsByGroupCondition";
|
|
|
|
// Redirect to 404 page if `showArchives` config is false
|
|
if (!SITE.showArchives) {
|
|
return Astro.redirect("/404");
|
|
}
|
|
|
|
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
|
|
|
const MonthMap: Record<string, string> = {
|
|
"1": "January",
|
|
"2": "February",
|
|
"3": "March",
|
|
"4": "April",
|
|
"5": "May",
|
|
"6": "June",
|
|
"7": "July",
|
|
"8": "August",
|
|
"9": "September",
|
|
"10": "October",
|
|
"11": "November",
|
|
"12": "December",
|
|
};
|
|
---
|
|
|
|
<Layout title={`Archives | ${SITE.title}`}>
|
|
<Header activeNav="archives" />
|
|
<Main pageTitle="Archives" pageDesc="All the articles I've archived.">
|
|
{
|
|
Object.entries(
|
|
getPostsByGroupCondition(posts, post =>
|
|
post.data.pubDatetime.getFullYear()
|
|
)
|
|
)
|
|
.sort(([yearA], [yearB]) => Number(yearB) - Number(yearA))
|
|
.map(([year, yearGroup]) => (
|
|
<div>
|
|
<span class="text-2xl font-bold">{year}</span>
|
|
<sup class="text-sm">{yearGroup.length}</sup>
|
|
{Object.entries(
|
|
getPostsByGroupCondition(
|
|
yearGroup,
|
|
post => post.data.pubDatetime.getMonth() + 1
|
|
)
|
|
)
|
|
.sort(([monthA], [monthB]) => Number(monthB) - Number(monthA))
|
|
.map(([month, monthGroup]) => (
|
|
<div class="flex flex-col sm:flex-row">
|
|
<div class="mt-6 min-w-36 text-lg sm:my-6">
|
|
<span class="font-bold">{MonthMap[month]}</span>
|
|
<sup class="text-xs">{monthGroup.length}</sup>
|
|
</div>
|
|
<ul>
|
|
{monthGroup.map(({ data, slug }) => (
|
|
<Card href={`/posts/${slug}`} frontmatter={data} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))
|
|
}
|
|
</Main>
|
|
|
|
<Footer />
|
|
</Layout>
|