Installed marked to get markdown functionality + adjustments

benjaminvo · Feb 3, 2017 · 6797921 · 6797921
1 parent 382963b
commit 6797921
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "firebase": "^3.6.3",
     "firebaseui": "^1.0.0",
+    "marked": "^0.3.6",
     "moment": "^2.17.1",
     "particles.js": "^2.0.0",
     "vue": "^2.1.0",

diff --git a/src/routes/article.vue b/src/routes/article.vue
@@ -64,14 +64,14 @@
             <div class="article_introduction_upper">
 
               <h2 class="margin-bottom-3-1">Reading guide</h2>
-              <ul class="margin-bottom-6-1 list-unstyled guide">
-                <li v-for="(item, key, index) in article.guide" class="margin-bottom">
-                  <h4 class="margin-bottom-2-1" v-if="key === 'keepEyeOn'">Hold øje med</h4>
-                  <p class="guide_text margin-bottom-6-1">{{ item }}</p>
-                </li>
-              </ul>
+              <div class="margin-bottom-6-1 guide">
+                <div v-for="(item, key, index) in article.guide" class="margin-bottom-6-1">
+                  <h3 class="margin-bottom-3-1" v-if="key === 'keepEyeOn'">Hold øje med</h3>
+                  <div v-html="markdown(item)" />
+                </div>
+              </div>
 
-              <h4 class="margin-bottom-2-1">Concepts</h4>
+              <h3 class="margin-bottom-2-1">Concepts</h3>
               <ul class="list-unstyled">
                 <li v-for="(item, index) in articleConcepts" class="concept">
                   <a :href="item.wikiLink" target="_blank" class="h6 margin-bottom-1-2">{{ item.name }}</a>
@@ -136,6 +136,7 @@
   import ArticleFinished from 'components/ArticleFinished'
   import { toggleArticleFinished } from 'utils/toggleArticleFinished'
   import { fetchDataRelatedToData } from 'utils/fetchDataRelatedToData'
+  import marked from 'marked'
   export default {
     name: 'ArticleRoute',
     components: {
@@ -211,7 +212,8 @@
         this.articleCourses = this.fetchDataRelatedToData('courses', this.article.courses)
         this.articleConcepts = this.fetchDataRelatedToData('concepts', this.article.concepts)
         this.dataLoaded = true
-      }
+      },
+      markdown(text) { return marked(text) }
     }
   }
 </script>
@@ -242,7 +244,7 @@
       }
 
       &_upper {
-        padding: $scale-7-1 $scale-8-1 $scale-4-1 !important;
+        padding: $scale-6-1 $scale-8-1 $scale-4-1 !important;
 
         @include breakpoint('desktop') {
           padding: $scale-4-1 $scale-4-1 $scale-2-1 !important;
@@ -252,6 +254,9 @@
           font-size: 16px !important;
           line-height: 1.6;
           max-width: 55ch; // 1ch = width of glyph '0', so this is approx. the wished for 65 chars per line
+          margin-bottom: $scale-2-1;
+
+          &:last-child { margin-bottom: 0; }
 
           @include breakpoint('desktop') {
             font-size: 14px !important;