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

Update to Nuxt 3.14 and Replace npm with pnpm (#72)

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
2024-11-09 03:18:21 +06:00
committed by GitHub
parent 32e4f6fe44
commit 9db5ae8103
49 changed files with 15735 additions and 20211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/[...slug].vue
View File

@@ -18,7 +18,7 @@ defineOgImageComponent('About', {
<template>
<div class="py-5">
<div class="container max-w-xl mx-auto">
<div class="container max-w-xl mx-auto">
<Logo404 />
</div>
</div>

22
pages/about.vue
View File

@@ -21,11 +21,11 @@ defineOgImageComponent('About', {
<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="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 ">
<h1 class="text-xl sm:text-4xl pb-2 font-bold">
{{ aboutPage.title }}
</h1>
@@ -65,13 +65,7 @@ defineOgImageComponent('About', {
</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"
/>
<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">
@@ -81,13 +75,7 @@ defineOgImageComponent('About', {
<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"
/>
<NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
</div>
</div>
</div>

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

@@ -4,10 +4,11 @@ import { navbarData, seoData } from '~/data'
const { path } = useRoute()
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () => queryContent(path).findOne())
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
queryContent(path).findOne(),
)
if (error.value)
navigateTo('/404')
if (error.value) navigateTo('/404')
const data = computed<BlogPost>(() => {
return {
@@ -83,12 +84,11 @@ defineOgImageComponent('Test', {
title: data.value.title || '',
description: data.value.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="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"
@@ -99,8 +99,7 @@ defineOgImageComponent('Test', {
: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"
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>
@@ -111,7 +110,7 @@ defineOgImageComponent('Test', {
</div>
<BlogToc />
<div class="flex flex-row flex-wrap md:flex-nowrap mt-10 gap-2">
<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"

86
pages/blogs/index.vue
View File

@@ -6,44 +6,47 @@ const pageNumber = ref(1)
const searchTest = ref('')
const formattedData = computed(() => {
return data.value?.map((articles) => {
return {
path: articles._path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
}
}) || []
return (
data.value?.map((articles) => {
return {
path: articles._path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
}
}) || []
)
})
const searchData = computed(() => {
return formattedData.value.filter((data) => {
const lowerTitle = data.title.toLocaleLowerCase()
if (lowerTitle.search(searchTest.value) !== -1)
return true
else return false
}) || []
return (
formattedData.value.filter((data) => {
const lowerTitle = data.title.toLocaleLowerCase()
if (lowerTitle.search(searchTest.value) !== -1) return true
else return false
}) || []
)
})
const paginatedData = computed(() => {
return searchData.value.filter((data, idx) => {
const startInd = ((pageNumber.value - 1) * elementPerPage.value)
const endInd = (pageNumber.value * elementPerPage.value) - 1
return (
searchData.value.filter((data, idx) => {
const startInd = (pageNumber.value - 1) * elementPerPage.value
const endInd = pageNumber.value * elementPerPage.value - 1
if (idx >= startInd && idx <= endInd)
return true
else return false
}) || []
if (idx >= startInd && idx <= endInd) return true
else return false
}) || []
)
})
function onPreviousPageClick() {
if (pageNumber.value > 1)
pageNumber.value -= 1
if (pageNumber.value > 1) pageNumber.value -= 1
}
const totalPage = computed(() => {
@@ -53,8 +56,7 @@ const totalPage = computed(() => {
})
function onNextPageClick() {
if (pageNumber.value < totalPage.value)
pageNumber.value += 1
if (pageNumber.value < totalPage.value) pageNumber.value += 1
}
useHead({
@@ -87,8 +89,8 @@ defineOgImage({
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"
>
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">
@@ -106,20 +108,24 @@ defineOgImage({
/>
</template>
<ArchiveCard
v-if="paginatedData.length <= 0"
title="No Post Found"
image="/not-found.jpg"
/>
<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 ">
<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 }" />
<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 }" />
<Icon
name="mdi:code-greater-than"
size="30"
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
/>
</button>
</div>
</main>

3
pages/categories/[category].vue
View File

@@ -6,8 +6,7 @@ const category = computed(() => {
const name = route.params.category || ''
let strName = ''
if (Array.isArray(name))
strName = name.at(0) || ''
if (Array.isArray(name)) strName = name.at(0) || ''
else strName = name
return strName
})

10
pages/categories/index.vue
View File

@@ -1,7 +1,9 @@
<script lang="ts" setup>
import { makeFirstCharUpper } from '@/utils/helper'
const { data } = await useAsyncData('all-blog-post-for-category', () => queryContent('/blogs').sort({ _id: -1 }).find())
const { data } = await useAsyncData('all-blog-post-for-category', () =>
queryContent('/blogs').sort({ _id: -1 }).find(),
)
const allTags = new Map()
@@ -11,8 +13,7 @@ data.value?.forEach((blog) => {
if (allTags.has(tag)) {
const cnt = allTags.get(tag)
allTags.set(tag, cnt + 1)
}
else {
} else {
allTags.set(tag, 1)
}
})
@@ -34,7 +35,8 @@ 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.',
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,
},
})