blob: 48b94f089015d338563e783b64a1d25d63b91514 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
---
import { getCollection } from 'astro:content';
import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
// Fetch all blog posts from the content collection
const posts = await getCollection('blog');
// Sort posts by date (newest first)
const sortedPosts = posts.sort((a, b) =>
new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
);
const dateFormatter = new Intl.DateTimeFormat('en-GB', {
day: '2-digit',
month: 'long',
year: 'numeric',
});
---
<div class="w-full max-w-2xl mx-auto p-4">
<h1 class="text-3xl font-bold mb-8">Blog Posts</h1>
<div class="space-y-4 max-h-96 overflow-y-auto">
{sortedPosts.map((post) => (
<a href={`/posts/${post.id}`} class="block hover:opacity-80 transition-opacity" data-astro-prefetch>
<Card className="border rounded-xl">
<CardHeader className="border-b">
<h2 class="font-heading text-sm font-medium" transition:name={`post-title-${post.id}`}>{post.data.title}</h2>
<CardDescription>{post.data.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex justify-between text-sm text-gray-500">
<span>{dateFormatter.format(post.data.publishDate)}</span>
<span>by {post.data.author}</span>
</div>
</CardContent>
</Card>
</a>
))}
</div>
</div>
|
