From 9b2f0d225826ce50a77807a74a9ab471af0dcde3 Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Tue, 3 Mar 2026 15:11:39 +0000
Subject: [PATCH] fix: blog post published date

---
 app/components/BlogPostListCard.vue |  6 ++++--
 app/components/OgImage/BlogPost.vue | 13 +------------
 app/utils/formatters.ts             | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/components/BlogPostListCard.vue b/app/components/BlogPostListCard.vue
index f620cb9b7f..abd82cecc1 100644
--- a/app/components/BlogPostListCard.vue
+++ b/app/components/BlogPostListCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Author } from '#shared/schemas/blog'
 
-defineProps<{
+const props = defineProps<{
   /** Authors of the blog post */
   authors: Author[]
   /** Blog Title */
@@ -19,6 +19,8 @@ defineProps<{
   /** Whether this post is an unpublished draft */
   draft?: boolean
 }>()
+
+const formattedPublished = computed(() => toLocaleDateString(props.published))
 </script>
 
 <template>
@@ -33,7 +35,7 @@ defineProps<{
       <!-- Text Content -->
       <div class="flex-1 min-w-0 text-start gap-2">
         <div class="flex items-center gap-2">
-          <span class="text-xs text-fg-muted font-mono">{{ published }}</span>
+          <span class="text-xs text-fg-muted font-mono">{{ formattedPublished }}</span>
           <span
             v-if="draft"
             class="text-xs px-1.5 py-0.5 rounded badge-orange font-sans font-medium"
diff --git a/app/components/OgImage/BlogPost.vue b/app/components/OgImage/BlogPost.vue
index 2192be4f7e..e852238921 100644
--- a/app/components/OgImage/BlogPost.vue
+++ b/app/components/OgImage/BlogPost.vue
@@ -17,18 +17,7 @@ const props = withDefaults(
 
 const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
 
-const formattedDate = computed(() => {
-  if (!props.date) return ''
-  try {
-    return new Date(props.date).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  } catch {
-    return props.date
-  }
-})
+const formattedDate = computed(() => toLocaleDateString(props.date))
 
 const MAX_VISIBLE_AUTHORS = 2
 
diff --git a/app/utils/formatters.ts b/app/utils/formatters.ts
index c135506d71..3190ac9e35 100644
--- a/app/utils/formatters.ts
+++ b/app/utils/formatters.ts
@@ -4,3 +4,17 @@ export function toIsoDateString(date: Date): string {
   const day = String(date.getUTCDate()).padStart(2, '0')
   return `${year}-${month}-${day}`
 }
+
+export function toLocaleDateString(date: string): string {
+  if (!date) return ''
+
+  try {
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  } catch {
+    return date
+  }
+}