---
import Page from "../../layouts/Page.astro";
import { getCollection } from "astro:content";
import {formatDate} from "../../util";
import "../../styles/cards.css";

const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---
<Page title="Blog" description="Where I post can be anything!">
   <main>
      <div class="grid">
         {allBlogPosts.map((post) => (
             <article class="card">
                <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
                <small>{formatDate(post.data.pubDate)}</small>
                <p>{post.data.description}</p>
                <div class="tags">
                   {post.data.tags.map((tag) => (
                       <a href={`/blog/tags/${tag}`}>{tag}</a>
                   ))}
                </div>
             </article>
         ))
         }
      </div>
   </main>
</Page>
<style>
   .tags {
      display: flex;
      flex-direction: row;
      gap: 1em;
   }
</style>