feat: add date formatting for publish dates in BlogPosts and PostHeader components

2 files changed, 14 insertions, 2 deletions

diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro
index 73f9b5c..9101e38 100644
--- a/src/components/BlogPosts.astro
+++ b/src/components/BlogPosts.astro
@@ -9,6 +9,12 @@ const posts = await getCollection('blog');
 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">
@@ -23,7 +29,7 @@ const sortedPosts = posts.sort((a, b) =>
                     </CardHeader>
                     <CardContent>
                         <div class="flex justify-between text-sm text-gray-500">
-                            <span>{post.data.publishDate.toLocaleDateString()}</span>
+                            <span>{dateFormatter.format(post.data.publishDate)}</span>
                             <span>by {post.data.author}</span>
                         </div>
                     </CardContent>
diff --git a/src/components/PostHeader.astro b/src/components/PostHeader.astro
index 1845ec1..cea0965 100644
--- a/src/components/PostHeader.astro
+++ b/src/components/PostHeader.astro
@@ -12,13 +12,19 @@ interface Props {
 }
 
 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">{publishDate.toLocaleDateString()}</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>