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

const allArticles = await getCollection("blog");
const sortedArticles = allArticles.sort((a, b) => {
  return b.data.pubDate.valueOf() - a.data.pubDate.valueOf();
});
---

<PageLayout
  title="Blog"
  description="Friendly technical articles with a focus on web and GNU/Linux topics."
>
  <ul>
    {
      sortedArticles.map(({ id, data: { title, pubDate } }) => (
        <li>
          <Date date={pubDate} />
          <span>&raquo;</span>
          <a class="text-blue-800 hover:no-underline" href={`/blog/${id}`}>
            {title}
          </a>
        </li>
      ))
    }
  </ul>
</PageLayout>
