From 9b344491888fa8699d07927e0d46aee38847b731 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 26 Oct 2023 20:34:37 +0200
Subject: [PATCH] fix post format date and double view

---
 src/pages/writing/[slug].vue | 7 ++++---
 src/pages/writing/index.vue  | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue
index efec757..c19f608 100644
--- a/src/pages/writing/[slug].vue
+++ b/src/pages/writing/[slug].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Post } from '~~/types'
+import type { Post } from '~~/types';
 
 const route = useRoute()
 const { data: postContent } = await useAsyncData<Post>(`writing:${route.params.slug}`, async () => await queryContent<Post>(`/writing/${route.params.slug}`).findOne())
@@ -12,7 +12,8 @@ if (!postContent.value) {
 }
 
 const { post, view, like, likes, views } = await usePost(route.params.slug.toString())
-view()
+const format = (date: string) => useDateFormat(date, 'D MMMM YYYY').value.replaceAll('"', '')
+onMounted(() => view())
 
 useHead({
   title: `${postContent.value?.title} • Arthur Danjou's shelf`,
@@ -64,7 +65,7 @@ async function handleLike() {
                 <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
                 <div class="ml-3 flex gap-3">
                   <div>
-                    {{ postContent.publishedAt }}
+                    {{ format(postContent.publishedAt) }}
                   </div>
                   <span>•</span>
                   <div>{{ postContent.readingMins }} min</div>
diff --git a/src/pages/writing/index.vue b/src/pages/writing/index.vue
index 8e9601c..a866a63 100644
--- a/src/pages/writing/index.vue
+++ b/src/pages/writing/index.vue
@@ -7,6 +7,7 @@ useHead({
 })
 
 const { data: posts } = await usePosts()
+const format = (date: string) => useDateFormat(date, 'D MMMM YYYY').value.replaceAll('"', '')
 </script>
 
 <template>
@@ -39,7 +40,7 @@ const { data: posts } = await usePosts()
                 <span class="absolute inset-y-0 left-0 flex items-center">
                   <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
                 </span>
-                {{ post.publishedAt }}
+                {{ format(post.publishedAt) }}
               </time>
               <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                 {{ post.description }}
@@ -50,7 +51,7 @@ const { data: posts } = await usePosts()
               </div>
             </div>
             <time class="mt-1 md:block relative z-10 order-first mb-3 hidden text-sm text-zinc-400 dark:text-zinc-500">
-              <p>{{ post.publishedAt }}</p>
+              <p>{{ format(post.publishedAt) }}</p>
               <p>{{ post.readingMins }} min.</p>
             </time>
           </article>