feat: add tag pages and API for dynamic tag handling

Author: TechWatching

app/pages/tags/[tag].vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const tagSlug = route.params.tag as string
+
+const { data: tagsBySlug } = await useFetch<[string, string][]>('/api/tags.json')
+const tag = new Map<string, string>(tagsBySlug.value)?.get(tagSlug) ?? ''
+
+const { data: posts } = await useAsyncData(`tags-${tag}`, () =>
+  queryCollection('posts')
+    .where('tags', 'LIKE', `%${tag}%`)
+    .order('date', 'DESC')
+    .all()
+)
+
+const title = computed(() => `${tag.charAt(0).toUpperCase()}${tag.slice(1)}`)
+const description = computed(() => `List of articles about ${tag}`)
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+defineOgImageComponent('Saas')
+
+const activePost = useState<number | null>('activePost', () => null)
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader :title="title" :description="description" />
+
+    <UPageBody>
+      <UBlogPosts>
+        <UBlogPost
+          v-for="(post, index) in posts"
+          :key="index"
+          :to="post.path"
+          :title="post.title"
+          :description="post.description"
+          :image="post.image"
+          :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
+          :authors="post.authors"
+          :badge="post.badge"
+          :orientation="index === 0 ? 'horizontal' : 'vertical'"
+          :class="[index === 0 && 'col-span-full', activePost === index && 'active']"
+          variant="naked"
+          :ui="{
+            description: 'line-clamp-2'
+          }"
+          @click="activePost = index"
+        />
+      </UBlogPosts>
+    </UPageBody>
+  </UContainer>
+</template>
+
+<style scoped>
+.active {
+  view-transition-name: selected-post;
+  contain: layout;
+}
+</style>

app/pages/tags/index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const { data: posts } = await useAsyncData('tags', () =>
+  queryCollection('posts')
+    .select('tags')
+    .all()
+)
+
+if (!posts.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Tags not found', fatal: true })
+}
+
+const tagOccurrences = computed(() => {
+  // count each tag occurrence and sort them descending
+  const occurrences = posts.value
+    ?.flatMap(t => t.tags ?? [])
+    .reduce((acc, tag) => {
+      acc.set(tag, (acc.get(tag) || 0) + 1)
+      return acc
+    }, new Map<string, number>()) ?? new Map<string, number>()
+  return [...occurrences.entries()]
+    .sort(([_tagA, occurrenceA], [_tagB, occurrenceB]) => occurrenceB - occurrenceA)
+})
+
+const title = 'Tags'
+const description = 'All tags used in this blog'
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+defineOgImageComponent('Saas')
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <UPageHeader :title="title" :description="description" />
+      <UPageBody>
+        <div class="flex flex-wrap place-content-evenly gap-5 mt-4">
+          <UChip v-for="[tag, occurrence] in tagOccurrences" :key="tag" size="2xl" :text="occurrence">
+            <UButton color="neutral" variant="subtle" :to="getTagRoute(tag)">
+              {{ tag }}
+            </UButton>
+          </UChip>
+        </div>
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

app/utils/tag.ts

@@ -0,0 +1,5 @@
+import kebabCase from 'just-kebab-case'
+
+export const getTagSlug = (tag: string) => kebabCase(tag.toLowerCase().replace('/', ''))
+
+export const getTagRoute = (tag: string) => `/tags/${getTagSlug(tag)}`

package.json

@@ -11,6 +11,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@giscus/vue": "^3.1.1",
     "@iconify-json/lucide": "^1.2.75",
     "@iconify-json/simple-icons": "^1.2.60",
     "@nuxt/content": "^3.8.2",
@@ -22,8 +23,10 @@
     "@unhead/vue": "^2.0.19",
     "@vueuse/nuxt": "^13.9.0",
     "better-sqlite3": "^12.4.6",
+    "just-kebab-case": "^4.2.0",
     "nuxt": "^4.2.2",
     "nuxt-og-image": "^5.1.12",
+    "posthog-js": "^1.310.1",
     "zod": "^4.1.13"
   },
   "devDependencies": {