refactor

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

components/archive/card.vue

@@ -1,29 +1,40 @@
 <script lang="ts" setup>
 interface Props {
+  path: string
   title: string
+  date: string
   description: string
-  time: string
+  image: string
-  link: string
+  alt: string
+  ogImage: string
+  provider: string
   tags: Array<string>
+  published: boolean
 }
 
 withDefaults(defineProps<Props>(), {
-  title: 'No title availabe',
+  path: '/',
-  description: 'No description available',
+  title: 'no-title',
-  time: 'No time available',
+  date: 'no-date',
-  link: '/',
+  description: 'no-description',
-  tags: () => ['no-tag'],
+  image: '/nuxt-blog/no-image_cyyits.png',
+  alt: 'no-alt',
+  ogImage: '/nuxt-blog/no-image_cyyits.png',
+  provider: 'cloudinary',
+  tags: () => [],
+  published: false,
 })
 </script>
 
 <template>
   <article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
-    <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
+    <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
       <div class="sm:col-span-2">
         <NuxtImg
           class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.05] transition-all duration-500"
-          :src="`${link}/cover.jpg`"
+          :provider="provider"
-          :alt="title"
+          :src="image"
+          :alt="alt"
         />
       </div>
       <div class="sm:col-span-7 p-5">
@@ -36,7 +47,7 @@ withDefaults(defineProps<Props>(), {
         <div class="text-black text-sm pt-4 pb-2">
           <div class="flex items-center">
             <LogoDate />
-            {{ time }}
+            {{ date }}
           </div>
           <div class="flex items-center gap-1 flex-wrap">
             <LogoTag />

components/blog/card.vue

@@ -1,34 +1,45 @@
 <script lang="ts" setup>
 interface Props {
+  path: string
   title: string
+  date: string
   description: string
-  time: string
+  image: string
-  link: string
+  alt: string
+  ogImage: string
+  provider: string
   tags: Array<string>
+  published: boolean
 }
 
 withDefaults(defineProps<Props>(), {
-  title: 'No title availabe',
+  path: '/',
-  description: 'No description available',
+  title: 'no-title',
-  time: 'No time available',
+  date: 'no-date',
-  link: '/',
+  description: 'no-description',
-  tags: () => ['no-tag'],
+  image: '/nuxt-blog/no-image_cyyits.png',
+  alt: 'no-alt',
+  ogImage: '/nuxt-blog/no-image_cyyits.png',
+  provider: 'cloudinary',
+  tags: () => [],
+  published: false,
 })
 </script>
 
 <template>
   <article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink :to="link">
+    <NuxtLink :to="path">
       <NuxtImg
+        :provider="provider"
         class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
-        :src="`${link}/cover.jpg`"
+        :src="image"
-        :alt="title"
+        :alt="alt"
       />
       <div class="p-5">
         <div class="text-black text-sm pt-4 pb-2">
           <div class="flex items-center">
             <LogoDate />
-            {{ time }}
+            {{ date }}
           </div>
           <div class="flex items-center gap-1 flex-wrap">
             <LogoTag />

content/blogs/1. hello-world.md

@@ -2,9 +2,9 @@
 title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
 date: 1st Jan 2023
 description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
-image: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+image: /nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
 alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
-ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+ogImage: /nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
 provider: cloudinary
 tags: ['nuxt', 'nuxt-content', 'vue', 'typescirpt']
 published: true

nuxt.config.ts

@@ -22,4 +22,10 @@ export default defineNuxtConfig({
       theme: 'dracula',
     },
   },
+
+  image: {
+    cloudinary: {
+      baseURL: 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/',
+    },
+  },
 })

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:
+    image: articles.image || '/nuxt-blog/no-image_cyyits.png',
-      articles.image ||
-      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
     alt: articles.alt || 'no alter data available',
-    ogImage:
+    ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
-      articles.ogImage ||
+    provider: articles.provider || 'cloudinary',
-      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
-    provider: articles.provider,
     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"
+          :image="post.image"
-          :time="post.time"
+          :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"
+          :image="post.image"
-          :time="post.time"
+          :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"
+          :image="post.image"
-          :time="post.time"
+          :alt="post.alt"
+          :ogImage="post.ogImage"
+          :provider="post.provider"
           :tags="post.tags"
+          :published="post.published"
         />
       </template>
       <template v-if="data?.length === 0">