Update to Nuxt 3.14 and Replace npm with pnpm (#72)
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
committed by
GitHub
GitHub
parent
32e4f6fe44
commit
9db5ae8103
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user