---
import { getCollection } from "astro:content";
import FormattedDate from "../components/FormattedDate.astro";
import DefaultLayout from "../layouts/DefaultLayout.astro";

// Get all posts and filter out archived ones if needed
const allPosts = await getCollection("blog");

const posts = allPosts
	.filter((post) => !post.data.archived)
	.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<DefaultLayout>
	<section>
		<ul>
			{
				posts.map((post) => (
					<li class="post-item">
						<p class="date">
							<FormattedDate date={post.data.pubDate} />
						</p>
						<a href={`/blog/${post.id}/`}>
							<h5 class="title">{post.data.title}</h4>
						</a>
					</li>
				))
			}
		</ul>
	</section>
</DefaultLayout>
<style>
	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	a {
		text-decoration: none;
		display: block;
	}

	a:hover {
		text-decoration: underline;
		color: #fff;
	}
	.post-item {
		margin-bottom: 1.5em;
	}

	.date {
		margin: 0;
		color: #767D92;
		font-size: 0.9rem;
	}
	.title {
		line-height: 1;
		color: #eeeeee;
	}
	.title h1 {
		margin: 0 0 0.5em 0;
	}
</style>
