From d3c28af301e9500a9ef365216447a7ae2709e002 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Thu, 27 Jun 2024 00:26:45 +0600
Subject: [PATCH] Fix title issue and seo data

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/footer/connect.vue   |  4 ++--
 components/main/recent.vue      |  1 -
 components/main/trending.vue    |  1 -
 data/index.ts                   |  6 ++++--
 nuxt.config.ts                  | 11 ++++++-----
 pages/[...slug].vue             | 10 ++++++++++
 pages/about.vue                 | 14 ++++++++++++--
 pages/blogs/[blog].vue          |  9 +++++----
 pages/blogs/index.vue           |  1 -
 pages/categories/[category].vue |  1 -
 pages/categories/index.vue      |  1 -
 pages/index.vue                 |  5 +++--
 12 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/components/footer/connect.vue b/components/footer/connect.vue
index 274d1d1..ce5d9c5 100644
--- a/components/footer/connect.vue
+++ b/components/footer/connect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { footerData } from '~/data'
+import { footerData, seoData } from '~/data'
 </script>
 
 <template>
@@ -12,7 +12,7 @@ import { footerData } from '~/data'
     </p>
 
     <a
-      href="mailto: alasadnurriyad4@gmail.com"
+      :href="`mailto: ${seoData.mailAddress}`"
       class="block text-center w-full bg-sky-700 p-2 rounded-lg text-[#F1F2F4]  mt-3 text-sm"
     >
       Sent Mail
diff --git a/components/main/recent.vue b/components/main/recent.vue
index b7f3497..ceb8e5c 100644
--- a/components/main/recent.vue
+++ b/components/main/recent.vue
@@ -29,7 +29,6 @@ useHead({
         'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
 
diff --git a/components/main/trending.vue b/components/main/trending.vue
index aa6dcf6..b44d9ca 100644
--- a/components/main/trending.vue
+++ b/components/main/trending.vue
@@ -29,7 +29,6 @@ useHead({
         'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
 
diff --git a/data/index.ts b/data/index.ts
index 1dbab79..df8c75b 100644
--- a/data/index.ts
+++ b/data/index.ts
@@ -35,7 +35,9 @@ export const seoData = {
   ogTitle: 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving',
   twitterDescription: 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc',
   image: 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp',
-  mySite: 'https://blog-nurriyad.vercel.app/',
+  mySite: 'https://blog-nurriyad.vercel.app',
+  twitterHandle: '@qdnvubp',
+  mailAddress: 'asadnurriyad@gmail.com',
 }
 
 export const siteMetaData = [
@@ -63,7 +65,7 @@ export const siteMetaData = [
     content: seoData.image,
   },
   // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
-  { name: 'twitter:site', content: '@qdnvubp' },
+  { name: 'twitter:site', content: seoData.twitterHandle },
   { name: 'twitter:card', content: 'summary_large_image' },
   {
     name: 'twitter:url',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2976e03..e41362c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,12 +1,13 @@
+import { navbarData, seoData } from './data'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
     head: {
       charset: 'utf-16',
       viewport: 'width=device-width,initial-scale=1',
-      title: 'Riyad\'s Blog',
-      titleTemplate: '%s - Riyad\'s Blog',
-      meta: [{ name: 'description', content: 'Riyad\'s awesome blog' }],
+      title: navbarData.homeTitle,
+      titleTemplate: `%s - ${navbarData.homeTitle}`,
     },
     pageTransition: { name: 'page', mode: 'out-in' },
     layoutTransition: { name: 'layout', mode: 'out-in' },
@@ -16,11 +17,11 @@ export default defineNuxtConfig({
     strictNuxtContentPaths: true,
   },
   site: {
-    url: 'https://blog.nurriyad.xyz',
+    url: seoData.mySite,
     identity: {
       type: 'Person',
     },
-    twitter: '@qdnvubp',
+    twitter: seoData.twitterHandle,
   },
 
   typescript: {
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index ae21023..9eeb7f1 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,4 +1,14 @@
 <script setup lang="ts">
+useHead({
+  title: '404',
+  meta: [
+    {
+      name: 'description',
+      content: 'Page not found',
+    },
+  ],
+})
+
 defineOgImageComponent('About', {
   headline: 'Wrong Path',
   title: '404',
diff --git a/pages/about.vue b/pages/about.vue
index f1f8757..0e53968 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
-import { aboutPage } from '~/data'
+import { aboutPage, footerData, navbarData } from '~/data'
+
+useHead({
+  title: 'About',
+  meta: [
+    {
+      name: 'description',
+      content: footerData.aboutAuthor,
+    },
+  ],
+})
 
 defineOgImageComponent('About', {
   headline: 'Greetings 👋',
-  title: 'Riyad\'s Blog',
+  title: navbarData.homeTitle,
   description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
   link: '/riyad.jpg',
 })
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 5b73695..e88dba5 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { BlogPost } from '@/types/blog'
+import { navbarData, seoData } from '~/data'
 
 const { path } = useRoute()
 
@@ -30,11 +31,11 @@ useHead({
       content: data.value.description,
     },
     // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
-    { property: 'og:site_name', content: 'Riyad\'s Blog' },
+    { property: 'og:site_name', content: navbarData.homeTitle },
     { hid: 'og:type', property: 'og:type', content: 'website' },
     {
       property: 'og:url',
-      content: `https://blog-nurriyad.vercel.app/${path}`,
+      content: `${seoData.mySite}/${path}`,
     },
     {
       property: 'og:title',
@@ -53,7 +54,7 @@ useHead({
     { name: 'twitter:card', content: 'summary_large_image' },
     {
       name: 'twitter:url',
-      content: `https://blog-nurriyad.vercel.app/${path}`,
+      content: `${seoData.mySite}/${path}`,
     },
     {
       name: 'twitter:title',
@@ -71,7 +72,7 @@ useHead({
   link: [
     {
       rel: 'canonical',
-      href: `https://blog-nurriyad.vercel.app/${path}`,
+      href: `${seoData.mySite}/${path}`,
     },
   ],
 })
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index f5fa026..f5c5bdd 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -65,7 +65,6 @@ useHead({
       content: 'Here you will find all the blog posts I have written & published on this site.',
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 
 // Generate OG Image
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index e68d691..a26b13c 100644
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -42,7 +42,6 @@ useHead({
       content: `You will find all the ${category.value} related post here`,
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 
 // Generate OG Image
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index f5176ba..632f326 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -27,7 +27,6 @@ useHead({
         'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 
 // Generate OG Image
diff --git a/pages/index.vue b/pages/index.vue
index c170560..e1d7fcc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { navbarData } from '~/data'
+
 useHead({
   title: 'Home',
   meta: [
@@ -8,13 +10,12 @@ useHead({
         'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
     },
   ],
-  titleTemplate: 'Riyad\'s Blog - %s',
 })
 
 // Generate OG Image
 defineOgImageComponent('About', {
   headline: 'Greetings 👋',
-  title: 'Riyad\'s Blog',
+  title: navbarData.homeTitle,
   description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
   link: '/riyad.jpg',
 })