From 4e1acb6af686bf4461eccc8716289d8d96adf209 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sun, 2 Jun 2024 13:59:08 +0600
Subject: [PATCH] Read all static data from one file

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 app.vue                         | 56 ++--------------------
 components/archive/hero.vue     |  8 +++-
 components/category/hero.vue    |  8 +++-
 components/footer/connect.vue   |  7 ++-
 components/footer/developer.vue |  9 ++--
 components/footer/site.vue      |  6 ++-
 components/main/footer.vue      |  1 -
 components/main/header.vue      |  4 +-
 components/main/hero.vue        |  9 ++--
 data/index.ts                   | 84 +++++++++++++++++++++++++++++++++
 pages/about.vue                 |  8 ++--
 pages/blogs/[blog].vue          |  7 +--
 12 files changed, 133 insertions(+), 74 deletions(-)
 create mode 100644 data/index.ts

diff --git a/app.vue b/app.vue
index df88d5e..24b1152 100644
--- a/app.vue
+++ b/app.vue
@@ -1,61 +1,11 @@
 <script setup>
-const description
-  = 'Riyad, Software Engineer at AppsCode working on ByteBuilders, with over 2+ years experience in Frontend development.'
-const ogTitle
-  = 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving'
-const twitterDescription
-  = 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc'
-const image
-  = 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp'
-const mySite = 'https://blog-nurriyad.vercel.app/'
+import { siteMetaData } from './data'
+
 useHead({
   htmlAttrs: {
     lang: 'en',
   },
-  meta: [
-    {
-      name: 'description',
-      content: description,
-    },
-    // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
-    { property: 'og:site_name', content: mySite },
-    { property: 'og:type', content: 'website' },
-    {
-      property: 'og:url',
-      content: mySite,
-    },
-    {
-      property: 'og:title',
-      content: ogTitle,
-    },
-    {
-      property: 'og:description',
-      content: description,
-    },
-    {
-      property: 'og:image',
-      content: image,
-    },
-    // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
-    { name: 'twitter:site', content: '@qdnvubp' },
-    { name: 'twitter:card', content: 'summary_large_image' },
-    {
-      name: 'twitter:url',
-      content: mySite,
-    },
-    {
-      name: 'twitter:title',
-      content: ogTitle,
-    },
-    {
-      name: 'twitter:description',
-      content: twitterDescription,
-    },
-    {
-      name: 'twitter:image',
-      content: image,
-    },
-  ],
+  meta: () => siteMetaData,
 })
 </script>
 
diff --git a/components/archive/hero.vue b/components/archive/hero.vue
index 7a0e6de..8b04d14 100644
--- a/components/archive/hero.vue
+++ b/components/archive/hero.vue
@@ -1,12 +1,16 @@
+<script setup lang="ts">
+import { blogsPage } from '~/data'
+</script>
+
 <template>
   <div class="container mx-auto mb-5">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
         <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
-          All Blogs
+          {{ blogsPage.title }}
         </h1>
         <p class="dark:text-zinc-300">
-          Here you will find all the blog posts I have written & published on this site.
+          {{ blogsPage.description }}
         </p>
       </div>
       <div class="px-6 justify-self-center">
diff --git a/components/category/hero.vue b/components/category/hero.vue
index 021aca3..754ecbf 100644
--- a/components/category/hero.vue
+++ b/components/category/hero.vue
@@ -1,12 +1,16 @@
+<script setup lang="ts">
+import { categoryPage } from '~/data'
+</script>
+
 <template>
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
         <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
-          Categories
+          {{ categoryPage.title }}
         </h1>
         <p class="dark:text-zinc-300">
-          Blow this category is generated from all the tags are mentioned in the different blog post
+          {{ categoryPage.description }}
         </p>
       </div>
       <div class="px-6 justify-self-center">
diff --git a/components/footer/connect.vue b/components/footer/connect.vue
index f6fa9fb..274d1d1 100644
--- a/components/footer/connect.vue
+++ b/components/footer/connect.vue
@@ -1,11 +1,14 @@
+<script setup lang="ts">
+import { footerData } from '~/data'
+</script>
+
 <template>
   <div>
     <p class="text-black dark:text-zinc-300   text-base font-semibold">
       Connect With Me
     </p>
     <p class="dark:text-zinc-300  ">
-      I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you
-      have an interesting idea, either open source or paid let's connect.
+      {{ footerData.authorInterest }}
     </p>
 
     <a
diff --git a/components/footer/developer.vue b/components/footer/developer.vue
index c5ce349..e105c35 100644
--- a/components/footer/developer.vue
+++ b/components/footer/developer.vue
@@ -1,11 +1,14 @@
+<script setup lang="ts">
+import { footerData } from '~/data'
+</script>
+
 <template>
   <div>
     <p class="text-black dark:text-zinc-300   text-2xl py-1 font-semibold">
-      Al Asad Nur Riyad
+      {{ footerData.author }}
     </p>
     <p class="py-2 dark:text-zinc-300  ">
-      Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently
-      working at Appscode Inc.
+      {{ footerData.aboutAuthor }}
     </p>
     <div class="my-3 space-x-3 pb-3">
       <NuxtLink
diff --git a/components/footer/site.vue b/components/footer/site.vue
index ce080b6..0314467 100644
--- a/components/footer/site.vue
+++ b/components/footer/site.vue
@@ -1,10 +1,14 @@
+<script setup lang="ts">
+import { footerData } from '~/data'
+</script>
+
 <template>
   <div>
     <p class="text-black dark:text-zinc-300   text-base py-1 font-semibold">
       About This Site
     </p>
     <p class="py-2 dark:text-zinc-300 ">
-      This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel.
+      {{ footerData.aboutTheSite }}
     </p>
   </div>
 </template>
diff --git a/components/main/footer.vue b/components/main/footer.vue
index fc3181b..93a7ae2 100644
--- a/components/main/footer.vue
+++ b/components/main/footer.vue
@@ -10,7 +10,6 @@ const path = computed(() => route.fullPath.replace('/', ''))
       <div class="grid grid-cols-1 md:grid-cols-3">
         <FooterSite v-if="path === 'about'" />
         <FooterDeveloper v-else />
-
         <FooterLink />
         <FooterConnect />
       </div>
diff --git a/components/main/header.vue b/components/main/header.vue
index 92ea1ab..c968880 100644
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { navbarData } from '../../data'
+
 const colorMode = useColorMode()
 function onClick(val: string) {
   colorMode.preference = val
@@ -11,7 +13,7 @@ function onClick(val: string) {
       <ul class="flex items-baseline space-x-5">
         <li class="text-base sm:text-2xl font-bold">
           <NuxtLink to="/">
-            Riyad's Blog
+            {{ navbarData.homeTitle }}
           </NuxtLink>
         </li>
       </ul>
diff --git a/components/main/hero.vue b/components/main/hero.vue
index ebde4b8..7d10586 100644
--- a/components/main/hero.vue
+++ b/components/main/hero.vue
@@ -1,13 +1,16 @@
+<script setup lang="ts">
+import { homePage } from '~/data'
+</script>
+
 <template>
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
         <h1 class="text-black dark:text-zinc-300   font-semibold leading-tight text-4xl md:text-5xl my-5">
-          Welcome To My Blog Site
+          {{ homePage.title }}
         </h1>
         <p class="dark:text-zinc-300  ">
-          Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles,
-          Tips, Learning resources and more.
+          {{ homePage.description }}
         </p>
       </div>
       <div class="px-6 justify-self-center">
diff --git a/data/index.ts b/data/index.ts
new file mode 100644
index 0000000..1dbab79
--- /dev/null
+++ b/data/index.ts
@@ -0,0 +1,84 @@
+export const navbarData = {
+  homeTitle: 'Riyad\'s Blog',
+}
+
+export const footerData = {
+  author: 'Al Asad Nur Riyad',
+  aboutAuthor: 'Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at Appscode Inc.',
+  authorInterest: 'I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you have an interesting idea, either open source or paid let\'s connect.',
+  aboutTheSite: 'This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it\'s deployed in Vercel.',
+}
+
+export const homePage = {
+  title: 'Welcome To My Blog Site',
+  description: 'Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
+}
+
+export const blogsPage = {
+  title: 'All Blogs',
+  description: 'Here you will find all the blog posts I have written & published on this site.',
+}
+
+export const categoryPage = {
+  title: 'Categories',
+  description: 'Blow this category is generated from all the tags are mentioned in the different blog post',
+}
+
+export const aboutPage = {
+  title: 'Al Asad Nur Riyad',
+  description: 'Software Engineer, Problem Solver, Web Enthusiast.',
+  aboutMe: 'Hello, fellow human! I\'m a software wizard who spends most of his day crafting code spells at @AppsCode in the Bytebuilders team. When I\'m not crafting code, you can find me summoning solutions to problems on online judges. Just don\'t ask me to cast any love spells, my magic only works on machines!',
+}
+
+export const seoData = {
+  description: 'Riyad, Software Engineer at AppsCode, with over 2.5+ years experience in software development.',
+  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/',
+}
+
+export const siteMetaData = [
+  {
+    name: 'description',
+    content: seoData.description,
+  },
+  // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
+  { property: 'og:site_name', content: seoData.mySite },
+  { property: 'og:type', content: 'website' },
+  {
+    property: 'og:url',
+    content: seoData.mySite,
+  },
+  {
+    property: 'og:title',
+    content: seoData.ogTitle,
+  },
+  {
+    property: 'og:description',
+    content: seoData.description,
+  },
+  {
+    property: 'og:image',
+    content: seoData.image,
+  },
+  // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
+  { name: 'twitter:site', content: '@qdnvubp' },
+  { name: 'twitter:card', content: 'summary_large_image' },
+  {
+    name: 'twitter:url',
+    content: seoData.mySite,
+  },
+  {
+    name: 'twitter:title',
+    content: seoData.ogTitle,
+  },
+  {
+    name: 'twitter:description',
+    content: seoData.twitterDescription,
+  },
+  {
+    name: 'twitter:image',
+    content: seoData.image,
+  },
+]
diff --git a/pages/about.vue b/pages/about.vue
index 0460b93..f1f8757 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { aboutPage } from '~/data'
+
 defineOgImageComponent('About', {
   headline: 'Greetings 👋',
   title: 'Riyad\'s Blog',
@@ -14,7 +16,7 @@ defineOgImageComponent('About', {
         <div class="flex justify-between">
           <div>
             <h1 class="text-xl sm:text-4xl  pb-2 font-bold ">
-              Al Asad Nur Riyad
+              {{ aboutPage.title }}
             </h1>
 
             <div class="my-3 space-x-2 md:space-x-3 pb-10">
@@ -63,10 +65,10 @@ defineOgImageComponent('About', {
           </div>
         </div>
         <h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
-          Software Engineer, Problem Solver, Web Enthusiast.
+          {{ aboutPage.description }}
         </h3>
 
-        <p>Hello, fellow human! I'm a software wizard who spends most of his day crafting code spells at @AppsCode in the Bytebuilders team. When I'm not crafting code, you can find me summoning solutions to problems on online judges. Just don't ask me to cast any love spells, my magic only works on machines!</p>
+        <p>{{ aboutPage.aboutMe }}</p>
       </div>
       <div class="hidden sm:block col-span-3">
         <NuxtImg
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 69997f1..5b73695 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -110,14 +110,15 @@ defineOgImageComponent('Test', {
     </div>
     <BlogToc />
 
-    <div class="flex flex-row gap-2">
+    <div class="flex mt-10 flex-row gap-2">
       <SocialShare
         v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
         :key="network"
+        aria-label="Share with {network}"
         :network="network"
         :styled="true"
-        :label="false"
-        class="p-4"
+        :label="true"
+        class="p-1"
       />
     </div>
   </div>