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

4
components/category/card.vue
View File

@@ -1,10 +1,12 @@
<script setup lang="ts">
interface Props {
title: string
count: number
}
withDefaults(defineProps<Props>(), {
title: 'No title available',
count: 0,
})
// some random color for tags
@@ -37,7 +39,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
rand-bg-color hover:scale-[1.05] transition-all duration-500"
>
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
<h1>#{{ title }}</h1>
<h1>#{{ title }}({{ count }})</h1>
</NuxtLink>
</div>
</template>

3
components/category/hero.vue
View File

@@ -6,8 +6,7 @@
Categories
</h1>
<p class="dark:text-zinc-300">
Blow All the topics are listed on which either I have written a blog or will write a blog
in near future.
Blow this category is generated from all the tags are mentioned in the different blog post
</p>
</div>
<div class="px-6 justify-self-center">

2
components/category/topic.vue
View File

@@ -17,7 +17,7 @@ const category = computed(() => {
<template>
<div class="container mx-auto">
<div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-slate-900">
<div class="p-6 my-4 mx-2 rounded-md bg-gray-200 dark:bg-slate-900">
<h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
#{{ category }}
</h1>

25
components/main/recent.vue
View File

@@ -4,15 +4,15 @@ const { data } = await useAsyncData('recent-post', () =>
queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
)
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,
@@ -34,17 +34,16 @@ useHead({
</script>
<template>
<div class="pb-10">
<div class="px-6">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Recent Post
</h2>
</div>
<div class="pb-10 px-4">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Recent Post
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<template v-for="post in formatedData" :key="post.title">
<template v-for="post in formattedData" :key="post.title">
<BlogCard
:path="post.path"
:title="post.title"

24
components/main/trending.vue
View File

@@ -4,15 +4,15 @@ const { data } = await useAsyncData('trending-post', () =>
queryContent('/blogs').limit(3).sort({ _id: 1 }).find(),
)
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,
@@ -34,17 +34,15 @@ useHead({
</script>
<template>
<div>
<div class="px-6">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Trending Post
</h2>
</div>
<div class="px-4">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Trending Post
</h2>
</div>
<div class="grid grid-cols-1 ">
<template v-for="post in formatedData" :key="post.title">
<template v-for="post in formattedData" :key="post.title">
<ArchiveCard
:path="post.path"
:title="post.title"