Initial Commit

components/Blog/PostCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="project-card md:flex mt-10">
+    <div class="img max-w-lg md:max-w-sm  mx-auto m-2">
+      <nuxt-link :to="`/posts/${post.slug}`">
+        <img :alt="post.title" :src="`${post.thumbnail[0].url}`" class="rounded-xl"/>
+      </nuxt-link>
+    </div>
+    <div class="flex flex-col justify-between max-w-lg mx-auto">
+      <div class="txt md:px-5 lg:px-0">
+        <nuxt-link :to="`/posts/${post.slug}`">
+          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">{{ post.title }}</h2>
+        </nuxt-link>
+        <p class="font-semibold text-gray-600 dark:text-gray-300 text-sm">{{ formatDate(post.created_at) }}</p>
+        <div class="flex flex-col justify-between max-w-lg mx-auto">
+        </div>
+        <BlogTags :tags="post.tags" />
+        <p class="text-base text-gray-700 dark:text-gray-200 my-1">{{ post.description }}</p>
+        <nuxt-link
+          :to="`/posts/${post.slug}`"
+          class="text-base font-semibold text-gray-700 dark:text-gray-200 my-3 hover:underline">
+          Read more →
+        </nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    formatDate(date) {
+      const options = {year: 'numeric', month: 'long', day: 'numeric'}
+      return new Date(date).toLocaleDateString('en', options)
+    }
+  },
+}
+</script>

components/Blog/Tags.vue

@@ -0,0 +1,22 @@
+<template>
+ <div class="post-tags">
+    <span
+      v-for="tag of tags"
+      :key="tag"
+      class="font-semibold text-gray-600 bg-opacity-25 dark:bg-opacity-40 dark:text-gray-300 text-sm rounded bg-gray-200 dark:bg-primary mr-1 px-1"
+    >
+      #{{ tag }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tags: {
+      type: Array,
+      default() {return []}
+    },
+  },
+}
+</script>