RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #40 from nurRiyad/riyad/og-image

Browse Source 
Update nuxt-og-image
This commit is contained in:
Al Asad Nur Riyad
2023-12-29 03:22:40 +06:00
committed by GitHub
parent cf80a76601 e03e97af76
commit 74154efd6a
29 changed files with 2647 additions and 6142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/OgImage/About.vue Normal file
View File

@@ -0,0 +1,71 @@
<script lang="ts" setup>
/**
* @credits NuxtLabs <https://nuxtlabs.com/>
* @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
*/
import { computed } from 'vue'
interface Props {
title?: string
description?: string
headline?: string
link?: string
}
const props = withDefaults(defineProps<Props>(), {
title: 'title',
description: 'description',
headline: 'headline',
link: '',
})
const title = computed(() => props.title.slice(0, 60))
</script>
<template>
<div class="w-full h-full flex flex-col justify-center bg-[#020420]">
<svg
class="absolute right-0 top-0"
width="629"
height="593"
viewBox="0 0 629 593"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_199_94966)">
<path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
</g>
<defs>
<filter
id="filter0_f_199_94966"
x="0.873535"
y="-659"
width="1255.25"
height="1251.52"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
</filter>
</defs>
</svg>
<div class="w-[600px] pl-[100px]">
<p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
{{ headline }}
</p>
<h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
<span>{{ title }}</span>
</h1>
<p class="text-[32px] text-[#E4E4E7] leading-tight">
{{ description.slice(0, 200) }}
</p>
</div>
<div v-if="link" class="absolute top-[200px] right-[200px]">
<img :src="link" :alt="title" class="w-52 h-52 rounded-full object-cover">
</div>
</div>
</template>

77
components/OgImage/Test.vue Normal file
View File

@@ -0,0 +1,77 @@
<script lang="ts" setup>
/**
* @credits NuxtLabs <https://nuxtlabs.com/>
* @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
*/
import { computed } from 'vue'
interface Props {
title?: string
description?: string
headline?: string
link?: string
}
const props = withDefaults(defineProps<Props>(), {
title: 'title',
description: 'description',
headline: 'headline',
link: '',
})
const formattedTitle = computed(() => props.title.length > 70 ? `${props.title.slice(0, 60)}...` : props.title)
const formattedDescription = computed(() => props.description.length > 100 ? `${props.description}...` : props.description)
const formattedLink = computed(() => {
if (props.link.endsWith('jpg') || props.link.endsWith('png'))
return props.link
else return '/blogs-img/blog.jpg'
})
</script>
<template>
<div class="w-full h-full flex flex-col justify-center bg-[#020420]">
<svg
class="absolute right-0 top-0"
width="629"
height="593"
viewBox="0 0 629 593"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_199_94966)">
<path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
</g>
<defs>
<filter
id="filter0_f_199_94966"
x="0.873535"
y="-659"
width="1255.25"
height="1251.52"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
</filter>
</defs>
</svg>
<div class="w-[600px] pl-[100px]">
<p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
{{ headline }}
</p>
<h1 class="w-[600px] m-0 text-[40px] font-semibold mb-4 text-white flex items-center">
<span>{{ formattedTitle }} </span>
</h1>
<p class="text-[25px] text-[#E4E4E7] leading-tight">
{{ formattedDescription }}
</p>
</div>
<div v-if="formattedLink" class="absolute top-[200px] right-[70px]">
<img :src="formattedLink" :alt="title" class="w-96 h-52 rounded-lg object-cover">
</div>
</div>
</template>

4
components/archive/card.vue
View File

@@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
title: 'no-title',
date: 'no-date',
description: 'no-description',
image: '/nuxt-blog/no-image_cyyits.png',
image: '/blogs-img/blog.jpg',
alt: 'no-alt',
ogImage: '/nuxt-blog/no-image_cyyits.png',
ogImage: '/blogs-img/blog.jpg',
tags: () => [],
published: false,
})

4
components/blog/card.vue
View File

@@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
title: 'no-title',
date: 'no-date',
description: 'no-description',
image: '/nuxt-blog/no-image_cyyits.png',
image: '/blogs-img/blog.jpg',
alt: 'no-alt',
ogImage: '/nuxt-blog/no-image_cyyits.png',
ogImage: '/blogs-img/blog.jpg',
tags: () => [],
published: false,
})

4
content/blogs/1. connect-namecheap-to-vercel.md
View File

@@ -2,9 +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: /blogs-img/blog1.webp
image: /blogs-img/blog1.jpg
alt: How To Connect You Namecheap Domain With Vercel Deployed App
ogImage: /blog-img/blog1.webp
ogImage: /blogs-img/blog1.jpg
tags: ['namecheap', 'vercel']
published: true
---

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

@@ -2,9 +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: /blogs-img/blog2.webp
image: /blogs-img/blog2.jpg
alt: Hwo to fix tailwind intellisense in nuxt3 project
ogImage: /blogs-img/blog2.webp
ogImage: /blogs-img/blog2.jpg
tags: ['nuxt', 'tailwindcss']
published: true
---

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

@@ -2,9 +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: /blogs-img/blog3.webp
image: /blogs-img/blog3.jpg
alt: How To Create Namespace Subdomain & Connect To Vercel App
ogImage: /blogs-img/blog3.webp
ogImage: /blogs-img/blog3.jpg
tags: ['nuxt', 'vercel', 'namecheap']
published: true
---

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

@@ -2,9 +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: /blogs-img/blog4.webp
image: /blogs-img/blog4.jpg
alt: How To Properly Fetch Nuxt Content Data and Render It in Nuxt Pages
ogImage: /blogs-img/blog4.webp
ogImage: /blogs-img/blog4.jpg
tags: ['nuxt', 'nuxt-content']
published: true
---

4
content/blogs/5. vue3-awesome-library.md
View File

@@ -2,9 +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: /blogs-img/blog5.webp
image: /blogs-img/blog5.jpg
alt: Some Awesome Libraries For Vue3
ogImage: /blogs-img/blog5.webp
ogImage: /blogs-img/blog5.jpg
tags: ['vue',"javascript"]
published: true
---

8526
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@@ -12,22 +12,22 @@
"devDependencies": {
"@antfu/eslint-config": "^0.42.0",
"@formkit/auto-animate": "^0.8.0",
"@nuxt/content": "^2.9.0",
"@nuxt/image": "^1.0.0",
"@nuxtjs/color-mode": "^3.3.0",
"@nuxt/content": "^2.10.0",
"@nuxt/image": "^1.1.0",
"@nuxtjs/color-mode": "^3.3.2",
"@nuxtjs/fontaine": "^0.4.1",
"@nuxtjs/robots": "^3.0.0",
"@nuxtjs/tailwindcss": "^6.9.5",
"@nuxtjs/tailwindcss": "^6.10.3",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vueuse/core": "^10.6.1",
"@vueuse/nuxt": "^10.6.1",
"@vueuse/core": "^10.7.1",
"@vueuse/nuxt": "^10.7.1",
"eslint": "^8.39.0",
"nuxt": "^3.8.1",
"nuxt-icon": "^0.6.6",
"nuxt-og-image": "^2.2.4",
"nuxt-simple-sitemap": "^4.1.3",
"typescript": "^5.2.2",
"nuxt": "^3.9.0",
"nuxt-icon": "^0.6.8",
"nuxt-og-image": "^3.0.0-rc.12",
"nuxt-simple-sitemap": "^4.2.0",
"typescript": "^5.3.3",
"vue-content-loader": "^2.0.1"
}
}

6
pages/[...slug].vue
View File

@@ -1,5 +1,9 @@
<script setup lang="ts">
defineOgImage()
defineOgImageComponent('About', {
headline: 'Wrong Path',
title: '404',
description: 'Page Not Found',
})
</script>
<template>

7
pages/about.vue
View File

@@ -1,5 +1,10 @@
<script setup lang="ts">
defineOgImage()
defineOgImageComponent('About', {
headline: 'Greetings 👋',
title: 'Riyad\'s Blog',
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
link: '/riyad.jpg',
})
</script>
<template>

10
pages/blogs/[blog].vue
View File

@@ -76,9 +76,13 @@ useHead({
],
})
defineOgImage({
title: data.value.title,
description: data.value.description,
// Generate OG Image
defineOgImageComponent('Test', {
headline: 'Greetings 👋',
title: data.value.title || '',
description: data.value.description || '',
link: data.value.ogImage,
})
</script>

10
pages/blogs/index.vue
View File

@@ -68,7 +68,15 @@ useHead({
titleTemplate: 'Riyad\'s Blog - %s',
})
defineOgImage()
// Generate OG Image
const siteData = useSiteConfig()
defineOgImage({
props: {
title: 'Archive',
description: 'Here you will find all the blog posts I have written & published on this site.',
siteName: siteData.url,
},
})
</script>
<template>

14
pages/categories/[category].vue
View File

@@ -24,9 +24,9 @@ const formattedData = computed(() => {
path: articles._path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/nuxt-blog/no-image_cyyits.png',
image: articles.image || '/blogs-img/blog.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
ogImage: articles.ogImage || '/blogs-img/blog.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
@@ -45,7 +45,15 @@ useHead({
titleTemplate: 'Riyad\'s Blog - %s',
})
defineOgImage()
// Generate OG Image
const siteData = useSiteConfig()
defineOgImage({
props: {
title: category.value?.toUpperCase(),
description: `You will find all the ${category.value} related post here`,
siteName: siteData.url,
},
})
</script>
<template>

10
pages/categories/index.vue
View File

@@ -30,7 +30,15 @@ useHead({
titleTemplate: 'Riyad\'s Blog - %s',
})
defineOgImage()
// Generate OG Image
const siteData = useSiteConfig()
defineOgImage({
props: {
title: 'Categories',
description: 'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
siteName: siteData.url,
},
})
</script>
<template>

8
pages/index.vue
View File

@@ -11,10 +11,12 @@ useHead({
titleTemplate: 'Riyad\'s Blog - %s',
})
// a. Use the Composition API
defineOgImage({
// Generate OG Image
defineOgImageComponent('About', {
headline: 'Greetings 👋',
title: 'Riyad\'s Blog',
description: 'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more',
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
link: '/riyad.jpg',
})
</script>

BIN
public/blogs-img/blog.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
public/blogs-img/blog1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
public/blogs-img/blog2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
public/blogs-img/blog3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 74 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/blogs-img/blog4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
public/blogs-img/blog5.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB