dotio3 / src / components / PostsIndex.astro

---
import { getCollection } from "astro:content";
import PrettyDate from "./PrettyDate.astro";
// import Tags from "./Tags.astro";
import type { CollectionEntry } from "astro:content";

interface Props {
  limit?: number;
}

const { limit = Infinity } = Astro.props;

const posts = (await getCollection("blog"))
  .sort((a, b) => b.data.publish_date.valueOf() - a.data.publish_date.valueOf())
  .slice(0, limit);

type Post = CollectionEntry<"blog">;

const postsByYear = Object.entries(
  posts.reduce(
    (acc, post) => {
      const year = post.data.publish_date.getFullYear().toString();
      acc[year] ??= [];
      acc[year].push(post);
      return acc;
    },
    {} as Record<string, Post[]>,
  ),
).sort(([year1], [year2]) => year2.localeCompare(year1));
---

<div class="posts">
  {
    postsByYear.map(([year, posts]) => {
      if (!posts) return null;

      return (
        <>
          <h3>{year}</h3>
          <ul>
            {posts.map(
              ({
                id,
                data: {
                  title,
                  description: snippet,
                  publish_date,
                  hero_image,
                  // tags,
                },
              }) => (
                <li>
                  <div class="flex gap-2 items-center">
                    <a
                      href={`/blog/${id}`}
                      class="leading-tight inline-block"
                      transition:name={`post-title-${id}`}
                    >
                      {title}
                    </a>
                    <div class="border-b border-dashed self-center flex-1" />
                    <PrettyDate date={publish_date ?? new Date()} />
                  </div>
                  <p transition:name={`post-snippet-${id}`}>{snippet}</p>
                </li>
              ),
            )}
          </ul>
        </>
      );
    })
  }
</div>