blob: a88712cc970f541c5293501e1d0d645ad514735d (
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
import Counter from "../components/Counter";
import StandardLayout from "../layouts/StandardLayout.astro";
import { getCollection } from "astro:content";
// Get the latest 3 blog posts
const latestPosts = await getCollection("blog");
latestPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const featuredPosts = latestPosts.slice(0, 3);
---
<StandardLayout title="Astro - Home">
<section class="py-12">
<div class="text-center mb-12">
<h1 class="text-5xl font-bold text-gray-900 mb-4">
Welcome to Astro
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
A modern framework for building fast, content-focused websites.
</p>
<div class="mt-8">
<Counter client:load />
</div>
</div>
</section>
<section
class="py-12 bg-gray-50 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8"
>
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-900">
Latest Blog Posts
</h2>
<a
href="/blog"
class="text-blue-600 hover:text-blue-800 font-medium"
>View all posts →</a
>
</div>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{
featuredPosts.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">
<h3 class="text-xl font-semibold text-gray-900 mb-2">
{post.data.title}
</h3>
<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>
</div>
</a>
</article>
))
}
</div>
</div>
</section>
</StandardLayout>
|
