refactor

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

pages/blogs/[blog].vue

@@ -7,14 +7,10 @@ const data = computed<BlogPost>(() => {
   return {
     title: articles.title || 'no-title available',
     description: articles.description || 'no-descriptoin available',
-    image:
-      articles.image ||
-      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
+    image: articles.image || '/nuxt-blog/no-image_cyyits.png',
     alt: articles.alt || 'no alter data available',
-    ogImage:
-      articles.ogImage ||
-      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
-    provider: articles.provider,
+    ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+    provider: articles.provider || 'cloudinary',
     date: articles.date || 'not-date-available',
     tags: articles.tags || [],
     published: articles.published || false,
@@ -27,6 +23,7 @@ const data = computed<BlogPost>(() => {
     <header>
       <h1 class="text-5xl m-7 font-bold text-center">{{ data.title || '' }}</h1>
       <NuxtImg
+        :provider="data.provider"
         :src="data.image || ''"
         :alt="data.alt || ''"
         class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"

pages/blogs/index.vue

@@ -10,18 +10,40 @@ useHead({
   titleTemplate: "Riyad's Blog - %s",
 })
 const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
+
+const formatedData = computed(() => {
+  return data.value?.map((articles) => {
+    return {
+      path: articles._path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-descriptoin available',
+      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      alt: articles.alt || 'no alter data available',
+      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      provider: articles.provider,
+      date: articles.date || 'not-date-available',
+      tags: articles.tags || [],
+      published: articles.published || false,
+    }
+  })
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
     <div class="space-y-5 my-5">
-      <template v-for="post in data" :key="post.title">
+      <template v-for="post in formatedData" :key="post.title">
         <ArchiveCard
+          :path="post.path"
           :title="post.title"
+          :date="post.date"
           :description="post.description"
-          :link="post._path"
-          :time="post.time"
+          :image="post.image"
+          :alt="post.alt"
+          :ogImage="post.ogImage"
+          :provider="post.provider"
           :tags="post.tags"
+          :published="post.published"
         />
       </template>
     </div>

pages/categories/[category].vue

@@ -27,18 +27,40 @@ const { data } = await useAsyncData('home', () =>
     .where({ tags: { $contains: category.value } })
     .find()
 )
+
+const formatedData = computed(() => {
+  return data.value?.map((articles) => {
+    return {
+      path: articles._path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-descriptoin available',
+      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      alt: articles.alt || 'no alter data available',
+      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      provider: articles.provider,
+      date: articles.date || 'not-date-available',
+      tags: articles.tags || [],
+      published: articles.published || false,
+    }
+  })
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryTopic />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="post.title">
+      <template v-for="post in formatedData" :key="post.title">
         <BlogCard
+          :path="post.path"
           :title="post.title"
+          :date="post.date"
           :description="post.description"
-          :link="post._path"
-          :time="post.time"
+          :image="post.image"
+          :alt="post.alt"
+          :ogImage="post.ogImage"
+          :provider="post.provider"
           :tags="post.tags"
+          :published="post.published"
         />
       </template>
       <template v-if="data?.length === 0">

pages/index.vue

@@ -14,18 +14,40 @@ useHead({
 const { data } = await useAsyncData('home', () =>
   queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
 )
+
+const formatedData = computed(() => {
+  return data.value?.map((articles) => {
+    return {
+      path: articles._path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-descriptoin available',
+      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      alt: articles.alt || 'no alter data available',
+      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      provider: articles.provider,
+      date: articles.date || 'not-date-available',
+      tags: articles.tags || [],
+      published: articles.published || false,
+    }
+  })
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="post.title">
+      <template v-for="post in formatedData" :key="post.title">
         <BlogCard
+          :path="post.path"
           :title="post.title"
+          :date="post.date"
           :description="post.description"
-          :link="post._path"
-          :time="post.time"
+          :image="post.image"
+          :alt="post.alt"
+          :ogImage="post.ogImage"
+          :provider="post.provider"
           :tags="post.tags"
+          :published="post.published"
         />
       </template>
       <template v-if="data?.length === 0">