---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/CardPost.astro";
const allPosts = await getCollection("posts");
const pageTitle = "Posts";
---

<Layout pageTitle={pageTitle}>
    <div class="gif">
        <img src="/.netlify/images?url=/images/blog.webp" role="presentation" width="300" height="259" decoding="async">
    </div>
    <h2>Blog</h2>
    <ul role="list" class="link-card-grid">
        {
            allPosts.map((cardPost) => (
                <Card
                    url={`/posts/${cardPost.id}/`}
                    image={cardPost.data.image.url}
                    title={cardPost.data.title}
                    date={cardPost.data.date}
                />
            ))
        }
    </ul>
</Layout>
