Skip to content

Commit 59853bb

Browse files
nurRiyadnurRiyad
authored
Merge pull request #50 from nurRiyad/riyad/data
Read all static data from one file
2 parents d79f1b5 + 4e1acb6 commit 59853bb

File tree

12 files changed

+133
-74
lines changed

12 files changed

+133
-74
lines changed

‎app.vue

+3-53
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,11 @@
11
<script setup>
2-
const description
3-
= 'Riyad, Software Engineer at AppsCode working on ByteBuilders, with over 2+ years experience in Frontend development.'
4-
const ogTitle
5-
= 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving'
6-
const twitterDescription
7-
= 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc'
8-
const image
9-
= 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp'
10-
const mySite = 'https://blog-nurriyad.vercel.app/'
2+
import { siteMetaData } from './data'
3+
114
useHead({
125
htmlAttrs: {
136
lang: 'en',
147
},
15-
meta: [
16-
{
17-
name: 'description',
18-
content: description,
19-
},
20-
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
21-
{ property: 'og:site_name', content: mySite },
22-
{ property: 'og:type', content: 'website' },
23-
{
24-
property: 'og:url',
25-
content: mySite,
26-
},
27-
{
28-
property: 'og:title',
29-
content: ogTitle,
30-
},
31-
{
32-
property: 'og:description',
33-
content: description,
34-
},
35-
{
36-
property: 'og:image',
37-
content: image,
38-
},
39-
// Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
40-
{ name: 'twitter:site', content: '@qdnvubp' },
41-
{ name: 'twitter:card', content: 'summary_large_image' },
42-
{
43-
name: 'twitter:url',
44-
content: mySite,
45-
},
46-
{
47-
name: 'twitter:title',
48-
content: ogTitle,
49-
},
50-
{
51-
name: 'twitter:description',
52-
content: twitterDescription,
53-
},
54-
{
55-
name: 'twitter:image',
56-
content: image,
57-
},
58-
],
8+
meta: () => siteMetaData,
599
})
6010
</script>
6111

‎components/archive/hero.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
<script setup lang="ts">
2+
import { blogsPage } from '~/data'
3+
</script>
4+
15
<template>
26
<div class="container mx-auto mb-5">
37
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
48
<div class="px-6">
59
<h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
6-
All Blogs
10+
{{ blogsPage.title }}
711
</h1>
812
<p class="dark:text-zinc-300">
9-
Here you will find all the blog posts I have written & published on this site.
13+
{{ blogsPage.description }}
1014
</p>
1115
</div>
1216
<div class="px-6 justify-self-center">

‎components/category/hero.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
<script setup lang="ts">
2+
import { categoryPage } from '~/data'
3+
</script>
4+
15
<template>
26
<div class="container mx-auto">
37
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
48
<div class="px-6">
59
<h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
6-
Categories
10+
{{ categoryPage.title }}
711
</h1>
812
<p class="dark:text-zinc-300">
9-
Blow this category is generated from all the tags are mentioned in the different blog post
13+
{{ categoryPage.description }}
1014
</p>
1115
</div>
1216
<div class="px-6 justify-self-center">

‎components/footer/connect.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
<script setup lang="ts">
2+
import { footerData } from '~/data'
3+
</script>
4+
15
<template>
26
<div>
37
<p class="text-black dark:text-zinc-300 text-base font-semibold">
48
Connect With Me
59
</p>
610
<p class="dark:text-zinc-300 ">
7-
I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you
8-
have an interesting idea, either open source or paid let's connect.
11+
{{ footerData.authorInterest }}
912
</p>
1013

1114
<a

‎components/footer/developer.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
<script setup lang="ts">
2+
import { footerData } from '~/data'
3+
</script>
4+
15
<template>
26
<div>
37
<p class="text-black dark:text-zinc-300 text-2xl py-1 font-semibold">
4-
Al Asad Nur Riyad
8+
{{ footerData.author }}
59
</p>
610
<p class="py-2 dark:text-zinc-300 ">
7-
Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently
8-
working at Appscode Inc.
11+
{{ footerData.aboutAuthor }}
912
</p>
1013
<div class="my-3 space-x-3 pb-3">
1114
<NuxtLink

‎components/footer/site.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1+
<script setup lang="ts">
2+
import { footerData } from '~/data'
3+
</script>
4+
15
<template>
26
<div>
37
<p class="text-black dark:text-zinc-300 text-base py-1 font-semibold">
48
About This Site
59
</p>
610
<p class="py-2 dark:text-zinc-300 ">
7-
This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel.
11+
{{ footerData.aboutTheSite }}
812
</p>
913
</div>
1014
</template>

‎components/main/footer.vue

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ const path = computed(() => route.fullPath.replace('/', ''))
1010
<div class="grid grid-cols-1 md:grid-cols-3">
1111
<FooterSite v-if="path === 'about'" />
1212
<FooterDeveloper v-else />
13-
1413
<FooterLink />
1514
<FooterConnect />
1615
</div>

‎components/main/header.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import { navbarData } from '../../data'
3+
24
const colorMode = useColorMode()
35
function onClick(val: string) {
46
colorMode.preference = val
@@ -11,7 +13,7 @@ function onClick(val: string) {
1113
<ul class="flex items-baseline space-x-5">
1214
<li class="text-base sm:text-2xl font-bold">
1315
<NuxtLink to="/">
14-
Riyad's Blog
16+
{{ navbarData.homeTitle }}
1517
</NuxtLink>
1618
</li>
1719
</ul>

‎components/main/hero.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
<script setup lang="ts">
2+
import { homePage } from '~/data'
3+
</script>
4+
15
<template>
26
<div class="container mx-auto">
37
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
48
<div class="px-6">
59
<h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
6-
Welcome To My Blog Site
10+
{{ homePage.title }}
711
</h1>
812
<p class="dark:text-zinc-300 ">
9-
Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles,
10-
Tips, Learning resources and more.
13+
{{ homePage.description }}
1114
</p>
1215
</div>
1316
<div class="px-6 justify-self-center">

‎data/index.ts

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
export const navbarData = {
2+
homeTitle: 'Riyad\'s Blog',
3+
}
4+
5+
export const footerData = {
6+
author: 'Al Asad Nur Riyad',
7+
aboutAuthor: 'Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at Appscode Inc.',
8+
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.',
9+
aboutTheSite: 'This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it\'s deployed in Vercel.',
10+
}
11+
12+
export const homePage = {
13+
title: 'Welcome To My Blog Site',
14+
description: 'Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
15+
}
16+
17+
export const blogsPage = {
18+
title: 'All Blogs',
19+
description: 'Here you will find all the blog posts I have written & published on this site.',
20+
}
21+
22+
export const categoryPage = {
23+
title: 'Categories',
24+
description: 'Blow this category is generated from all the tags are mentioned in the different blog post',
25+
}
26+
27+
export const aboutPage = {
28+
title: 'Al Asad Nur Riyad',
29+
description: 'Software Engineer, Problem Solver, Web Enthusiast.',
30+
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!',
31+
}
32+
33+
export const seoData = {
34+
description: 'Riyad, Software Engineer at AppsCode, with over 2.5+ years experience in software development.',
35+
ogTitle: 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving',
36+
twitterDescription: 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc',
37+
image: 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp',
38+
mySite: 'https://blog-nurriyad.vercel.app/',
39+
}
40+
41+
export const siteMetaData = [
42+
{
43+
name: 'description',
44+
content: seoData.description,
45+
},
46+
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
47+
{ property: 'og:site_name', content: seoData.mySite },
48+
{ property: 'og:type', content: 'website' },
49+
{
50+
property: 'og:url',
51+
content: seoData.mySite,
52+
},
53+
{
54+
property: 'og:title',
55+
content: seoData.ogTitle,
56+
},
57+
{
58+
property: 'og:description',
59+
content: seoData.description,
60+
},
61+
{
62+
property: 'og:image',
63+
content: seoData.image,
64+
},
65+
// Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
66+
{ name: 'twitter:site', content: '@qdnvubp' },
67+
{ name: 'twitter:card', content: 'summary_large_image' },
68+
{
69+
name: 'twitter:url',
70+
content: seoData.mySite,
71+
},
72+
{
73+
name: 'twitter:title',
74+
content: seoData.ogTitle,
75+
},
76+
{
77+
name: 'twitter:description',
78+
content: seoData.twitterDescription,
79+
},
80+
{
81+
name: 'twitter:image',
82+
content: seoData.image,
83+
},
84+
]

‎pages/about.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import { aboutPage } from '~/data'
3+
24
defineOgImageComponent('About', {
35
headline: 'Greetings 👋',
46
title: 'Riyad\'s Blog',
@@ -14,7 +16,7 @@ defineOgImageComponent('About', {
1416
<div class="flex justify-between">
1517
<div>
1618
<h1 class="text-xl sm:text-4xl pb-2 font-bold ">
17-
Al Asad Nur Riyad
19+
{{ aboutPage.title }}
1820
</h1>
1921

2022
<div class="my-3 space-x-2 md:space-x-3 pb-10">
@@ -63,10 +65,10 @@ defineOgImageComponent('About', {
6365
</div>
6466
</div>
6567
<h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
66-
Software Engineer, Problem Solver, Web Enthusiast.
68+
{{ aboutPage.description }}
6769
</h3>
6870

69-
<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>
71+
<p>{{ aboutPage.aboutMe }}</p>
7072
</div>
7173
<div class="hidden sm:block col-span-3">
7274
<NuxtImg

‎pages/blogs/[blog].vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,15 @@ defineOgImageComponent('Test', {
110110
</div>
111111
<BlogToc />
112112

113-
<div class="flex flex-row gap-2">
113+
<div class="flex mt-10 flex-row gap-2">
114114
<SocialShare
115115
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
116116
:key="network"
117+
aria-label="Share with {network}"
117118
:network="network"
118119
:styled="true"
119-
:label="false"
120-
class="p-4"
120+
:label="true"
121+
class="p-1"
121122
/>
122123
</div>
123124
</div>

0 commit comments

Comments
 (0)