84 lines
2.5 KiB
Plaintext
84 lines
2.5 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import Main from "@/layouts/Main.astro";
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import Header from "@/components/Header.astro";
|
|
import Footer from "@/components/Footer.astro";
|
|
import Card from "@/components/Card.astro";
|
|
import getPostsByGroupCondition from "@/utils/getPostsByGroupCondition";
|
|
import { SITE } from "@/config";
|
|
|
|
// 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 months = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
];
|
|
---
|
|
|
|
<Layout title={`Archives | ${SITE.title}`}>
|
|
<Header />
|
|
<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">{months[Number(month) - 1]}</span>
|
|
<sup class="text-xs">{monthGroup.length}</sup>
|
|
</div>
|
|
<ul>
|
|
{monthGroup
|
|
.sort(
|
|
(a, b) =>
|
|
Math.floor(
|
|
new Date(b.data.pubDatetime).getTime() / 1000
|
|
) -
|
|
Math.floor(
|
|
new Date(a.data.pubDatetime).getTime() / 1000
|
|
)
|
|
)
|
|
.map(({ data, id }) => (
|
|
<Card href={`/posts/${id}`} frontmatter={data} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))
|
|
}
|
|
</Main>
|
|
<Footer />
|
|
</Layout>
|