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

1 files changed, 7 insertions, 1 deletions

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>