Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

app/pages/categories/[category].vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { BlogPost } from '@/types/blog'
+const route = useRoute()
+
+// take category from route params & make first char upper
+const category = computed(() => {
+  const name = route.params.category || ''
+  let strName = ''
+
+  if (Array.isArray(name)) strName = name.at(0) || ''
+  else strName = name
+  return strName
+})
+
+const { data } = await useAsyncData(`category-data-${category.value}`, () =>
+  queryCollection('content')
+    .all()
+    .then((articles) =>
+      articles.filter((article) => {
+        const meta = article.meta as unknown as BlogPost
+        return meta.tags.includes(category.value)
+      }),
+    ),
+)
+
+const formattedData = computed(() => {
+  return data.value?.map((articles) => {
+    const meta = articles.meta as unknown as BlogPost
+    return {
+      path: articles.path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-description available',
+      image: meta.image || '/blogs-img/blog.jpg',
+      alt: meta.alt || 'no alter data available',
+      ogImage: meta.ogImage || '/blogs-img/blog.jpg',
+      date: meta.date || 'not-date-available',
+      tags: meta.tags || [],
+      published: meta.published || false,
+    }
+  })
+})
+
+useHead({
+  title: category.value,
+  meta: [
+    {
+      name: 'description',
+      content: `You will find all the ${category.value} related post here`,
+    },
+  ],
+})
+
+// Generate OG Image
+const siteData = useSiteConfig()
+defineOgImage({
+  props: {
+    title: category.value?.toUpperCase(),
+    description: `You will find all the ${category.value} related post here`,
+    siteName: siteData.url,
+  },
+})
+</script>
+
+<template>
+  <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
+        v-for="post in formattedData"
+        :key="post.title"
+        :path="post.path"
+        :title="post.title"
+        :date="post.date"
+        :description="post.description"
+        :image="post.image"
+        :alt="post.alt"
+        :og-image="post.ogImage"
+        :tags="post.tags"
+        :published="post.published"
+      />
+      <BlogEmpty v-if="data?.length === 0" />
+    </div>
+  </main>
+</template>

app/pages/categories/index.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { makeFirstCharUpper } from '@/utils/helper'
+
+const { data } = await useAsyncData('all-blog-post-by-category', () =>
+  queryCollection('content').all(),
+)
+
+const allTags = new Map()
+
+data.value?.forEach((blog) => {
+  const tags: Array<string> = (blog.meta.tags as string[]) || []
+  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.',
+    },
+  ],
+})
+
+// Generate OG Image
+const siteData = useSiteConfig()
+defineOgImage({
+  props: {
+    title: 'Categories',
+    description:
+      'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+    siteName: siteData.url,
+  },
+})
+</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>