Remove external img provider

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2023-05-06 22:51:17 +06:00
parent 0a2369bc71
commit dc7f69fbc9
20 changed files with 151 additions and 481 deletions

View File

@@ -7,7 +7,6 @@ interface Props {
image: string image: string
alt: string alt: string
ogImage: string ogImage: string
provider: string
tags: Array<string> tags: Array<string>
published: boolean published: boolean
} }
@@ -20,7 +19,6 @@ withDefaults(defineProps<Props>(), {
image: '/nuxt-blog/no-image_cyyits.png', image: '/nuxt-blog/no-image_cyyits.png',
alt: 'no-alt', alt: 'no-alt',
ogImage: '/nuxt-blog/no-image_cyyits.png', ogImage: '/nuxt-blog/no-image_cyyits.png',
provider: 'cloudinary',
tags: () => [], tags: () => [],
published: false, published: false,
}) })
@@ -32,7 +30,6 @@ withDefaults(defineProps<Props>(), {
<div class="sm:col-span-3"> <div class="sm:col-span-3">
<NuxtImg <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" 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" :src="image"
:alt="alt" :alt="alt"
/> />

View File

@@ -7,7 +7,6 @@ interface Props {
image: string image: string
alt: string alt: string
ogImage: string ogImage: string
provider: string
tags: Array<string> tags: Array<string>
published: boolean published: boolean
} }
@@ -20,7 +19,6 @@ withDefaults(defineProps<Props>(), {
image: '/nuxt-blog/no-image_cyyits.png', image: '/nuxt-blog/no-image_cyyits.png',
alt: 'no-alt', alt: 'no-alt',
ogImage: '/nuxt-blog/no-image_cyyits.png', ogImage: '/nuxt-blog/no-image_cyyits.png',
provider: 'cloudinary',
tags: () => [], tags: () => [],
published: false, published: false,
}) })
@@ -30,7 +28,6 @@ withDefaults(defineProps<Props>(), {
<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-md text-zinc-700">
<NuxtLink :to="path"> <NuxtLink :to="path">
<NuxtImg <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" 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" :src="image"
:alt="alt" :alt="alt"

View File

@@ -13,7 +13,6 @@ const formatedData = computed(() => {
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/nuxt-blog/no-image_cyyits.png',
alt: articles.alt || 'no alter data available', alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png', ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
provider: articles.provider,
date: articles.date || 'not-date-available', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -54,7 +53,6 @@ useHead({
:image="post.image" :image="post.image"
:alt="post.alt" :alt="post.alt"
:og-image="post.ogImage" :og-image="post.ogImage"
:provider="post.provider"
:tags="post.tags" :tags="post.tags"
:published="post.published" :published="post.published"
/> />

View File

@@ -13,7 +13,6 @@ const formatedData = computed(() => {
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/nuxt-blog/no-image_cyyits.png',
alt: articles.alt || 'no alter data available', alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png', ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
provider: articles.provider,
date: articles.date || 'not-date-available', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -54,7 +53,6 @@ useHead({
:image="post.image" :image="post.image"
:alt="post.alt" :alt="post.alt"
:og-image="post.ogImage" :og-image="post.ogImage"
:provider="post.provider"
:tags="post.tags" :tags="post.tags"
:published="post.published" :published="post.published"
/> />

View File

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

View File

@@ -2,10 +2,9 @@
title: How To Fix TailwindCSS Intellisense In Nuxt3 Project title: How To Fix TailwindCSS Intellisense In Nuxt3 Project
date: 26th Jan 2023 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. 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 alt: Hwo to fix tailwind intellisense in nuxt3 project
ogImage: /nuxt-blog/pexels-photo-157040_gwfamn.jpg ogImage: /blogs-img/blog2.jpg
provider: cloudinary
tags: ['nuxt', 'tailwindcss'] tags: ['nuxt', 'tailwindcss']
published: true published: true
--- ---

View File

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

View File

@@ -2,10 +2,9 @@
title: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages title: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
date: 1st Mar 2023 date: 1st Mar 2023
description: Here we will learn How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages 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 alt: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
ogImage: /nuxt-blog/pexels-photo-1036936_osvoac.jpg ogImage: /blogs-img/blog4.jpg
provider: cloudinary
tags: ['nuxt', 'nuxt-content'] tags: ['nuxt', 'nuxt-content']
published: true published: true
--- ---
@@ -18,7 +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: The first step is to install the necessary dependencies for Nuxt Content v2. To do this, run the following command:
```js ```JS
npm install @nuxt/content@next npm install @nuxt/content@next
``` ```
@@ -27,7 +26,7 @@ npm install @nuxt/content@next
Once the dependencies are installed, you need to configure Nuxt Content v2 in your Nuxt 3 project. To do this, create a new file named nuxt.config.js in the root directory of your project and add the following code: Once the dependencies are installed, you need to configure Nuxt Content v2 in your Nuxt 3 project. To do this, create a new file named nuxt.config.js in the root directory of your project and add the following code:
```js ```JS
export default { export default {
// Enable Nuxt Content module // Enable Nuxt Content module
modules: [ modules: [

View File

@@ -2,10 +2,9 @@
title: Some Awesome Libraries For Vue3 title: Some Awesome Libraries For Vue3
date: 1st Jan 2023 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. 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 alt: Some Awesome Libraries For Vue3
ogImage: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg ogImage: /blogs-img/blog5.jpg
provider: cloudinary
tags: ['vue',"javascript"] tags: ['vue',"javascript"]
published: true published: true
--- ---

View File

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

View File

@@ -11,7 +11,6 @@ const data = computed<BlogPost>(() => {
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/nuxt-blog/no-image_cyyits.png',
alt: articles.alt || 'no alter data available', alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png', ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
provider: articles.provider || 'cloudinary',
date: articles.date || 'not-date-available', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -81,7 +80,6 @@ useHead({
{{ data.title || '' }} {{ data.title || '' }}
</h1> </h1>
<NuxtImg <NuxtImg
:provider="data.provider"
:src="data.image || ''" :src="data.image || ''"
:alt="data.alt || ''" :alt="data.alt || ''"
class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover" class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"

View File

@@ -10,7 +10,6 @@ const formatedData = computed(() => {
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/nuxt-blog/no-image_cyyits.png',
alt: articles.alt || 'no alter data available', alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png', ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
provider: articles.provider,
date: articles.date || 'not-date-available', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -43,7 +42,6 @@ useHead({
:image="post.image" :image="post.image"
:alt="post.alt" :alt="post.alt"
:og-image="post.ogImage" :og-image="post.ogImage"
:provider="post.provider"
:tags="post.tags" :tags="post.tags"
:published="post.published" :published="post.published"
/> />

View File

@@ -27,7 +27,6 @@ const formatedData = computed(() => {
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/nuxt-blog/no-image_cyyits.png',
alt: articles.alt || 'no alter data available', alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png', ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
provider: articles.provider,
date: articles.date || 'not-date-available', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -60,7 +59,6 @@ useHead({
:image="post.image" :image="post.image"
:alt="post.alt" :alt="post.alt"
:og-image="post.ogImage" :og-image="post.ogImage"
:provider="post.provider"
:tags="post.tags" :tags="post.tags"
:published="post.published" :published="post.published"
/> />

BIN
public/blogs-img/blog1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
public/blogs-img/blog2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

BIN
public/blogs-img/blog3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
public/blogs-img/blog4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/blogs-img/blog5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

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

580
yarn.lock

File diff suppressed because it is too large Load Diff