Merge pull request #55 from nurRiyad/riyad/title-fix

Fix title issue and seo data

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

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>
 

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>
 

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',

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',
+      title: navbarData.homeTitle,
-      titleTemplate: '%s - Riyad\'s Blog',
+      titleTemplate: `%s - ${navbarData.homeTitle}`,
-      meta: [{ name: 'description', content: 'Riyad\'s awesome blog' }],
     },
     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: {

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',

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

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}`,
     },
   ],
 })

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

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

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

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