---
import '@styles/prose.css';

import { render } from 'astro:content';
import { listPosts } from '@lib/content.ts';
import BaseLayout from '@layouts/BaseLayout.astro';

// return all posts in dev, only non-draft in prod
const entries = await listPosts();
const posts = await Promise.all(entries.map(async entry => {
    const { remarkPluginFrontmatter } = await render(entry);
    return { ...entry, remarkPluginFrontmatter };
}));
---

<BaseLayout pageTitle="Posts">
    <div class="prose">
        <h1>All Posts</h1>
        <ul>
            {posts.map( (p, idx) =>
                <li>
                    {idx > 0 && <hr />}
                    <h2>
                        <a href={`/${p.id}`} data-astro-prefetch>
                            {p.data.title}
                        </a>
                        {p.data.draft && <span class="draft-notice">Draft</span>}
                    </h2>
                    <p>
                        {p.remarkPluginFrontmatter.description}
                    </p>
                </li>
            )}
        </ul>
    </div>
</BaseLayout>

<style>
    div.prose {
        max-width: var(--content-width);
        padding: var(--content-padding);
        margin: 0 auto;

        & h2 a {
            color: inherit;
        }
    }

    h1 {
        text-align: center;
        margin-bottom: 2rem;
    }

    ul {
        list-style: none;
        margin-left: 0;
    }

    h2 {
        display: flex;
        gap: 01rem;
        align-items: center;
    }

    .draft-notice {
        font-size: 0.5em;
        font-family: 'Figtree Variable', sans-serif;
        color: var(--nav-link-color);
        background-color: var(--accent-color);
        padding: 0.05em 0.5em;
        border-radius: 20% / 50%;
    }

    hr {
        border: none;
        height: 1px;
        margin: 2.5rem 0;
        background-color: var(--content-color);
    }
</style>