fix post format date and double view

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>

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>