michaelrausch-24/src/pages/blog/index.astro

---
import { type CollectionEntry, getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import Container from "@components/Container.astro";
import ArrowCard from "@components/ArrowCard.astro";
import { BLOG } from "@consts";

const data = (await getCollection("blog"))
  .filter(post => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
  
type Acc = {
  [year: string]: CollectionEntry<"blog">[];
}

const posts = data.reduce((acc: Acc, post) => {
    const year = post.data.date.getFullYear().toString();
    if (!acc[year]) {
      acc[year] = [];
    }
    acc[year].push(post);
    return acc;
  }, {});

const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a)); 
---

<PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
  <Container>
    <div class="space-y-10">
      <div class="animate font-semibold text-black dark:text-white text-4xl font-serif">
        Blog
      </div>
      <div class="space-y-4">
        {years.map(year => (
          <section class="animate space-y-4">
            <div class="font-semibold text-black dark:text-white">
              {year}
            </div>
            <div>
              <ul class="flex flex-col gap-4">
                {
                  posts[year].map((post) => (
                    <li>
                      <ArrowCard entry={post}/>
                    </li>
                  ))
                }
              </ul>
            </div>
          </section>
        ))}
      </div>
    </div>
  </Container>
</PageLayout>