From 7b75fb2e7062020fd9e4e00c74f30cc59178063a Mon Sep 17 00:00:00 2001
From: Dr Griffith Rees <griff.rees@gmail.com>
Date: Thu, 31 Oct 2024 13:55:06 +0000
Subject: [PATCH] fix: date format on blog list and page

---
 src/components/BlogCard.astro  | 15 ++++++++++++---
 src/pages/blog/[...slug].astro | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
index a5e9ef0..cdce2b5 100644
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@@ -4,6 +4,17 @@ interface Props {
   blogPost: CollectionEntry<"blogs">;
 }
 const { blogPost } = Astro.props;
+
+const dateFormatOptions: object = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+  timeZone: "UTC",
+};
+
+let formattedPublishDate = new Date(
+  blogPost.data.publish_date,
+).toLocaleDateString("en-GB", dateFormatOptions);
 ---
 
 <div
@@ -33,9 +44,7 @@ const { blogPost } = Astro.props;
   </div>
   <div class="w-full md:w-3/5 h-full flex items-center bg-gray-100 rounded-lg">
     <div class="p-12 md:pr-24 md:pl-16 md:py-12">
-      <span class="text-gray-400"
-        >{new Intl.DateTimeFormat().format(blogPost.data.publish_date)}</span
-      >
+      <span class="text-gray-400">{formattedPublishDate}</span>
       <p class="text-gray-600">{blogPost.data.summary}</p>
       <a
         class="flex items-baseline mt-3 text-indigo-600 hover:text-indigo-900 focus:text-indigo-900"
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 1160520..e9e398a 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -22,6 +22,17 @@ let authors = await getEntries(entry.data.authors);
 let projects = entry.data.projects
   ? await getEntries(entry.data.projects)
   : null;
+const dateFormatOptions: object = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+  timeZone: "UTC",
+};
+
+let formattedPublishDate = new Date(entry.data.publish_date).toLocaleDateString(
+  "en-GB",
+  dateFormatOptions,
+);
 ---
 
 <Base>
@@ -66,7 +77,7 @@ let projects = entry.data.projects
               <header>
                 <h2>{entry.data.title}</h2>
                 {entry.data.draft && <p class="text-red-600">DRAFT</p>}
-                <p>Published on: {entry.data.publish_date}</p>
+                <p>Published on: {formattedPublishDate}</p>
               </header>
               {
                 entry.data.image && (