feat: add posts filter

zyyv · Dec 31, 2024 · 065a212 · 065a212
1 parent 2bd94af
commit 065a212
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/app/pages/posts/index.vue b/app/pages/posts/index.vue
@@ -11,6 +11,41 @@ function calculateReadingTime(text: string): number {
   const words = text.split(/\s/g).length
   return Math.ceil(words / wordsPerMinute)
 }
+
+const route = useRoute()
+const tags = ref(new Set<string>(route.query.tags ? route.query.tags.split(',') : []))
+
+function toggleTag(tag: string) {
+  if (tags.value.has(tag)) {
+    tags.value.delete(tag)
+  }
+  else {
+    tags.value.add(tag)
+  }
+}
+
+const sortedPosts = computed(() => {
+  if (tags.value.size === 0) {
+    history.replaceState(null, '', '/posts')
+    return posts.value
+  }
+  else {
+    history.replaceState(null, '', `/posts?tags=${Array.from(tags.value).join(',')}`)
+
+    return [...posts.value].sort((a, b) => {
+      const aHasTag = a.tags.some(tag => tags.value.has(tag))
+      const bHasTag = b.tags.some(tag => tags.value.has(tag))
+
+      if (aHasTag && !bHasTag) {
+        return -1
+      }
+      if (!aHasTag && bHasTag) {
+        return 1
+      }
+      return 0
+    })
+  }
+})
 </script>
 
 <template>
@@ -19,7 +54,7 @@ function calculateReadingTime(text: string): number {
 
     <ul my-8 space-y-7>
       <li
-        v-for="post in posts"
+        v-for="post in sortedPosts"
         :key="post.id"
       >
         <nuxt-link :to="`${post.path}`">
@@ -38,8 +73,10 @@ function calculateReadingTime(text: string): number {
             <span
               v-for="tag in post.tags"
               :key="tag"
-              inline-block text-xs rd-full px-1.5 py-1px
+              inline-block text-xs rd-full px-1.5 py-1px cursor-pointer
               b="~ gray dashed"
+              :class="tags.has(tag) ? 'dark:b-gray-3 dark:bg-gray-3 bg-gray-3 b-gray-3 dark:text-gray-8 text-gray-5' : ''"
+              @click="toggleTag(tag)"
             >{{ tag }}</span>
           </div>
           <div>

diff --git a/content/posts/some-thoughts-about-tailwind-v4.md b/content/posts/some-thoughts-about-tailwind-v4.md
@@ -3,8 +3,8 @@ date: 2024-12-12T12:12:12.000Z
 description: 简单阐述对 Tailwind v4 升级的一些感悟，站在 UnoCSS 视角上观察 Tailwind v4 的变化。
 title: Tailwind v4 VS UnoCSS? 一些感悟
 tags:
-  - Pnpm
-  - Attw
+  - UnoCSS
+  - Tailwind
 lang: en
 ---