Importing blog

src/components/Post.vue

@@ -1,16 +1,20 @@
 <template>
-  <article class="hover:bg-gray-200 dark:hover:bg-dark-800 border-2 border-solid border-black dark:border-white w-full h-auto h-blog p-2 flex flex-col justify-between my-5 duration-300">
+  <article
+    class="w-full h-blog p-2 flex flex-col justify-between my-5"
+    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }"
+  >
     <div>
-      <p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
-      <p class="dark:text-dark-900 text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
+      <p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p>
+      <p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p>
     </div>
-    <div class="flex justify-between mt-8">
+    <div class="flex justify-between mt-8 text-dark-900">
       <div>
-        <div>{{date}}</div>
+        <div>{{formatDate}}</div>
         <div>{{reading_time}} min read</div>
+        <div>{{likes}} ❤</div>
       </div>
-      <div class="self-end flex flex-wrap">
-        <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 dark:bg-white dark:text-black rounded bg-black text-white font-semibold">
+      <div class="self-end flex flex-wrap flex-col md:flex-row">
+        <div v-for="(tag) in tags" class="my-1 md:my-0 ml-2 py-1 px-2 bg-white text-black rounded font-semibold">
           #{{tag}}
         </div>
       </div>
@@ -31,16 +35,20 @@ export default {
       default: "New Post's description"
     },
     reading_time: {
-      type: String,
-      default: "0"
+      type: Number,
+      default: 0
     },
     date: {
       type: String,
       default: "Today"
     },
+    likes: {
+      type: Number,
+      default: 0
+    },
     tags: {
-      type: String,
-      default: "Tag1 Tag2 Tag3",
+      type: Array,
+      default: () => ["Tag1", "Tag2", "Tag3"],
     },
     cover: {
       type: String,
@@ -49,8 +57,15 @@ export default {
   },
   computed: {
     tagsSplit() {
-      return this.tags.split(" ")
-    }
+      return this.tags.keys
+    },
+    formatDate() {
+      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+      ];
+      const date = new Date(this.date)
+      return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
+    },
   }
 }
 </script>
@@ -58,5 +73,7 @@ export default {
 <style scoped lang="scss">
 .h-blog {
   min-height: 20rem;
+  background-position: center;
+  background-size: cover;
 }
 </style>