added markdown for article body

Signed-off-by: Silvan Strübi <[email protected]>
mits-gossau · Jul 20, 2020 · 03267c5 · 03267c5
1 parent d396e7d
commit 03267c5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
-    "favorited"
+    "favorited",
+    "markdownit"
   ],
   "editor.tabSize": 2,
   "editor.detectIndentation": false

diff --git a/src/es/components/molecules/Article.js b/src/es/components/molecules/Article.js
@@ -3,6 +3,7 @@
 /* global customElements */
 /* global CustomEvent */
 /* global HTMLElement */
+/* global self */
 
 /**
  * https://github.com/Weedshaker/event-driven-web-components-realworld-example-app/blob/master/FRONTEND_INSTRUCTIONS.md#article
@@ -48,8 +49,9 @@ export default class Article extends HTMLElement {
    * @return {void}
    */
   render (fetchSingleArticle) {
-    fetchSingleArticle.then(result => {
-      const article = result.article
+    Promise.all([fetchSingleArticle, this.loadDependency()]).then(result => {
+      const [singleArticle, markdownit] = result
+      const article = singleArticle.article
       if (!article || !article.author || !article.tagList) return (this.innerHTML = '<div class="article-page">An error occurred rendering the article-page!</div>')
       this.innerHTML = `
         <div class="article-page">
@@ -68,7 +70,7 @@ export default class Article extends HTMLElement {
         
             <div class="row article-content">
               <div class="col-md-12">
-                <div>TODO: markdown</div>
+                <div>${markdownit.render(article.body)}</div>
                 <ul class="tag-list">
                   ${article.tagList.reduce((tagListStr, tag) => (tagListStr += `
                     <li class="tag-default tag-pill tag-outline">${tag}</li>
@@ -188,4 +190,26 @@ export default class Article extends HTMLElement {
       return elements
     }))
   }
+
+  /**
+   * fetch dependency
+   *
+   * @returns {Promise<{render:(string)=>string}>}
+   */
+  loadDependency () {
+    return this.dependencyPromise || (this.dependencyPromise = new Promise(resolve => {
+      // needs markdown
+      if ('markdownit' in self === false) {
+        const script = document.createElement('script')
+        // https://github.com/markdown-it/markdown-it
+        script.src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js'
+        // @ts-ignore
+        script.onload = () => resolve(new self.markdownit()) // eslint-disable-line
+        document.head.appendChild(script)
+      } else {
+        // @ts-ignore
+        resolve(new self.markdownit()) // eslint-disable-line
+      }
+    }))
+  }
 }