fix: blog post published date

Author: alex-key

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"

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
 

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
+  }
+}