website now works

packages/nuxt/pages/_tag.vue

@@ -6,10 +6,15 @@
 
 <script lang="ts">
 import { Vue, Component } from 'nuxt-property-decorator'
+import { api } from '~/assets/global'
 
 @Component<TagPage>({
+  watch: {
+    '$route.query.q': '$fetch',
+    '$route.query.page': '$fetch',
+  },
   async fetch() {
-    const { result, count } = await this.$axios.$get('/q', {
+    const { result, count, error } = await api('/api/q', {
       params: {
         q: this.$route.query.q,
         page: this.$route.query.page,
@@ -17,6 +22,11 @@ import { Vue, Component } from 'nuxt-property-decorator'
       },
     })
 
+    if (error) {
+      this.$nuxt.error(error)
+      return
+    }
+
     this.posts = result
     this.count = count
   },

packages/nuxt/pages/blog.vue

@@ -9,16 +9,26 @@
 
 <script lang="ts">
 import { Vue, Component } from 'nuxt-property-decorator'
+import { api } from '~/assets/global'
 
 @Component<BlogPage>({
+  watch: {
+    '$route.query.q': '$fetch',
+    '$route.query.page': '$fetch',
+  },
   async fetch() {
-    const { result, count } = await this.$axios.$get('/api/q', {
+    const { result, count, error } = await api('/api/q', {
       params: {
         q: this.$route.query.q,
         page: this.$route.query.page,
       },
     })
 
+    if (error) {
+      this.$nuxt.error(error)
+      return
+    }
+
     this.posts = result
     this.count = count
   },

packages/nuxt/pages/post/_.vue

@@ -0,0 +1,83 @@
+<template>
+  <p v-if="$fetchState.pending"></p>
+  <p v-else-if="$fetchState.error">
+    An error occurred {{ $fetchState.error.message }}
+  </p>
+  <section v-else>
+    <section>
+      <h2>
+        {{ post.title }}
+      </h2>
+      <small>
+        <span>
+          by
+          <a
+            v-if="theme.author.url"
+            :href="theme.author.url"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ theme.author.name }}
+          </a>
+          <span v-else>
+            {{ theme.author.name }}
+          </span>
+        </span>
+        <span v-if="post.date" style="float: right">
+          {{ post.date | formatDate }}
+        </span>
+      </small>
+    </section>
+
+    <section v-html="post.content"></section>
+
+    <section class="tags-container">
+      <span>Tags:</span>
+      <span v-for="t in post.tag || []" :key="t">
+        <nuxt-link :to="`/tag/${t}`">
+          {{ t }}
+        </nuxt-link>
+      </span>
+    </section>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import { api, THEME } from '~/assets/global'
+
+@Component<PostPage>({
+  async fetch() {
+    const r = await api('/api', {
+      params: {
+        path: this.$route.params.pathMatch,
+      },
+    })
+
+    if (r.error) {
+      this.$nuxt.error(r.error)
+      return
+    }
+
+    this.post = r
+  },
+})
+export default class PostPage extends Vue {
+  post: {
+    date?: string
+    title: string
+    image?: string
+    tag?: string[]
+    category?: string
+    content: string
+  } | null = null
+
+  theme = THEME
+}
+</script>
+
+<style scoped>
+.tags-container > span + span {
+  margin-left: 0.6em;
+}
+</style>