---
import ListingPage from "~/components/ListingPage.astro";
import PageLayout from "~/layouts/PageLayout.astro";
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');

// TODO: show all posts when running locally.
const filteredPosts = posts
  .filter((post) => !post.data.draft)
  .filter((post) => post.data.date);

const sortedPosts = filteredPosts
  .map((post) => {
    const slug = `/blog/${post.slug}`;

    return { item: post, slug };
  })
  .sort(
    (a, b) =>
      new Date(b.item.data.date).valueOf() -
      new Date(a.item.data.date).valueOf()
  );
---

<ListingPage items={sortedPosts} title="Blog">
  <p slot="intro">
    This is where I used to publish my blog posts, technical posts
    and tutorials. These days, I focus instead on my
    <a href="/daily">daily email list</a>.
  </p>
</ListingPage>