Update nuxt to version 4 (#92)
* Nuxt 3.17.4 and other dependencies updated * Temporary fix (maybe) of the Inline Code * Update nuxt to version 4
This commit is contained in:
Nicolhetti
25
app/pages/[...slug].vue
Normal file
25
app/pages/[...slug].vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: '404',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Page not found',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
defineOgImageComponent('About', {
|
||||
headline: 'Wrong Path',
|
||||
title: '404',
|
||||
description: 'Page Not Found',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-5">
|
||||
<div class="container max-w-xl mx-auto">
|
||||
<Logo404 />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
82
app/pages/about.vue
Normal file
82
app/pages/about.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { aboutPage, footerData, navbarData, socialLinks } from '~/data'
|
||||
|
||||
useHead({
|
||||
title: 'About',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: footerData.aboutAuthor,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
defineOgImageComponent('About', {
|
||||
headline: 'Greetings 👋',
|
||||
title: navbarData.homeTitle,
|
||||
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
|
||||
link: '/riyad.jpg',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-5">
|
||||
<div class="sm:grid grid-cols-8 px-6 py-5 sm:py-9 gap-5 container max-w-5xl mx-auto">
|
||||
<div class="col-span-5 max-w-md">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h1 class="text-xl sm:text-4xl pb-2 font-bold">
|
||||
{{ aboutPage.title }}
|
||||
</h1>
|
||||
|
||||
<div class="my-3 space-x-2 md:space-x-3 pb-10">
|
||||
<NuxtLink
|
||||
:to="socialLinks.githubLink"
|
||||
target="_blank"
|
||||
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
|
||||
aria-label="Github"
|
||||
>
|
||||
<Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:to="socialLinks.linkedinLink"
|
||||
target="_blank"
|
||||
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:to="socialLinks.twitterLink"
|
||||
target="_blank"
|
||||
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:to="socialLinks.stackoverflowLink"
|
||||
target="_blank"
|
||||
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
|
||||
aria-label="StackOverflow"
|
||||
>
|
||||
<Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
|
||||
<NuxtImg src="/riyad.jpg" width="125" height="115" quality="50" class="rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
|
||||
{{ aboutPage.description }}
|
||||
</h3>
|
||||
|
||||
<p>{{ aboutPage.aboutMe }}</p>
|
||||
</div>
|
||||
<div class="hidden sm:block col-span-3">
|
||||
<NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
128
app/pages/blogs/[blog].vue
Normal file
128
app/pages/blogs/[blog].vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import type { BlogPost } from '@/types/blog'
|
||||
import { navbarData, seoData } from '~/data'
|
||||
|
||||
const { path } = useRoute()
|
||||
|
||||
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
|
||||
queryCollection('content').path(path).first(),
|
||||
)
|
||||
|
||||
if (error.value) navigateTo('/404')
|
||||
|
||||
const data = computed<BlogPost>(() => {
|
||||
const meta = articles?.value?.meta as unknown as BlogPost
|
||||
return {
|
||||
title: articles.value?.title || 'no-title available',
|
||||
description: articles.value?.description || 'no-description available',
|
||||
image: meta?.image || '/not-found.jpg',
|
||||
alt: meta?.alt || 'no alter data available',
|
||||
ogImage: (articles?.value?.ogImage as unknown as string) || '/not-found.jpg',
|
||||
date: meta?.date || 'not-date-available',
|
||||
tags: meta?.tags || [],
|
||||
published: meta?.published || false,
|
||||
}
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: data.value.title || '',
|
||||
meta: [
|
||||
{ name: 'description', content: data.value.description },
|
||||
{
|
||||
name: 'description',
|
||||
content: data.value.description,
|
||||
},
|
||||
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
|
||||
{ property: 'og:site_name', content: navbarData.homeTitle },
|
||||
{ property: 'og:type', content: 'website' },
|
||||
{
|
||||
property: 'og:url',
|
||||
content: `${seoData.mySite}/${path}`,
|
||||
},
|
||||
{
|
||||
property: 'og:title',
|
||||
content: data.value.title,
|
||||
},
|
||||
{
|
||||
property: 'og:description',
|
||||
content: data.value.description,
|
||||
},
|
||||
{
|
||||
property: 'og:image',
|
||||
content: data.value.ogImage || data.value.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}/${path}`,
|
||||
},
|
||||
{
|
||||
name: 'twitter:title',
|
||||
content: data.value.title,
|
||||
},
|
||||
{
|
||||
name: 'twitter:description',
|
||||
content: data.value.description,
|
||||
},
|
||||
{
|
||||
name: 'twitter:image',
|
||||
content: data.value.ogImage || data.value.image,
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'canonical',
|
||||
href: `${seoData.mySite}/${path}`,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// console.log(articles.value)
|
||||
|
||||
// Generate OG Image
|
||||
defineOgImageComponent('Test', {
|
||||
headline: 'Riyads Blog 👋',
|
||||
title: articles.value?.seo.title || '',
|
||||
description: articles.value?.seo.description || '',
|
||||
link: data.value.ogImage,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12">
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<BlogHeader
|
||||
:title="data.title"
|
||||
:image="data.image"
|
||||
:alt="data.alt"
|
||||
:date="data.date"
|
||||
:description="data.description"
|
||||
:tags="data.tags"
|
||||
/>
|
||||
<div
|
||||
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
|
||||
>
|
||||
<ContentRenderer v-if="articles" :value="articles">
|
||||
<template #empty>
|
||||
<p>No content found.</p>
|
||||
</template>
|
||||
</ContentRenderer>
|
||||
</div>
|
||||
</div>
|
||||
<BlogToc />
|
||||
|
||||
<div class="flex flex-row flex-wrap md:flex-nowrap mt-10 gap-2">
|
||||
<SocialShare
|
||||
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
|
||||
:key="network"
|
||||
:network="network"
|
||||
:styled="true"
|
||||
:label="true"
|
||||
class="p-1"
|
||||
aria-label="Share with {network}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
137
app/pages/blogs/index.vue
Normal file
137
app/pages/blogs/index.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script lang="ts" setup>
|
||||
import Fuse from 'fuse.js'
|
||||
import type { BlogPost } from '~/types/blog'
|
||||
|
||||
const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
|
||||
|
||||
const elementPerPage = ref(5)
|
||||
const pageNumber = ref(1)
|
||||
const searchTest = ref('')
|
||||
|
||||
const formattedData = computed(() => {
|
||||
return (
|
||||
data.value?.map((articles) => {
|
||||
const meta = articles.meta as unknown as BlogPost
|
||||
return {
|
||||
path: articles.path,
|
||||
title: articles.title || 'no-title available',
|
||||
description: articles.description || 'no-description available',
|
||||
image: meta.image || '/not-found.jpg',
|
||||
alt: meta.alt || 'no alter data available',
|
||||
ogImage: meta.ogImage || '/not-found.jpg',
|
||||
date: meta.date || 'not-date-available',
|
||||
tags: meta.tags || [],
|
||||
published: meta.published || false,
|
||||
}
|
||||
}) || []
|
||||
)
|
||||
})
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(formattedData.value, {
|
||||
keys: ['title', 'description'],
|
||||
threshold: 0.4,
|
||||
includeScore: false,
|
||||
})
|
||||
})
|
||||
|
||||
const searchData = computed(() => {
|
||||
if (!searchTest.value.trim()) {
|
||||
return formattedData.value
|
||||
}
|
||||
|
||||
const results = fuse.value.search(searchTest.value)
|
||||
return results.map((result) => result.item)
|
||||
})
|
||||
|
||||
const paginatedData = computed(() => {
|
||||
const startInd = (pageNumber.value - 1) * elementPerPage.value
|
||||
const endInd = pageNumber.value * elementPerPage.value
|
||||
|
||||
return searchData.value.slice(startInd, endInd)
|
||||
})
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (pageNumber.value > 1) pageNumber.value -= 1
|
||||
}
|
||||
|
||||
const totalPage = computed(() => {
|
||||
const ttlContent = searchData.value.length || 0
|
||||
return Math.ceil(ttlContent / elementPerPage.value)
|
||||
})
|
||||
|
||||
function onNextPageClick() {
|
||||
if (pageNumber.value < totalPage.value) pageNumber.value += 1
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: 'Archive',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Here you will find all the blog posts I have written & published on this site.',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// Generate OG Image
|
||||
const siteData = useSiteConfig()
|
||||
defineOgImage({
|
||||
props: {
|
||||
title: 'Archive',
|
||||
description: 'Here you will find all the blog posts I have written & published on this site.',
|
||||
siteName: siteData.url,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600">
|
||||
<ArchiveHero />
|
||||
|
||||
<div class="px-6">
|
||||
<input
|
||||
v-model="searchTest"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-auto-animate class="space-y-5 my-5 px-4">
|
||||
<template v-for="post in paginatedData" :key="post.title">
|
||||
<ArchiveCard
|
||||
:path="post.path"
|
||||
:title="post.title"
|
||||
:date="post.date"
|
||||
:description="post.description"
|
||||
:image="post.image"
|
||||
:alt="post.alt"
|
||||
:og-image="post.ogImage"
|
||||
:tags="post.tags"
|
||||
:published="post.published"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center items-center space-x-6">
|
||||
<button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
|
||||
<Icon
|
||||
name="mdi:code-less-than"
|
||||
size="30"
|
||||
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }"
|
||||
/>
|
||||
</button>
|
||||
<p>{{ pageNumber }} / {{ totalPage }}</p>
|
||||
<button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
|
||||
<Icon
|
||||
name="mdi:code-greater-than"
|
||||
size="30"
|
||||
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
84
app/pages/categories/[category].vue
Normal file
84
app/pages/categories/[category].vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts" setup>
|
||||
import type { BlogPost } from '@/types/blog'
|
||||
const route = useRoute()
|
||||
|
||||
// take category from route params & make first char upper
|
||||
const category = computed(() => {
|
||||
const name = route.params.category || ''
|
||||
let strName = ''
|
||||
|
||||
if (Array.isArray(name)) strName = name.at(0) || ''
|
||||
else strName = name
|
||||
return strName
|
||||
})
|
||||
|
||||
const { data } = await useAsyncData(`category-data-${category.value}`, () =>
|
||||
queryCollection('content')
|
||||
.all()
|
||||
.then((articles) =>
|
||||
articles.filter((article) => {
|
||||
const meta = article.meta as unknown as BlogPost
|
||||
return meta.tags.includes(category.value)
|
||||
}),
|
||||
),
|
||||
)
|
||||
|
||||
const formattedData = computed(() => {
|
||||
return data.value?.map((articles) => {
|
||||
const meta = articles.meta as unknown as BlogPost
|
||||
return {
|
||||
path: articles.path,
|
||||
title: articles.title || 'no-title available',
|
||||
description: articles.description || 'no-description available',
|
||||
image: meta.image || '/blogs-img/blog.jpg',
|
||||
alt: meta.alt || 'no alter data available',
|
||||
ogImage: meta.ogImage || '/blogs-img/blog.jpg',
|
||||
date: meta.date || 'not-date-available',
|
||||
tags: meta.tags || [],
|
||||
published: meta.published || false,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: category.value,
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: `You will find all the ${category.value} related post here`,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// Generate OG Image
|
||||
const siteData = useSiteConfig()
|
||||
defineOgImage({
|
||||
props: {
|
||||
title: category.value?.toUpperCase(),
|
||||
description: `You will find all the ${category.value} related post here`,
|
||||
siteName: siteData.url,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600 px-4">
|
||||
<CategoryTopic />
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
<BlogCard
|
||||
v-for="post in formattedData"
|
||||
:key="post.title"
|
||||
:path="post.path"
|
||||
:title="post.title"
|
||||
:date="post.date"
|
||||
:description="post.description"
|
||||
:image="post.image"
|
||||
:alt="post.alt"
|
||||
:og-image="post.ogImage"
|
||||
:tags="post.tags"
|
||||
:published="post.published"
|
||||
/>
|
||||
<BlogEmpty v-if="data?.length === 0" />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
57
app/pages/categories/index.vue
Normal file
57
app/pages/categories/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts" setup>
|
||||
import { makeFirstCharUpper } from '@/utils/helper'
|
||||
|
||||
const { data } = await useAsyncData('all-blog-post-by-category', () =>
|
||||
queryCollection('content').all(),
|
||||
)
|
||||
|
||||
const allTags = new Map()
|
||||
|
||||
data.value?.forEach((blog) => {
|
||||
const tags: Array<string> = (blog.meta.tags as string[]) || []
|
||||
tags.forEach((tag) => {
|
||||
if (allTags.has(tag)) {
|
||||
const cnt = allTags.get(tag)
|
||||
allTags.set(tag, cnt + 1)
|
||||
} else {
|
||||
allTags.set(tag, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Categories',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// Generate OG Image
|
||||
const siteData = useSiteConfig()
|
||||
defineOgImage({
|
||||
props: {
|
||||
title: 'Categories',
|
||||
description:
|
||||
'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
|
||||
siteName: siteData.url,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600">
|
||||
<CategoryHero />
|
||||
<div class="flex flex-wrap px-6 mt-12 gap-3">
|
||||
<CategoryCard
|
||||
v-for="topic in allTags"
|
||||
:key="topic[0]"
|
||||
:title="makeFirstCharUpper(topic[0])"
|
||||
:count="topic[1]"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
30
app/pages/index.vue
Normal file
30
app/pages/index.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { navbarData } from '~/data'
|
||||
|
||||
useHead({
|
||||
title: 'Home',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// Generate OG Image
|
||||
defineOgImageComponent('About', {
|
||||
headline: 'Greetings 👋',
|
||||
title: navbarData.homeTitle,
|
||||
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
|
||||
link: '/riyad.jpg',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600">
|
||||
<MainHero />
|
||||
<MainRecent />
|
||||
<MainTrending />
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user