✨ Post tag & category filtered page

pages/posts/[id].vue

@@ -41,8 +41,18 @@
       </span>
     </div>
 
-    <div v-if="post.tags?.length > 0" class="text-xs text-grey flex flex-row gap-1 mb-3">
-      <span v-for="tag in post.tags">#{{ tag.alias }}</span>
+    <div
+      v-if="post.tags?.length > 0"
+      class="text-xs text-grey flex flex-row gap-1 mb-3"
+    >
+      <nuxt-link
+        v-for="tag in post.tags"
+        :to="`/posts/tags/${tag.alias}`"
+        class="hover:underline hover:underline-dotted"
+        @click.stop
+      >
+        #{{ tag.alias }}
+      </nuxt-link>
     </div>
 
     <div class="text-xs text-grey flex flex-col mb-5">

pages/posts/categories/[...slug].vue

@@ -0,0 +1,34 @@
+<template>
+  <v-container class="content-container mx-auto">
+    <div class="my-3 mx-[3.5ch]">
+      <h1 class="text-2xl">{{ t("navPosts") }}</h1>
+      <span>{{ t("navPostsCaptionWithCategory", [`#${route.params.slug}`]) }}</span>
+    </div>
+
+    <post-list :category="route.params.slug?.toString()" />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const route = useRoute()
+
+useHead({
+  title: t("navActivity"),
+})
+
+useSeoMeta({
+  title: t("navActivity"),
+  ogTitle: t("navActivity"),
+  description: t("navActivityCaption"),
+  ogDescription: t("navActivityCaption"),
+  ogType: "website",
+})
+</script>
+
+<style scoped>
+.content-container {
+  max-width: 70ch !important;
+}
+</style>

pages/posts/tags/[...slug].vue

@@ -0,0 +1,34 @@
+<template>
+  <v-container class="content-container mx-auto">
+    <div class="my-3 mx-[3.5ch]">
+      <h1 class="text-2xl">{{ t("navPosts") }}</h1>
+      <span>{{ t("navPostsCaptionWithTag", [`#${route.params.slug}`]) }}</span>
+    </div>
+
+    <post-list :tag="route.params.slug?.toString()" />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const route = useRoute()
+
+useHead({
+  title: t("navActivity"),
+})
+
+useSeoMeta({
+  title: t("navActivity"),
+  ogTitle: t("navActivity"),
+  description: t("navActivityCaption"),
+  ogDescription: t("navActivityCaption"),
+  ogType: "website",
+})
+</script>
+
+<style scoped>
+.content-container {
+  max-width: 70ch !important;
+}
+</style>