---
/// <reference types="../../env.d.ts" />
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/base/FormattedDate.astro';
import Layout from '../../layouts/Layout.astro';

const posts = (await getCollection('blog')).sort(
	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
);
---

<Layout title="Polyfrost Blog" description="Recieve Polyfrost updates here">
	<section>
		<ul>
			{
				posts.map(post => (
					<li>
						<a href={`blog/${post.slug}/`}>
							<img width={720} height={360} src={post.data.heroImage} alt=""/>
							<h4 class="title">{post.data.title}</h4>
							<p class="date">
								<FormattedDate date={post.data.pubDate}/>
							</p>
						</a>
					</li>
				))
			}
		</ul>
	</section>
</Layout>