From dceee3b4e7117b9cdb04a2a24d09e74f7ae9c9d9 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian27@gmail.com>
Date: Wed, 23 Mar 2022 18:19:31 +0700
Subject: [PATCH] fix review, add raw-loader and use vue-markdown-render
 instead

---
 components/ContentMarkdown.vue | 33 +++++++++++++++++++++++++++++----
 nuxt.config.js                 | 23 +----------------------
 package.json                   |  2 +-
 yarn.lock                      | 21 ++++++++++-----------
 4 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/components/ContentMarkdown.vue b/components/ContentMarkdown.vue
index 136c0c954e..a33766114c 100644
--- a/components/ContentMarkdown.vue
+++ b/components/ContentMarkdown.vue
@@ -1,23 +1,48 @@
 <template>
   <section class="content">
-    <Contributing v-if="type === 'contribute'" />
-    <FirstTime v-else />
+    <VueMarkdown :source="text()" :options="options" />
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'nuxt-property-decorator'
+import hljs from 'highlight.js'
 import Contributing from '../CONTRIBUTING.md'
 import FirstTime from '../FIRST_TIME.md'
 
+const highlight = function (str, lang) {
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(str, { language: lang }).value
+    } catch (__) {
+      return ''
+    }
+  }
+  return ''
+}
+
 @Component({
   components: {
-    Contributing,
-    FirstTime,
+    VueMarkdown: () => import('vue-markdown-render'),
+  },
+  data() {
+    return {
+      options: {
+        highlight,
+      },
+    }
   },
 })
 export default class Contribute extends Vue {
   @Prop(String) public type!: 'contribute' | 'first_time'
+
+  text() {
+    if (this.type === 'contribute') {
+      return Contributing
+    }
+
+    return FirstTime
+  }
 }
 </script>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 9b5f193b19..48b7257a03 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,3 @@
-import hljs from 'highlight.js'
 import defineApolloConfig, {
   toApolloEndpoint,
 } from './utils/config/defineApolloConfig'
@@ -269,27 +268,7 @@ export default {
       // add markdown loader
       config.module.rules.push({
         test: /\.md$/,
-        loaders: [
-          'vue-loader',
-          {
-            loader: 'vue-md-loader',
-            options: {
-              markdown: {
-                highlight: function (str, lang) {
-                  if (lang && hljs.getLanguage(lang)) {
-                    try {
-                      return hljs.highlight(str, { language: lang }).value
-                    } catch (__) {
-                      return ''
-                    }
-                  }
-
-                  return ''
-                },
-              },
-            },
-          },
-        ],
+        use: 'raw-loader',
       })
 
       config.module.rules.push({
diff --git a/package.json b/package.json
index ba002bb542..4c59ab7a8d 100644
--- a/package.json
+++ b/package.json
@@ -134,11 +134,11 @@
     "lint-staged": "^12.3.7",
     "netlify-lambda": "^2.0.15",
     "prettier": "2.6.0",
+    "raw-loader": "^4.0.2",
     "sass": "^1.49.9",
     "sass-loader": "^10.2",
     "typescript": "^4.6.2",
     "vue-debounce-decorator": "^1.0.1",
-    "vue-md-loader": "1.1.10",
     "vue-template-compiler": "^2.6.14"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 2fd8735f74..04f918d909 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9483,7 +9483,7 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^11.0.0, highlight.js@^11.5.0:
+highlight.js@^11.5.0:
   version "11.5.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.0.tgz#00abb7ed926491adbdabc93a4f3fd2b88b451b4a"
   integrity sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==
@@ -11601,7 +11601,7 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-it@^12.0.0, markdown-it@^12.2.0:
+markdown-it@^12.2.0:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
   integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
@@ -13955,6 +13955,14 @@ raw-body@2.4.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc9@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/rc9/-/rc9-1.2.0.tgz#ef098181fdde714efc4c426383d6e46c14b1254a"
@@ -16546,15 +16554,6 @@ vue-markdown-render@^1.1.3:
     markdown-it "^12.2.0"
     vue "^2.6.14"
 
-vue-md-loader@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/vue-md-loader/-/vue-md-loader-1.1.10.tgz#ab9a4990568d5f346c4d4b9cd8c020f0992de82e"
-  integrity sha512-oID1rdyL7pvC7utPUXGkz2wjnjjrsUnyAHjoYb3qcM6VumvjkJGZG88/CcJOLpguXev5Ofhz3gph0u1v6Kp2tA==
-  dependencies:
-    highlight.js "^11.0.0"
-    loader-utils "^2.0.0"
-    markdown-it "^12.0.0"
-
 vue-meta@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"