diff options
Diffstat (limited to 'src/components/BlogPosts.astro')
| -rw-r--r-- | src/components/BlogPosts.astro | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro new file mode 100644 index 0000000..54b7529 --- /dev/null +++ b/src/components/BlogPosts.astro @@ -0,0 +1,34 @@ +--- +import { getCollection } from 'astro:content'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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() +); +--- + +<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"> + <Card> + <CardHeader> + <CardTitle>{post.data.title}</CardTitle> + <CardDescription>{post.data.description}</CardDescription> + </CardHeader> + <CardContent> + <div class="flex justify-between text-sm text-gray-500"> + <span>{post.data.publishDate.toLocaleDateString()}</span> + <span>by {post.data.author}</span> + </div> + </CardContent> + </Card> + </a> + ))} + </div> +</div>
\ No newline at end of file |