update blog index

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

components/BlogCard.vue

@@ -2,6 +2,8 @@
 const props = defineProps({
   title: String,
   description: String,
+  date: String,
+  type: String,
   path: String,
 });
 </script>
@@ -14,7 +16,13 @@ const props = defineProps({
     >
       {{ title }}
     </nuxt-link>
-    <p class="text-slate-600">
+    <div class="flex italic text-xs text-slate-600 items-center space-x-2">
+      <icon name="material-symbols:calendar-month" />
+      <p>{{ date }}</p>
+      <p>|</p>
+      <p>{{ type }}</p>
+    </div>
+    <p class="text-slate-600 pb-2">
       {{ description }}
     </p>
     <nuxt-link :to="path" class="font-semibold group-hover:text-sky-500">

components/ListHero.vue

@@ -1,14 +1,31 @@
 <script setup lang="ts">
 const route = useRoute();
 
+const routeType = computed(() => {
+  return route.params.topic || "";
+});
+const { data } = await useAsyncData("listhero", () =>
+  queryContent(`/${routeType.value}`).find()
+);
+
+const typeName = computed(() => {
+  return data.value?.at(0)?.type || "";
+});
+
 const title = computed(() => {
   const path = route.fullPath;
   const splitPath = path.split("/");
   const name = splitPath.at(1);
+  const tagName = splitPath.at(2);
 
   if (name === "blogs") return "All Blogs Post";
-  else if (name === "tags") return "All Tags";
-  else return "About Me";
+  else if (name === "tags") {
+    if (tagName) {
+      return `All ${typeName.value} Related Post`;
+    } else {
+      return "All Tags";
+    }
+  } else return "About Me";
 });
 </script>