Generate category from blog post tag
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
@@ -1,19 +1,19 @@
|
||||
<script lang="ts" setup>
|
||||
const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
|
||||
|
||||
const elementPerPgae = ref(4)
|
||||
const elementPerPage = ref(5)
|
||||
const pageNumber = ref(1)
|
||||
const searchTest = ref('')
|
||||
|
||||
const formatedData = computed(() => {
|
||||
const formattedData = computed(() => {
|
||||
return data.value?.map((articles) => {
|
||||
return {
|
||||
path: articles._path,
|
||||
title: articles.title || 'no-title available',
|
||||
description: articles.description || 'no-descriptoin available',
|
||||
image: articles.image || '/nuxt-blog/no-image_cyyits.png',
|
||||
description: articles.description || 'no-description available',
|
||||
image: articles.image || '/not-found.jpg',
|
||||
alt: articles.alt || 'no alter data available',
|
||||
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
|
||||
ogImage: articles.ogImage || '/not-found.jpg',
|
||||
date: articles.date || 'not-date-available',
|
||||
tags: articles.tags || [],
|
||||
published: articles.published || false,
|
||||
@@ -22,7 +22,7 @@ const formatedData = computed(() => {
|
||||
})
|
||||
|
||||
const searchData = computed(() => {
|
||||
return formatedData.value.filter((data) => {
|
||||
return formattedData.value.filter((data) => {
|
||||
const lowerTitle = data.title.toLocaleLowerCase()
|
||||
if (lowerTitle.search(searchTest.value) !== -1)
|
||||
return true
|
||||
@@ -32,8 +32,8 @@ const searchData = computed(() => {
|
||||
|
||||
const paginatedData = computed(() => {
|
||||
return searchData.value.filter((data, idx) => {
|
||||
const startInd = ((pageNumber.value - 1) * elementPerPgae.value)
|
||||
const endInd = (pageNumber.value * elementPerPgae.value) - 1
|
||||
const startInd = ((pageNumber.value - 1) * elementPerPage.value)
|
||||
const endInd = (pageNumber.value * elementPerPage.value) - 1
|
||||
|
||||
if (idx >= startInd && idx <= endInd)
|
||||
return true
|
||||
@@ -48,7 +48,7 @@ function onPreviousPageClick() {
|
||||
|
||||
const totalPage = computed(() => {
|
||||
const ttlContent = searchData.value.length || 0
|
||||
const totalPage = Math.ceil(ttlContent / elementPerPgae.value)
|
||||
const totalPage = Math.ceil(ttlContent / elementPerPage.value)
|
||||
return totalPage
|
||||
})
|
||||
|
||||
@@ -75,7 +75,7 @@ defineOgImage()
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600">
|
||||
<ArchiveHero />
|
||||
|
||||
<div class="px-3">
|
||||
<div class="px-6">
|
||||
<input
|
||||
v-model="searchTest"
|
||||
placeholder="Search"
|
||||
@@ -85,7 +85,7 @@ defineOgImage()
|
||||
</div>
|
||||
|
||||
<ClientOnly>
|
||||
<div v-auto-animate class="space-y-5 my-5">
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user