fix: move filters to store

src/.vuepress/theme/components/blog/ActiveTags.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     v-if="
-      activeTags.length || searchedText.length || activeCategory !== 'all types'
+      activeTags.length ||
+      searchedText.length ||
+      resolvedActiveCategory !== 'all types'
     "
     class="border border-opacity-10 flex items-center rounded px-1 py-2"
   >
@@ -10,7 +12,7 @@
       <strong
         >{{ numberOfPosts }} result{{ numberOfPosts > 1 ? 's' : '' }}</strong
       >
-      (newest first) of {{ activeCategory }}
+      (newest first) of {{ resolvedActiveCategory }}
       <span v-if="searchedText.length">
         for
         <span v-for="text in searchedText" :key="text" class=""
@@ -35,6 +37,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'ActiveTags',
   props: {
@@ -44,29 +48,16 @@ export default {
     },
   },
   computed: {
-    activeCategory() {
-      const queryCategory = this.$route.query.category
-
-      return queryCategory ? `type "${queryCategory}"` : 'all types'
-    },
-    activeTags() {
-      const queryTags = this.$route.query.tags
-      return queryTags ? queryTags.split(',') : []
-    },
-    searchedText() {
-      const queryText = this.$route.query.search
-      return queryText ? queryText.split(',') : []
+    ...mapState('appState', ['activeCategory', 'activeTags', 'searchedText']),
+    resolvedActiveCategory() {
+      return this.activeCategory ? `type "${this.activeCategory}"` : 'all types'
     },
   },
   methods: {
     tagClick(tagToRemove) {
-      const currentPath = this.$router.history.current.path
-      const newQuery = {
-        ...this.$route.query,
-        tags: this.activeTags.filter((tag) => tag !== tagToRemove).join(','),
-      }
+      const newTags = this.activeTags.filter((tag) => tag !== tagToRemove)
 
-      this.$router.replace({ path: currentPath, query: newQuery })
+      this.$store.commit('appState/setActiveTags', newTags)
     },
   },
 }

src/.vuepress/theme/components/blog/PostHero.vue

@@ -28,7 +28,7 @@
     </div>
     <div class="grid-margins pt-8 flex justify-between items-center">
       <ul v-if="resolvedTags.length" class="tags flex mt-1" itemprop="keywords">
-        <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" />
+        <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" link />
       </ul>
       <div class="flex">
         Share this item:

src/.vuepress/theme/components/blog/PostTag.vue

@@ -1,8 +1,13 @@
 <template>
-  <li class="post-tag p-1 mr-1 bg-white text-blueGreen hover:underline rounded">
-    <router-link :to="{ path: '/', query: { tags: tag } }">
+  <li
+    class="post-tag p-1 mr-1 bg-white text-blueGreen hover:underline rounded cursor-pointer"
+  >
+    <router-link v-if="link" :to="{ path: '/', query: { tags: tag } }">
       {{ tag }}
     </router-link>
+    <div v-else @click="handleTagClick">
+      {{ tag }}
+    </div>
   </li>
 </template>
 
@@ -10,10 +15,19 @@
 export default {
   name: 'PostTag',
   props: {
+    link: {
+      type: Boolean,
+      default: () => false,
+    },
     tag: {
       type: String,
       required: true,
     },
   },
+  methods: {
+    handleTagClick() {
+      this.$store.commit('appState/setActiveTags', [this.tag])
+    },
+  },
 }
 </script>

src/.vuepress/theme/components/blog/SearchCategoriesAndTags.vue

@@ -64,21 +64,14 @@ export default {
   methods: {
     handleSearch() {
       const tagArray = this.selectedTags.map((tag) => tag.value)
-      const currentPath = this.$router.history.current.path
-      const tags = tagArray.filter((tag) => this.tags.includes(tag)).join(',')
-      const texts = tagArray.filter((tag) => !this.tags.includes(tag)).join(',')
+      const tags = tagArray.filter((tag) => this.tags.includes(tag))
+      const texts = tagArray.filter((tag) => !this.tags.includes(tag))
+      const category =
+        this.selectedCat === this.categories[0] ? undefined : this.selectedCat
 
-      const newQuery = {
-        ...this.$route.query,
-        tags,
-        search: texts,
-        category:
-          this.selectedCat === this.categories[0]
-            ? undefined
-            : this.selectedCat,
-      }
-
-      this.$router.replace({ path: currentPath, query: newQuery })
+      this.$store.commit('appState/setActiveTags', tags)
+      this.$store.commit('appState/setActiveCategory', category)
+      this.$store.commit('appState/setSearchedText', texts)
     },
     handleAddTag(text) {
       this.selectedTags.push({

src/.vuepress/theme/layouts/Blog.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 import Layout from '@theme/layouts/Layout.vue'
 
 import Card from '@theme/components/blog/Card'
@@ -75,7 +77,6 @@ export default {
       numberOfPagesToShow: 21,
       infiniteScroll: false,
       delayValues: [0, 0.15, 0.3],
-      tags: [],
       breadcrumbs: [
         { title: 'Home', link: 'https://ipfs.io/', external: true },
         { title: 'Blog & News' },
@@ -83,16 +84,9 @@ export default {
     }
   },
   computed: {
-    activeCategory() {
-      return this.$route.query.category
-    },
-    activeTags() {
-      const queryTags = this.$route.query.tags
-      return queryTags ? queryTags.split(',') : []
-    },
-    searchedText() {
-      const queryText = this.$route.query.search
-      return queryText ? queryText.split(',') : []
+    ...mapState('appState', ['activeCategory', 'activeTags', 'searchedText']),
+    tags() {
+      return getTags(this.publicPages)
     },
     publicPages: function () {
       let result = []
@@ -143,7 +137,19 @@ export default {
     },
   },
   mounted() {
-    this.tags = getTags(this.publicPages)
+    const queryTags = this.$route.query.tags
+    const queryCategory = this.$route.query.category
+    const queryText = this.$route.query.search
+
+    if (queryTags && !this.activeTags.length) {
+      this.$store.commit('appState/setActiveTags', queryTags.split(','))
+    }
+    if (queryCategory && !this.activeTags.length) {
+      this.$store.commit('appState/setActiveCategory', queryCategory)
+    }
+    if (queryText && !this.activeTags.length) {
+      this.$store.commit('appState/setSearchedText', queryText.split(','))
+    }
   },
   methods: {
     showMorePages() {

src/.vuepress/theme/store/appState.js

@@ -6,6 +6,9 @@ const appState = {
     mobileNavActive: false,
     routerLocation: {},
     navHeight: 0,
+    activeTags: [],
+    searchedText: [],
+    activeCategory: null,
   },
   mutations: {
     toggleMobileNav: (state, data) => {
@@ -17,6 +20,15 @@ const appState = {
     setRouterLocation: (state, data) => {
       Vue.set(state, 'routerLocation', data)
     },
+    setActiveTags: (state, data) => {
+      Vue.set(state, 'activeTags', data)
+    },
+    setSearchedText: (state, data) => {
+      Vue.set(state, 'searchedText', data)
+    },
+    setActiveCategory: (state, data) => {
+      Vue.set(state, 'activeCategory', data)
+    },
   },
 }