---
import BaseLayout from '../../layouts/BaseLayout.astro';
import FormattedDate from '../../components/FormattedDate.astro';
import { getPublishedPosts } from '../../utils/posts';

const posts = await getPublishedPosts();
---

<BaseLayout title="Blog" description="Writing and notes by Jean-Luc Makiola." width="narrow">
  <h1 class="page-title">Blog</h1>
  {posts.length === 0 && <p>No posts yet — check back soon.</p>}
  <ul class="post-list">
    {
      posts.map((post) => (
        <li>
          <a class="post-card" href={`/blog/${post.id}/`}>
            <h3>{post.data.title}</h3>
            <FormattedDate date={post.data.pubDate} />
            {post.data.description && <p class="excerpt">{post.data.description}</p>}
          </a>
        </li>
      ))
    }
  </ul>
</BaseLayout>