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

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>