plan for ssg

packages/nuxt/components/PostQuery.vue

@@ -51,13 +51,18 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator'
+import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
 
 @Component
 export default class PostQuery extends Vue {
   @Prop({ required: true }) posts!: IPostTeaser[]
   @Prop({ required: true }) count!: number
 
+  readonly defaults = {
+    posts: this.posts,
+    count: this.count,
+  }
+
   get page() {
     return parseInt((this.$route.query.page as string) || '1')
   }
@@ -66,14 +71,45 @@ export default class PostQuery extends Vue {
     return Math.ceil(this.count / 5)
   }
 
-  makePageUrl(page: number) {
+  makePageUrl(p: number) {
+    let path = this.$route.path
+    if (!(path.startsWith('/tag') || path.startsWith('/blog'))) {
+      path = '/blog'
+    }
+
+    path = path.replace(/\d+$/, '').replace(/\/$/, '')
+    if (p > 1) {
+      path = path + '/' + p
+    }
+
     return this.$router.resolve({
-      path: this.$route.path,
-      query: {
-        ...this.$route.query,
-        page: page.toString(),
-      },
+      path,
+      query: this.$route.query,
     }).href
   }
+
+  @Watch('$route.params.page')
+  @Watch('$route.params.tag')
+  async updatePosts() {
+    if (this.$route.query.q) {
+      const ps = await this.$axios.$post(
+        '/.netlify/functions/search',
+        undefined,
+        {
+          params: {
+            q: this.$route.query.q,
+            page: this.$route.params.page,
+            tag: this.$route.params.tag,
+          },
+        }
+      )
+
+      this.count = ps.count
+      this.$set(this, 'posts', ps.result)
+    } else {
+      this.count = this.defaults.count
+      this.$set(this, 'posts', this.defaults.posts)
+    }
+  }
 }
 </script>