make archive page dynamic

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/ArchievCard.vue

@@ -1,8 +1,30 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  path: String,
+  date: String,
+  type: String,
+});
+</script>
+
 <template>
-  <div class="px-10 font-ibmmono mb-6 text-slate-700">
-    <h4 class="font-semibold text-xl antialiased">Typescript</h4>
-    <div class="px-10">
-      <archive-post-card v-for="n in 5" :key="n" />
+  <div class="font-ibmmono px-10 mb-4 text-slate-800 group">
+    <div class="flex items-center space-x-3 space-y-2">
+      <icon name="ant-design:arrow-right-outlined" />
+      <div>
+        <nuxt-link
+          :to="path"
+          class="group-hover:underline group-hover:text-sky-500 text-lg"
+        >
+          {{ title }}
+        </nuxt-link>
+        <div class="flex italic text-sm text-slate-600 items-center space-x-2">
+          <icon name="material-symbols:calendar-month" />
+          <p>{{ date }}</p>
+          <p>|</p>
+          <p>{{ type }}</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>

components/ArchivePostCard.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="font-ibmmono group mb-2 group">
-    <div class="flex items-center space-x-3 space-y-2">
-      <icon name="ant-design:arrow-right-outlined" />
-      <div>
-        <nuxt-link
-          to="/"
-          class="group-hover:underline group-hover:text-sky-500"
-        >
-          This is a archive post link
-        </nuxt-link>
-        <div class="flex italic text-sm items-center space-x-2">
-          <icon name="material-symbols:calendar-month" />
-          <p class="text-xs">22 Jan 2022</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

pages/archive.vue

@@ -2,16 +2,44 @@
 definePageMeta({
   layout: "list",
 });
+
 const { data } = await useAsyncData("home", () => queryContent("/").find());
+
+const getAllPost = computed(() => {
+  const allpost = data.value || [];
+  const alltypes = allpost.map((post) => {
+    return {
+      title: post.title,
+      path: post._path,
+      date: post.date as string,
+      type: post.type,
+    };
+  });
+  alltypes.sort(function (a, b) {
+    const c = new Date(a.date);
+    const d = new Date(b.date);
+    return c < d ? 1 : -1;
+  });
+  return alltypes;
+});
 </script>
 
 <template>
-  <div class="container mx-auto max-w-6xl font-ibmmono antialiased">
+  <div
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
+  >
     <h1 class="font-semibold text-3xl mt-10 mb-5 py-3 mx-5 text-slate-800">
-      ALL CONTENTS
+      ALL BLOG POST
     </h1>
     <div>
-      <archiev-card v-for="n in 5" :key="n" />
+      <template v-for="pp in getAllPost" :key="pp">
+        <archiev-card
+          :title="pp.title"
+          :date="pp.date"
+          :path="pp.path"
+          :type="pp.type"
+        />
+      </template>
     </div>
   </div>
 </template>