✨ Post tag & category filtered page

components/PostItem.vue

@@ -27,7 +27,10 @@
       </article>
 
       <v-card v-if="post.body?.attachments?.length > 0" class="mb-5">
-        <attachment-carousel :no-clickable-attachment="props.noClickableAttachment" :attachments="post.body?.attachments" />
+        <attachment-carousel
+          :no-clickable-attachment="props.noClickableAttachment"
+          :attachments="post.body?.attachments"
+        />
       </v-card>
 
       <div class="text-sm flex flex-col">
@@ -45,8 +48,18 @@
       </span>
       </div>
 
-      <div v-if="post.tags?.length > 0" class="text-xs text-grey flex flex-row gap-1 mt-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 mt-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>
     </v-card-text>
   </v-card>

components/PostList.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ author?: string, realmId?: number }>()
+const props = defineProps<{ author?: string, tag?: string, category?: string, realmId?: number }>()
 
 const config = useRuntimeConfig()
 
@@ -26,6 +26,13 @@ async function loadPost({ done }: any) {
     searchQueries.set("realmId", props.realmId.toString())
   }
 
+  if (props.tag) {
+    searchQueries.set("tag", props.tag)
+  }
+  if (props.category) {
+    searchQueries.set("category", props.category)
+  }
+
   const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts?` + searchQueries)
   const result = await res.json()