---
import { getCollection } from 'astro:content';

import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro";

const posts = await getCollection('posts');
---

<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
    <a class="button" id="home" href="/">Home</a>

    <h1>All Posts</h1>
    <p>Egg Book</p>

    <hr>

    <ul role="list" class="project-list">
        {posts.map(project => (
            <Card
                href=`/posts/${project.slug}`
                title={project.data.title}
                body={project.data.description}
            />
        ))}
    </ul>
</Layout>

<style lang="scss">
    #home { margin-bottom: 32px; }
</style>