Merge pull request #9 from nurRiyad/v2

Remove Cloudenary as nuxt img provider and used local img

components/archive/card.vue

@@ -7,7 +7,6 @@ interface Props {
   image: string
   alt: string
   ogImage: string
-  provider: string
   tags: Array<string>
   published: boolean
 }
@@ -20,19 +19,17 @@ withDefaults(defineProps<Props>(), {
   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">
+  <article class="group border m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700">
     <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
       <div class="sm:col-span-3">
         <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.02] transition-all duration-500"
-          :provider="provider"
           :src="image"
           :alt="alt"
         />

components/blog/card.vue

@@ -7,7 +7,6 @@ interface Props {
   image: string
   alt: string
   ogImage: string
-  provider: string
   tags: Array<string>
   published: boolean
 }
@@ -20,17 +19,15 @@ withDefaults(defineProps<Props>(), {
   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-md text-zinc-700">
+  <article class="group border m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700">
     <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.02] transition-all duration-500"
         :src="image"
         :alt="alt"

components/main/recent.vue

@@ -13,7 +13,6 @@ const formatedData = computed(() => {
       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,
@@ -39,9 +38,9 @@ useHead({
     <div class="px-6">
       <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
         <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
-        <h3 class="text-4xl font-semibold text-black ">
+        <h2 class="text-4xl font-semibold text-black ">
           Recent Post
-        </h3>
+        </h2>
       </div>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
@@ -54,7 +53,6 @@ useHead({
           :image="post.image"
           :alt="post.alt"
           :og-image="post.ogImage"
-          :provider="post.provider"
           :tags="post.tags"
           :published="post.published"
         />

components/main/trending.vue

@@ -13,7 +13,6 @@ const formatedData = computed(() => {
       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,
@@ -39,9 +38,9 @@ useHead({
     <div class="px-6">
       <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
         <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
-        <h3 class="text-4xl font-semibold text-black ">
+        <h2 class="text-4xl font-semibold text-black ">
           Trending Post
-        </h3>
+        </h2>
       </div>
     </div>
     <div class="grid grid-cols-1 ">
@@ -54,7 +53,6 @@ useHead({
           :image="post.image"
           :alt="post.alt"
           :og-image="post.ogImage"
-          :provider="post.provider"
           :tags="post.tags"
           :published="post.published"
         />

content/blogs/1. connect-namecheap-to-vercel.md

@@ -2,10 +2,9 @@
 title: How To Connect You Namecheap Domain With Vercel Deployed App
 date: 1st Mar 2023
 description: Here you will lean how to connect your namecheap domain to vercel deployed app.
-image: /nuxt-blog/pexels-photo-1779487_fnvw1l.jpg
+image: /blogs-img/blog1.jpg
 alt: How To Connect You Namecheap Domain With Vercel Deployed App
-ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673369821/cld-sample-3.jpg
-provider: cloudinary
+ogImage: /blog-img/blog1.jpg
 tags: ['namecheap', 'vercel']
 published: true
 ---

content/blogs/2. fix-tailwindcss-intellisense-in-nuxt3.md

@@ -2,10 +2,9 @@
 title: How To Fix TailwindCSS Intellisense In Nuxt3 Project
 date: 26th Jan 2023
 description: In Nuxt3 project tailwind css intellisense doesn't seems to work properly. In this blog I will share a workaround to fix this issue.
-image: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
+image: /blogs-img/blog2.jpg
 alt: Hwo to fix tailwind intellisense in nuxt3 project
-ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg
-provider: cloudinary
+ogImage: /blogs-img/blog2.jpg
 tags: ['nuxt', 'tailwindcss']
 published: true
 ---

content/blogs/3. create-namespace-subdomain-connect-to-vercel.md

@@ -2,10 +2,9 @@
 title: How To Create Namespace Subdomain & Connect To Vercel App
 date: 1st Mar 2023
 description: Here we will learn, How To Create Namespace Subdomain & Connect To Vercel App
-image: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
+image: /blogs-img/blog3.jpg
 alt: How To Create Namespace Subdomain & Connect To Vercel App
-ogImage: /nuxt-blog/pexels-photo-4523062_zeiadq.jpg
-provider: cloudinary
+ogImage: /blogs-img/blog3.jpg
 tags: ['nuxt', 'vercel', 'namecheap']
 published: true
 ---

content/blogs/4. fetch-content-data-render-pages.md

@@ -2,10 +2,9 @@
 title: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
 date: 1st Mar 2023
 description: Here we will learn How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
-image: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
+image: /blogs-img/blog4.jpg
 alt: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
-ogImage: /nuxt-blog/pexels-photo-1036936_osvoac.jpg
-provider: cloudinary
+ogImage: /blogs-img/blog4.jpg
 tags: ['nuxt', 'nuxt-content']
 published: true
 ---
@@ -18,6 +17,7 @@ Nuxt.js is a popular open-source framework for building Vue.js applications. Wit
 
 The first step is to install the necessary dependencies for Nuxt Content v2. To do this, run the following command:
 
+
 ```js
 npm install @nuxt/content@next
 

content/blogs/5. vue3-awesome-library.md

@@ -2,10 +2,9 @@
 title: Some Awesome Libraries For Vue3
 date: 1st Jan 2023
 description: Vue.js is a popular JavaScript framework for building web applications. In this blog post, we will introduce you to some of the awesome libraries for Vue.js in different categories.
-image: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
+image: /blogs-img/blog5.jpg
 alt: Some Awesome Libraries For Vue3
-ogImage: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
-provider: cloudinary
+ogImage: /blogs-img/blog5.jpg
 tags: ['vue',"javascript"]
 published: true
 ---

nuxt.config.ts

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

pages/blogs/[blog].vue

@@ -11,7 +11,6 @@ const data = computed<BlogPost>(() => {
     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 || 'cloudinary',
     date: articles.date || 'not-date-available',
     tags: articles.tags || [],
     published: articles.published || false,
@@ -81,7 +80,6 @@ useHead({
         {{ 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,7 +10,6 @@ const formatedData = computed(() => {
       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,
@@ -43,7 +42,6 @@ useHead({
           :image="post.image"
           :alt="post.alt"
           :og-image="post.ogImage"
-          :provider="post.provider"
           :tags="post.tags"
           :published="post.published"
         />

pages/categories/[category].vue

@@ -27,7 +27,6 @@ const formatedData = computed(() => {
       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,
@@ -60,7 +59,6 @@ useHead({
           :image="post.image"
           :alt="post.alt"
           :og-image="post.ogImage"
-          :provider="post.provider"
           :tags="post.tags"
           :published="post.published"
         />

types/blog.ts

@@ -5,7 +5,6 @@ export interface BlogPost {
   image: string
   alt: string
   ogImage: string
-  provider: string
   tags: string[]
   published: boolean
 }