From b1fa9b329e6e48a4a1b5968ad36dd030c8e5b791 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Wed, 6 May 2020 22:20:45 +0100
Subject: [PATCH] Use the MarkdownContent component to render markdown fields

The Story description and Comment content fields are actually markdown.
This commit switches to using the new MarkdownContent component to
render them, rather than just directly interpolating them.
---
 src/components/EventComment.vue | 8 +++++---
 src/views/StoryDetail.vue       | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/EventComment.vue b/src/components/EventComment.vue
index 68f3722..47cd474 100644
--- a/src/components/EventComment.vue
+++ b/src/components/EventComment.vue
@@ -5,17 +5,19 @@
       commented on {{ createdDate.toDateString() }}
       at {{ createdDate.toLocaleTimeString() }}
     </p>
-    <div class="event-body">
-      {{ event.comment.content }}
-    </div>
+    <MarkdownContent class-name="event-body" :content="event.comment.content" />
   </div>
 </template>
 
 <script>
+import MarkdownContent from '@/components/MarkdownContent.vue'
 import axios from 'axios'
 
 export default {
   name: 'EventComment',
+  components: {
+    MarkdownContent
+  },
   data () {
     return {
       author: {}
diff --git a/src/views/StoryDetail.vue b/src/views/StoryDetail.vue
index 09a2314..d6b1da0 100644
--- a/src/views/StoryDetail.vue
+++ b/src/views/StoryDetail.vue
@@ -13,9 +13,7 @@
         </p>
       </div>
     </div>
-    <div class="description">
-      {{ story.description }}
-    </div>
+    <MarkdownContent class-name="description" :content="story.description" />
     <div class="cards">
       <div class="card column-lg">
         <h2>Tasks</h2>
@@ -49,6 +47,7 @@
 </template>
 
 <script>
+import MarkdownContent from '@/components/MarkdownContent.vue'
 import TaskListEntry from '@/components/TaskListEntry.vue'
 import TimelineEvent from '@/components/TimelineEvent.vue'
 import axios from 'axios'
@@ -56,6 +55,7 @@ import axios from 'axios'
 export default {
   name: 'StoryDetailView',
   components: {
+    MarkdownContent,
     TaskListEntry,
     TimelineEvent
   },