website now works

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>