Consistent markdown-panel across entries, comments and contests (#116)

* Rename post component to markdown panel

* Uninstall vue-markdown

* Fix issue where p tags would overrun parent

Resolves #114

* Clean up adjusted post

- Remove legacy code for removing footer
- Remove uneeded variable defintion

* Remove vue-markdown reference, replace with common markdown panel

* Adjust reference in entered contest to use markdown-panel component

client/package.json

@@ -23,7 +23,6 @@
     "vue-analytics": "^5.16.0",
     "vue-element-loading": "^1.0.4",
     "vue-lodash": "^2.0.0",
-    "vue-markdown": "^2.2.4",
     "vue-material-icon": "^1.0.1",
     "vue-moment": "^4.0.0",
     "vue-router": "^3.0.1",

client/src/components/contest-comment/contest-comment.vue

@@ -3,21 +3,22 @@
     <img class="comment-image" :src="commentProfileImage" alt="">
     <div class="comment-details">
       <span class="comment-author">{{ comment.author }}</span>
-      <VueMarkdown class="comment-body" :source="comment.body"></VueMarkdown>
+      <markdownpanel class="comment-body" :postbody="comment.body" />
       <postoptions :type="'comment'" :post="comment" />
     </div>
   </div>
 </template>
 
 <script>
-import VueMarkdown from 'vue-markdown'
+
 import postoptions from '@/components/post-options/post-options.vue'
+import markdownpanel from '@/components/markdown-panel/markdown-panel.vue'
 
 export default {
   name: 'comment',
   components: {
-    VueMarkdown,
-    postoptions
+    postoptions,
+    markdownpanel
   },
   props: {
     comment: Object

client/src/components/post/post.vue → client/src/components/markdown-panel/markdown-panel.vue

@@ -1,7 +1,5 @@
 <template>
-    <div>
-      <div> <div v-html="adjustedPost"></div> </div>
-    </div>
+      <div v-html="adjustedPost"/>
 </template>
 
 <script>
@@ -15,11 +13,7 @@ export default {
   },
   computed: {
     adjustedPost: function () {
-      let body = this.postbody
-
-      // Remove contest hero contest footer link from post when viewing on contest hero
-
-      body = body.replace(/<p class="ch-footer">.*<\/p>/gm, '')
+      // Markdown parser settings
 
       marked.setOptions({
         renderer: new marked.Renderer(),
@@ -31,7 +25,7 @@ export default {
         smartLists: true,
         smartypants: true
       })
-      return marked(body)
+      return marked(this.postbody)
     }
   }
 }

client/src/pages/shared/shared.css

@@ -6,6 +6,10 @@ body {
     display: flex;
     flex-direction: column;
   }
+
+  p {
+    word-break: break-all;
+  }
 
   h1.header {
     font-weight: bold;

client/src/pages/view-contest/view-contest.vue

@@ -23,7 +23,7 @@
           </el-dropdown>
         </div>
         <div class="post-container">
-          <post :postbody="post.data.body"></post>
+          <markdownpanel :postbody="post.data.body" />
           <div class="post-bar">
             <div class="tags">
               <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
@@ -61,7 +61,7 @@
 
 <script>
 import aboutauthor from '@/components/about-author/about-author.vue'
-import post from '@/components/post/post.vue'
+import markdownpanel from '@/components/markdown-panel/markdown-panel.vue'
 import winners from '@/components/winners-panel/winners-panel.vue'
 import prize from '@/components/prize/prize.vue'
 import dsteem from '@/mixins/dsteem.js'
@@ -80,7 +80,7 @@ export default {
   components: {
     aboutauthor,
     Countdown,
-    post,
+    markdownpanel,
     winners,
     postoptions,
     entry,

client/src/pages/view-entry/view-entry.vue

@@ -5,7 +5,7 @@
             <!-- Post Container -->
             <h1 class="header" v-if="entry_method === 'post'"><img class="small-circle" src="@/assets/gradient-circle.png" alt="">{{ post.data.title }}</h1>
             <div class="post-container">
-                <post :postbody="post.data.body"></post>
+                <markdownpanel :postbody="post.data.body" />
                 <div class="post-bar">
                     <div class="tags">
                         <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
@@ -20,8 +20,9 @@
 </template>
 
 <script>
+
+import markdownpanel from '@/components/markdown-panel/markdown-panel.vue'
 import dsteem from '@/mixins/dsteem.js'
-import post from '@/components/post/post.vue'
 import entriesService from '@/services/entries.js'
 import commentpanel from '@/components/comment-panel/comment-panel.vue'
 import postoptions from '@/components/post-options/post-options.vue'
@@ -30,9 +31,9 @@ export default {
   name: 'view-entry',
   mixins: [dsteem],
   components: {
-    post,
     commentpanel,
-    postoptions
+    postoptions,
+    markdownpanel
   },
   data () {
     return {