From 58ad9996cd1a04ec4cc0812fd945cd6e53cb7ea6 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 17 Aug 2024 00:51:09 +0800
Subject: [PATCH] :sparkles: Post tag & category filtered page

---
 components/PostItem.vue              | 19 +++++++++++++---
 components/PostList.vue              |  9 +++++++-
 lang/en-US.json                      |  2 ++
 lang/zh-CN.json                      |  2 ++
 pages/posts/[id].vue                 | 14 ++++++++++--
 pages/posts/categories/[...slug].vue | 34 ++++++++++++++++++++++++++++
 pages/posts/tags/[...slug].vue       | 34 ++++++++++++++++++++++++++++
 7 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 pages/posts/categories/[...slug].vue
 create mode 100644 pages/posts/tags/[...slug].vue

diff --git a/components/PostItem.vue b/components/PostItem.vue
index e9e5e59..8bae0a7 100644
--- a/components/PostItem.vue
+++ b/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>
diff --git a/components/PostList.vue b/components/PostList.vue
index cc7844f..5bde171 100644
--- a/components/PostList.vue
+++ b/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()
 
diff --git a/lang/en-US.json b/lang/en-US.json
index 76a9c99..7cd2e3b 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -8,6 +8,8 @@
   "navGalleryCaption": "Explore files that uploaded by Solar Network users.",
   "navPosts": "Posts",
   "navPostsCaption": "Explore posts that posted by Solar Network users.",
+  "navPostsCaptionWithTag": "Explore posts with tag {0}.",
+  "navPostsCaptionWithCategory": "Explore posts in category {0}.",
   "indexIntroduce": "An energetic software company that create wonderful software which everyone love.",
   "indexProductListHint": "See some of our products just there",
   "indexActivities": "Activities",
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 7cff632..204c3c3 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -8,6 +8,8 @@
   "navGalleryCaption": "探索整个 Solar Network 上的文件。",
   "navPosts": "帖子",
   "navPostsCaption": "探索整个 Solar Network 上的帖子。",
+  "navPostsCaptionWithTag": "探索带有 {0} 标签的帖子",
+  "navPostsCaptionWithCategory": "探索被分类为 {0} 的帖子",
   "indexIntroduce": "一家充满活力的软件公司，创造了人人喜爱的精彩软件。",
   "indexProductListHint": "在这里看看我们的一些产品",
   "indexActivities": "动态",
diff --git a/pages/posts/[id].vue b/pages/posts/[id].vue
index fd1a9a3..abc9fc3 100644
--- a/pages/posts/[id].vue
+++ b/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">
diff --git a/pages/posts/categories/[...slug].vue b/pages/posts/categories/[...slug].vue
new file mode 100644
index 0000000..684f450
--- /dev/null
+++ b/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>
diff --git a/pages/posts/tags/[...slug].vue b/pages/posts/tags/[...slug].vue
new file mode 100644
index 0000000..53ab6c0
--- /dev/null
+++ b/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>