blob: 76b9f5794065781ead2a3c8f07bbd7574ca2d503 (
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
41
42
43
44
45
46
47
48
|
---
import StandardLayout from '../../layouts/StandardLayout.astro';
import { getCollection } from 'astro:content';
// Get all blog posts sorted by publication date
const posts = await getCollection('blog');
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---
<StandardLayout title="Blog | Astro Site" description="Read our latest blog posts">
<div class="space-y-8">
<h1 class="text-3xl font-bold text-gray-900">Blog</h1>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{posts.map((post) => (
<article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<a href={`/blog/${post.slug}`} class="block">
{post.data.image && (
<img
src={post.data.image}
alt={post.data.title}
class="w-full h-48 object-cover"
/>
)}
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-900 mb-2">{post.data.title}</h2>
<p class="text-sm text-gray-500 mb-3">
{new Date(post.data.pubDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</p>
<p class="text-gray-700">{post.data.description}</p>
<p class="mt-4 text-blue-600 font-medium">Read more →</p>
</div>
</a>
</article>
))}
</div>
{posts.length === 0 && (
<div class="bg-white rounded-lg shadow p-6 text-center">
<p class="text-gray-700">No blog posts found. Check back soon!</p>
</div>
)}
</div>
</StandardLayout>
|
