web/src/pages/blog/index.astro
2024-05-05 18:25:40 -04:00

43 lines
1.4 KiB
Text

---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
const posts: any[] = (await getCollection('blog')).sort(
(a: any, b: any) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
---
<!doctype html>
<html lang="en" class="ctp-mocha bg-ctp-base">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main class="w-full flex justify-center">
{posts.length === 0 && <p class="py-48">Sorry! No posts at the minute, coming soon!</p>}
<section>
<ul class="space-y-4">
{
posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => (
<li class="p-4 rounded-xl shadow-lg border border-ctp-surface2">
<a href={`/blog/${post.slug}/`}>
<img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" />
<h4 class="text-2xl p-3 font-bold text-center text-ctp-mauve">{post.data.title}</h4>
<p class="text-center">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))
}
</ul>
</section>
</main>
<Footer />
</body>
</html>