Edit page for posts w/ update to api.

frontend/pages/EditPage.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <h1>Admin page</h1>
+
+    <h2 contenteditable @input="updateTitle">{{ localTitle }}</h2> 
+    <div class="container">
+      <textarea v-model="localMarkdown"></textarea>
+
+      <div class="markdown-body" v-html="html"></div>
+    </div>
+
+    <button @click="updatePost">Update post</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: this.$route.params.id || 2,
+      localMarkdown: undefined,
+      html: undefined,
+      post: undefined
+    }
+  },
+  created() {
+    this.fetchPost();
+    this.getPostHTML();
+  },
+  watch: {
+    localMarkdown(newValue, oldValue) {
+      return
+      if (newValue) {
+        this.getPostHTML()
+          .then(html => this.html = html)
+      }
+    }
+  },
+  methods: {
+    updateTitle(event) {
+      this.localTitle = event.target.innerText;
+      console.log(this.localTitle)
+    },
+    fetchPost() {
+      const url = `/api/post/${this.id}`
+
+      return fetch(url)
+        .then(resp => resp.json())
+        .then(response => {
+          this.post = response.post;
+          this.localTitle = response.post.title;
+          this.localMarkdown = response.post.markdown;
+        })
+    },
+    updatePost() {
+      const url = `/api/post/${this.id}`;
+      const options = {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: this.localTitle,
+          markdown: this.localMarkdown
+        })
+      };
+
+      return fetch(url, options)
+        .then(resp => resp.json())
+        .then(console.log)
+        .then(_ => this.getPostHTML())
+    },
+    getPostHTML() {
+      const url = `/api/post/${this.id}/render`;
+
+      return fetch(url)
+        .then(resp => resp.json())
+        .then(response => this.html = response.markdown)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+  font-size: 3rem;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+.container {
+  width: 90vw;
+  margin: 0 auto;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+textarea, .markdown-body {
+  width: 48%;
+  min-height: 70vh;
+}
+</style>

frontend/routes.js

@@ -1,5 +1,6 @@
 import LandingPage from '@/pages/LandingPage';
 import PostPage from '@/pages/PostPage';
+import EditPage from '@/pages/EditPage';
 
 const routes = [
   {
@@ -9,6 +10,10 @@ const routes = [
   {
     path: "/post/:id",
     component: PostPage
+  },
+  {
+    path: "/edit/:id",
+    component: EditPage
   }
 ]
 

frontend/utils.js

@@ -1,5 +1,6 @@
 
 const humanReadableDate = (date) => {
+  date = new Date(date)
   const day = date.getDate();
   const month = date.toLocaleString('default', { month: 'long' });
   const year = date.getFullYear();