From e88144ab670e7585f998ce9d54236d5cc77d6bd4 Mon Sep 17 00:00:00 2001
From: IwanIDev <iwan@iwani.dev>
Date: Fri, 27 Mar 2026 16:14:29 +0000
Subject: refactor: made the home page blog post cards and the blog post card
 header more consistent

They are now the same component. I've renamed the component from
PostHeader to BlogPostCard, which is more accurate now.
---
 src/components/BlogPostCard.astro | 34 ++++++++++++++++++++++++++++++++++
 src/components/BlogPosts.astro    | 21 +++++++++------------
 src/components/PostHeader.astro   | 35 -----------------------------------
 3 files changed, 43 insertions(+), 47 deletions(-)
 create mode 100644 src/components/BlogPostCard.astro
 delete mode 100644 src/components/PostHeader.astro

diff --git a/src/components/BlogPostCard.astro b/src/components/BlogPostCard.astro
new file mode 100644
index 0000000..875ddca
--- /dev/null
+++ b/src/components/BlogPostCard.astro
@@ -0,0 +1,34 @@
+---
+import { Card, CardContent, CardDescription, CardHeader, CardFooter } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+interface Props {
+  title: string;
+  slug: string;
+  description: string;
+  author: string;
+  publishDate: Date;
+}
+
+const { title, slug, description, author, publishDate } = Astro.props as Props;
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'long',
+  year: 'numeric',
+});
+---
+
+<Card className="border rounded-none">
+    <CardHeader className="border-b">
+        <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${slug}`}>{title}</h2>
+        <CardDescription>{description}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="flex flex-wrap gap-2">
+        <Badge variant="secondary">{author}</Badge>
+        <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge>
+      </div>
+    </CardContent>
+</Card>
diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro
index 48b94f0..87a75f4 100644
--- a/src/components/BlogPosts.astro
+++ b/src/components/BlogPosts.astro
@@ -1,6 +1,8 @@
 ---
 import { getCollection } from 'astro:content';
 import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import PostHeader from "@/components/PostHeader.astro";
 
 // Fetch all blog posts from the content collection
 const posts = await getCollection('blog');
@@ -22,18 +24,13 @@ const dateFormatter = new Intl.DateTimeFormat('en-GB', {
     <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>
+              <PostHeader
+                title={post.data.title}
+                slug={post.id}
+                description={post.data.description}
+                author={post.data.author}
+                publishDate={post.data.publishDate}
+              />
             </a>
         ))}
     </div>
diff --git a/src/components/PostHeader.astro b/src/components/PostHeader.astro
deleted file mode 100644
index cea0965..0000000
--- a/src/components/PostHeader.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-
-interface Props {
-  title: string;
-  slug: string;
-  description: string;
-  author: string;
-  publishDate: Date;
-}
-
-const { title, slug, description, author, publishDate } = Astro.props as Props;
-
-const dateFormatter = new Intl.DateTimeFormat('en-GB', {
-  day: '2-digit',
-  month: 'long',
-  year: 'numeric',
-});
----
-
-<Card className="w-full">
-  <CardHeader>
-    <div class="flex flex-wrap gap-2">
-      <Badge variant="secondary">{author}</Badge>
-      <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge>
-    </div>
-    <h1 class="font-heading text-xl font-medium md:text-2xl" transition:name={`post-title-${slug}`}>{title}</h1>
-    <CardDescription>{description}</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <Separator />
-  </CardContent>
-</Card>
-- 
cgit