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>

15
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="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>
<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"

14
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="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>
<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"

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"

2
pages/categories/[category].vue
View File

@@ -49,7 +49,7 @@ defineOgImage()
</script>
<template>
<main class="container max-w-5xl mx-auto text-zinc-600">
<main class="container max-w-5xl mx-auto text-zinc-600 px-4">
<CategoryTopic />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<BlogCard

39
pages/categories/index.vue
View File

@@ -1,22 +1,22 @@
<script lang="ts" setup>
import { makeFirstCharUpper } from '@/utils/helper'
const topics = [
'javascript',
'typescript',
'git',
'docker',
'kubernetes',
'vue',
'nuxt',
'pinia',
'vuex',
'firebase',
'supabse',
'cypress',
'vercel',
'namecheap',
]
const { data } = await useAsyncData('all-blog-post-for-category', () => queryContent('/blogs').sort({ _id: -1 }).find())
const allTags = new Map()
data.value?.forEach((blog) => {
const tags: Array<string> = blog.tags || []
tags.forEach((tag) => {
if (allTags.has(tag)) {
const cnt = allTags.get(tag)
allTags.set(tag, cnt + 1)
}
else {
allTags.set(tag, 1)
}
})
})
useHead({
title: 'Categories',
@@ -37,7 +37,12 @@ defineOgImage()
<main class="container max-w-5xl mx-auto text-zinc-600">
<CategoryHero />
<div class="flex flex-wrap px-6 mt-12 gap-3">
<CategoryCard v-for="topic in topics" :key="topic" :title="makeFirstCharUpper(topic)" />
<CategoryCard
v-for="topic in allTags"
:key="topic[0]"
:title="makeFirstCharUpper(topic[0])"
:count="topic[1]"
/>
</div>
</main>
</template>