From 52d67e4cf59f7e765fb0837ffd1cbaf395d42840 Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Thu, 8 Apr 2021 14:49:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BB=20|=20Format=20the=20date=20in=20p?=
 =?UTF-8?q?ost=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Post.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Post.vue b/src/components/Post.vue
index a966965..8dca738 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -15,7 +15,7 @@
           <p class="text-base mt-3 text-gray-700 dark:text-gray-400 text-justify">{{ description }}</p>
         </div>
         <div class="flex justify-between">
-          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ date }}</h5>
+          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ formatDate }}</h5>
           <h5 class="text-base text-gray-700 dark:text-gray-400">{{ reading_time }} min.</h5>
         </div>
       </div>
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import {computed} from "@nuxtjs/composition-api";
+import {computed, useContext} from "@nuxtjs/composition-api";
 
 interface PostHomeProps {
   title: string,
@@ -71,8 +71,15 @@ export default {
   setup(props: PostHomeProps) {
     const getBackgroundCover = computed(() => require(`@/assets/images/posts/${props.cover}`))
 
+    const { i18n } = useContext()
+    const formatDate = computed(() => {
+      const [first, second, third]: any = props.date.split('-')
+      return `${first} ${i18n.t(`month.${second}`)} ${third}`
+    })
+
     return {
-      getBackgroundCover
+      getBackgroundCover,
+      formatDate
     }
   }
 }