Files
Cloud-Blog/pages/categories/index.vue
2023-12-20 22:50:21 +06:00

49 lines
1.1 KiB
Vue

<script lang="ts" setup>
import { makeFirstCharUpper } from '@/utils/helper'
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',
meta: [
{
name: 'description',
content:
'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
},
],
titleTemplate: 'Riyad\'s Blog - %s',
})
defineOgImage()
</script>
<template>
<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 allTags"
:key="topic[0]"
:title="makeFirstCharUpper(topic[0])"
:count="topic[1]"
/>
</div>
</main>
</template>