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>
 

pages/about.vue

@@ -3,7 +3,7 @@ definePageMeta({
   layout: "list",
 });
 
-const { data } = await useAsyncData("home", () => queryContent("/").find());
+const { data } = await useAsyncData("about", () => queryContent("/").find());
 
 const getAllPost = computed(() => {
   const allpost = data.value || [];

pages/blogs.vue

@@ -3,7 +3,7 @@ definePageMeta({
   layout: "list",
 });
 
-const { data } = await useAsyncData("home", () => queryContent("/").find());
+const { data } = await useAsyncData("blogs", () => queryContent("/").find());
 
 const getAllPost = computed(() => {
   const allpost = data.value || [];

pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data } = await useAsyncData("home", () => queryContent("/").find());
+const { data } = await useAsyncData("index", () => queryContent("/").find());
 
 // get all the unique types from content
 const getTopCategory = computed(() => {
@@ -18,6 +18,7 @@ const getRecentContent = computed(() => {
       description: post.description,
       path: post._path,
       date: post.date as string,
+      type: post.type,
     };
   });
 
@@ -42,6 +43,8 @@ const getRecentContent = computed(() => {
             :title="rp.title"
             :description="rp.description"
             :path="rp.path"
+            :date="rp.date"
+            :type="rp.type"
           />
         </template>
       </div>

pages/tags/[topic].vue

@@ -8,7 +8,7 @@ const route = useRoute();
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = await useAsyncData("home", () =>
+const { data } = await useAsyncData("topic", () =>
   queryContent(`/${routeType.value}`).find()
 );
 
@@ -42,9 +42,6 @@ const getRecentContent = computed(() => {
   <div
     class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      ALL {{ typeName }} POST
-    </h1>
     <div class="flex justify-between flex-wrap">
       <template v-for="pp in getRecentContent" :key="pp">
         <latest-blog-card

pages/tags/index.vue

@@ -2,7 +2,7 @@
 definePageMeta({
   layout: "list",
 });
-const { data } = await useAsyncData("home", () => queryContent("/").find());
+const { data } = await useAsyncData("tags", () => queryContent("/").find());
 
 const getTopCategory = computed(() => {
   const allpost = data.value || [];