From 8a7431b885b7db4487ca1b5ad32be9e4794f4d88 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 3 Jan 2021 22:59:58 +0100
Subject: [PATCH] Get post from api & redirect to /edit from header.

---
 frontend/pages/PostPage.vue | 60 +++++++++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/pages/PostPage.vue b/frontend/pages/PostPage.vue
index b899dab..cc2f600 100644
--- a/frontend/pages/PostPage.vue
+++ b/frontend/pages/PostPage.vue
@@ -1,15 +1,21 @@
 <template>
-  <div>
+  <div v-if="post">
     <header>
-      <h2>{{ post.title }}</h2>
-      <p>{{ post.date }} by {{ post.author }}</p>
+      <div class="title">
+        <h2>{{ post.title }}</h2>
+        <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,27 +27,31 @@ export default {
   data() {
     return {
       markdown: undefined,
-      post: {
-        id: 1,
-        title: "Building (another) NAS.",
-        date: humanReadableDate(new Date()),
-        author: "Kevin",
-        thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
-        description: `<p>Building Another NAS.
+      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>
 
 <p>I have been reminded, daily, by my Macbook that my last backup was almost 1 year ago and on top of this the storage I use at home is nearing it’s capacity as well as being degraded. I’ve been overlooking these things for quite some time but I have finally decided to remedy the situation.</p>
 
 <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 {