---
export const prerender = true
import { getCollection } from 'astro:content'

import Layout from '@layouts/Layout.astro'
import PostPreview from '@components/PostPreview.astro'

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

<Layout title="Home">
	{
		posts
			.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
			.slice(0, 5)
			.map((post) => <PostPreview post={post} />)
	}
	{
		posts.length < 5 ? null : (
			<div class="more-posts">
				<a class="link-button blue-btn" href="/archive/all?page=1">
					All Posts
				</a>
			</div>
		)
	}
</Layout>

<style>
	.more-posts {
		text-align: center;
	}
</style>