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

Merge pull request #38 from nurRiyad/riyad/tags

Browse Source 
Generate category from blog post tag
This commit is contained in:
Al Asad Nur Riyad
2023-12-20 23:04:32 +06:00
committed by GitHub
parent ca168271cb a8a0473371
commit cf80a76601
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"> <script setup lang="ts">
interface Props { interface Props {
title: string title: string
count: number
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
title: 'No title available', title: 'No title available',
count: 0,
}) })
// some random color for tags // 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" rand-bg-color hover:scale-[1.05] transition-all duration-500"
> >
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold"> <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
<h1>#{{ title }}</h1> <h1>#{{ title }}({{ count }})</h1>
</NuxtLink> </NuxtLink>
</div> </div>
</template> </template>

3
components/category/hero.vue
View File

@@ -6,8 +6,7 @@
Categories Categories
</h1> </h1>
<p class="dark:text-zinc-300"> <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 Blow this category is generated from all the tags are mentioned in the different blog post
in near future.
</p> </p>
</div> </div>
<div class="px-6 justify-self-center"> <div class="px-6 justify-self-center">

2
components/category/topic.vue
View File

@@ -17,7 +17,7 @@ const category = computed(() => {
<template> <template>
<div class="container mx-auto"> <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"> <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
#{{ category }} #{{ category }}
</h1> </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(), queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
) )
const formatedData = computed(() => { const formattedData = computed(() => {
return data.value?.map((articles) => { return data.value?.map((articles) => {
return { return {
path: articles._path, path: articles._path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-descriptoin available', description: articles.description || 'no-description available',
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available', 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', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -34,17 +34,16 @@ useHead({
</script> </script>
<template> <template>
<div class="pb-10"> <div class="pb-10 px-4">
<div class="px-6"> <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<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 " />
<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 ">
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 "> Recent Post
Recent Post </h2>
</h2>
</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <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 <BlogCard
:path="post.path" :path="post.path"
:title="post.title" :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(), queryContent('/blogs').limit(3).sort({ _id: 1 }).find(),
) )
const formatedData = computed(() => { const formattedData = computed(() => {
return data.value?.map((articles) => { return data.value?.map((articles) => {
return { return {
path: articles._path, path: articles._path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-descriptoin available', description: articles.description || 'no-description available',
image: articles.image || '/nuxt-blog/no-image_cyyits.png', image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available', 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', date: articles.date || 'not-date-available',
tags: articles.tags || [], tags: articles.tags || [],
published: articles.published || false, published: articles.published || false,
@@ -34,17 +34,15 @@ useHead({
</script> </script>
<template> <template>
<div> <div class="px-4">
<div class="px-6"> <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<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 " />
<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 ">
<h2 class="text-4xl font-semibold text-black dark:text-zinc-300 "> Trending Post
Trending Post </h2>
</h2>
</div>
</div> </div>
<div class="grid grid-cols-1 "> <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 <ArchiveCard
:path="post.path" :path="post.path"
:title="post.title" :title="post.title"

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

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

22
pages/blogs/index.vue
View File

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

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

@@ -49,7 +49,7 @@ defineOgImage()
</script> </script>
<template> <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 /> <CategoryTopic />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<BlogCard <BlogCard

39
pages/categories/index.vue
View File

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