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

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>