make index page dynamic

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

pages/index.vue

@@ -1,5 +1,42 @@
 <script setup lang="ts">
-let x = ref(10);
+const { data } = await useAsyncData("home", () => queryContent("/").find());
+
+const getTopCategory = computed(() => {
+  const allpost = data.value || [];
+  const alltypes = allpost.map((post) => post.type);
+  const uniqType = new Set(alltypes);
+  return uniqType;
+});
+
+const getRecentContent = computed(() => {
+  const allpost = data.value || [];
+  const alltypes = allpost.map((post) => {
+    return {
+      title: post.title,
+      description: post.description,
+      path: post._path,
+      date: post.date as string,
+    };
+  });
+
+  alltypes.sort(function (a, b) {
+    const c = new Date(a.date);
+    const d = new Date(b.date);
+    return c < d ? 1 : -1;
+  });
+  return alltypes;
+});
+
+const getPopularContent = computed(() => {
+  const allpost = data.value || [];
+  const alltypes = allpost.map((post) => {
+    return {
+      title: post.title,
+      path: post._path,
+    };
+  });
+  return alltypes;
+});
 </script>
 
 <template>
@@ -9,16 +46,28 @@ let x = ref(10);
     <div class="flex-1">
       <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
       <div class="space-y-8">
-        <blog-card v-for="n in 7" :key="n" />
+        <template v-for="rp in getRecentContent" :key="rp">
+          <blog-card
+            :title="rp.title"
+            :description="rp.description"
+            :path="rp.path"
+          />
+        </template>
       </div>
     </div>
     <div class="max-w-[400px]">
       <div>
         <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
-        <topic-card />
+
+        <template v-for="cat in getTopCategory" :key="cat">
+          <topic-card :title="cat" />
+        </template>
+
         <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
         <div class="space-y-5">
-          <one-line-card v-for="n in 5" :key="n" />
+          <template v-for="pp in getPopularContent" :key="pp">
+            <one-line-card :title="pp.title" :path="pp.path" />
+          </template>
         </div>
       </div>
     </div>