Get post from api & redirect to /edit from header.

frontend/pages/PostPage.vue

@@ -1,15 +1,21 @@
 <template>
-  <div>
+  <div v-if="post">
     <header>
+      <div class="title">
         <h2>{{ post.title }}</h2>
-      <p>{{ post.date }} by {{ post.author }}</p>
+        <router-link :to="'/edit/' + id" class="icon">✏️ </router-link>
+      </div>
+
+      <p>created {{ humanReadableDate(post.created) }},</p>
+      <p>by {{ author }}</p>
     </header>
 
     <article class="markdown-body">
-      <p v-html="markdown" v-if="markdown"></p>
+      <p v-html="description"></p>
 
-      <img :src="post.thumbnail" />
-      <p v-html="post.description"></p>
+      <img :src="thumbnail" />
+      <p v-html="markdown" v-if="markdown"></p>
+      <img :src="thumbnail" />
     </article>
   </div>
 </template>
@@ -21,11 +27,9 @@ export default {
   data() {
     return {
       markdown: undefined,
-      post: {
-        id: 1,
-        title: "Building (another) NAS.",
-        date: humanReadableDate(new Date()),
-        author: "Kevin",
+      id: this.$route.params.id,
+      post: undefined,
+      author: 'Kevin',
       thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
       description: `<p>Building Another NAS.
 A lot has changed in my life over the last 6 months or so, moving out of my flat and quitting my job to travel the world only to have 2020 suck all meaning out of every fibre of my being making me yearn for the eventuality of Earth being obliterated into inexistence, but until that time my storage as of late left much to be desired.</p>
@@ -34,14 +38,20 @@ A lot has changed in my life over the last 6 months or so, moving out of my flat
 
 <p>Join me on my newest endeavour to build a new NAS, or don’t of course.</p>` 
     }
-    }
   },
   created() {
+    this.fetchPost();
     this.fetchMarkdown();
   },
   methods: {
+    humanReadableDate(date) { return humanReadableDate(date) },
+    fetchPost() {
+      fetch(`/api/post/${this.id}`)
+        .then(resp => resp.json())
+        .then(response => this.post = response.post)
+    },
     fetchMarkdown() {
-      fetch(`/api/post/${this.post.id}/render`)
+      fetch(`/api/post/${this.id}/render`)
         .then(resp => resp.json())
         .then(response => this.markdown = response.markdown)
     }
@@ -60,6 +70,26 @@ header {
     margin-top: 4rem;
     margin-bottom: 0;
     font-weight: normal;
+    display: inline-block;
+  }
+
+  .title {
+    position: relative;
+    display: inline-block;
+  }
+
+  .icon {
+    position: absolute;
+    bottom: 0;
+    right: -3rem;
+    opacity: 0;
+    font-size: 2.5rem;
+  }
+
+  .title:hover {
+    .icon {
+      opacity: 1;
+    }
   }
 
   p {