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

Generate category from blog post tag

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-12-20 22:50:21 +06:00
parent ca168271cb
commit a8a0473371
9 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,10 +11,10 @@ if (error.value)
const data = computed<BlogPost>(() => {
return {
title: articles.value?.title || 'no-title available',
description: articles.value?.description || 'no-descriptoin available',
image: articles.value?.image || '/nuxt-blog/no-image_cyyits.png',
description: articles.value?.description || 'no-description available',
image: articles.value?.image || '/not-found.jpg',
alt: articles.value?.alt || 'no alter data available',
ogImage: articles.value?.ogImage || '/nuxt-blog/no-image_cyyits.png',
ogImage: articles.value?.ogImage || '/not-found.jpg',
date: articles.value?.date || 'not-date-available',
tags: articles.value?.tags || [],
published: articles.value?.published || false,

22
pages/blogs/index.vue
View File

@@ -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"