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

Update nuxt-og-image

components/OgImage/About.vue

@@ -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>

components/OgImage/Test.vue

@@ -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>

components/archive/card.vue

@@ -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,
 })

components/blog/card.vue

@@ -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,
 })

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

@@ -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
 ---

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

@@ -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
 ---

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

@@ -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
 ---

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

@@ -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
 ---

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

@@ -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
 ---

package.json

@@ -12,22 +12,22 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.42.0",
     "@formkit/auto-animate": "^0.8.0",
-    "@nuxt/content": "^2.9.0",
+    "@nuxt/content": "^2.10.0",
-    "@nuxt/image": "^1.0.0",
+    "@nuxt/image": "^1.1.0",
-    "@nuxtjs/color-mode": "^3.3.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/core": "^10.7.1",
-    "@vueuse/nuxt": "^10.6.1",
+    "@vueuse/nuxt": "^10.7.1",
     "eslint": "^8.39.0",
-    "nuxt": "^3.8.1",
+    "nuxt": "^3.9.0",
-    "nuxt-icon": "^0.6.6",
+    "nuxt-icon": "^0.6.8",
-    "nuxt-og-image": "^2.2.4",
+    "nuxt-og-image": "^3.0.0-rc.12",
-    "nuxt-simple-sitemap": "^4.1.3",
+    "nuxt-simple-sitemap": "^4.2.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "vue-content-loader": "^2.0.1"
   }
 }

pages/[...slug].vue

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

pages/about.vue

@@ -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>

pages/blogs/[blog].vue

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

pages/blogs/index.vue

@@ -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>

pages/categories/[category].vue

@@ -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>

pages/categories/index.vue

@@ -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>

pages/index.vue

@@ -11,10 +11,12 @@ useHead({
   titleTemplate: 'Riyad\'s Blog - %s',
 })
 
-// a. Use the Composition API
+// Generate OG Image
-defineOgImage({
+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>