Merge pull request #50 from nurRiyad/riyad/data

Read all static data from one file

app.vue

@@ -1,61 +1,11 @@
 <script setup>
-const description
+import { siteMetaData } from './data'
-  = '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/'
 useHead({
   htmlAttrs: {
     lang: 'en',
   },
-  meta: [
+  meta: () => siteMetaData,
-    {
-      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,
-    },
-  ],
 })
 </script>
 

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

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

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
+      {{ footerData.authorInterest }}
-      have an interesting idea, either open source or paid let's connect.
     </p>
 
     <a

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
+      {{ footerData.aboutAuthor }}
-      working at Appscode Inc.
     </p>
     <div class="my-3 space-x-3 pb-3">
       <NuxtLink

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>

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>

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>

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,
+          {{ homePage.description }}
-          Tips, Learning resources and more.
         </p>
       </div>
       <div class="px-6 justify-self-center">

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,
+  },
+]

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

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"
+        :label="true"
-        class="p-4"
+        class="p-1"
       />
     </div>
   </div>