From 31c1ec1820ac9d37d0156288b0d68d5d690eb0b5 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 3 Jan 2021 18:18:31 +0100
Subject: [PATCH] When loading fetch rendered markdown from api.

---
 frontend/pages/PostPage.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/PostPage.vue b/frontend/pages/PostPage.vue
index 49d54d3..bc24208 100644
--- a/frontend/pages/PostPage.vue
+++ b/frontend/pages/PostPage.vue
@@ -5,7 +5,8 @@
       <p>{{ post.date }} by {{ post.author }}</p>
     </header>
 
-    <article>
+    <article class="markdown-body">
+      <p v-html="markdown" v-if="markdown"></p>
 
       <img :src="post.thumbnail" />
       <p v-html="post.description"></p>
@@ -19,7 +20,9 @@ import { humanReadableDate } from "@/utils";
 export default {
   data() {
     return {
+      markdown: undefined,
       post: {
+        id: 1,
         title: "Building (another) NAS.",
         date: humanReadableDate(new Date()),
         author: "Kevin",
@@ -32,6 +35,16 @@ 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.fetchMarkdown();
+  },
+  methods: {
+    fetchMarkdown() {
+      fetch(`/api/post/${this.post.id}/render`)
+        .then(resp => resp.json())
+        .then(response => this.markdown = response.markdown)
+    }
   }
 }
 </script>