RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Read all static data from one file

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2024-06-02 13:59:08 +06:00
parent d79f1b5541
commit 4e1acb6af6
12 changed files with 133 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app.vue
View File

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

8
components/archive/hero.vue
View File

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

8
components/category/hero.vue
View File

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

7
components/footer/connect.vue
View File

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

9
components/footer/developer.vue
View File

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

6
components/footer/site.vue
View File

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

1
components/main/footer.vue
View File

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

4
components/main/header.vue
View File

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

9
components/main/hero.vue
View File

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

84
data/index.ts Normal file
View File

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

8
pages/about.vue
View File

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

7
pages/blogs/[blog].vue
View File

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