From 6d7b9bb1a41fa384c5f50211bd10c2c3030aee26 Mon Sep 17 00:00:00 2001
From: Kristian Polso <kristian.polso@gmail.com>
Date: Fri, 1 Jun 2018 10:52:47 +0300
Subject: [PATCH] Remove vue-highlightjs, lightweight highlight.js

---
 content/.vuepress/components/Hook.vue  |  3 ---
 content/.vuepress/components/Step1.vue | 15 +++++++++++++--
 content/.vuepress/components/Step3.vue | 17 ++++++++++++++---
 package.json                           |  1 -
 yarn.lock                              |  8 +-------
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/content/.vuepress/components/Hook.vue b/content/.vuepress/components/Hook.vue
index ef8ee45..669de9d 100644
--- a/content/.vuepress/components/Hook.vue
+++ b/content/.vuepress/components/Hook.vue
@@ -41,12 +41,9 @@
 <script>
 
 import Vue from 'vue'
-import VueHighlightJS from 'vue-highlightjs'
 
 import EventBus from '../event-bus';
 
-Vue.use(VueHighlightJS)
-
 export default {
   data () {
     return {
diff --git a/content/.vuepress/components/Step1.vue b/content/.vuepress/components/Step1.vue
index 1593cfc..a1fe4fe 100644
--- a/content/.vuepress/components/Step1.vue
+++ b/content/.vuepress/components/Step1.vue
@@ -14,7 +14,7 @@
     </header>
 
     <div class="xs12" v-if="exampleCode != ''">
-      <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
+      <pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
     </div>
 
     <div class="xs12" v-if="isLoading">
@@ -23,7 +23,7 @@
 
     <div class="xs12" v-if="jsonData">
       <p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
-      <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
+      <pre class="json-example"><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
       <a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
     </div>
 
@@ -76,6 +76,7 @@
 
 <script>
 import EventBus from '../event-bus';
+import hljs from 'highlight.js';
 
 export default {
   data () {
@@ -86,6 +87,13 @@ export default {
       exampleCode: ''
     }
   },
+  mounted () {
+
+    hljs.configure({
+      languages: ['bash', 'json']
+    });
+
+  },
   methods: {
     fetchMetadata () {
       var component = this;
@@ -104,6 +112,9 @@ export default {
     },
     goTo (page) {
       EventBus.$emit('HookStepUpdate', page);
+    },
+    highlight (language, text) {
+      return hljs.highlight(language, text).value;
     }
   },
   name: 'Step1'
diff --git a/content/.vuepress/components/Step3.vue b/content/.vuepress/components/Step3.vue
index 22ee7b5..75234e7 100644
--- a/content/.vuepress/components/Step3.vue
+++ b/content/.vuepress/components/Step3.vue
@@ -16,7 +16,7 @@
     </header>
 
     <div class="xs12" v-if="exampleCode != ''">
-      <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
+      <pre><code class="bash"><span v-html="highlight('bash',exampleCode)"></span></code></pre>
     </div>
 
     <div class="xs12" v-if="isLoading">
@@ -25,7 +25,7 @@
 
     <div class="xs12" v-if="jsonData">
       <p>Success! Here is the response:</p>
-      <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
+      <pre class="json-example"><code class="json"><span v-html="highlight('json',jsonData)"></span></code></pre>
     </div>
 
     <template v-if="!isLoading && !jsonData">
@@ -77,6 +77,7 @@
 
 <script>
 import EventBus from '../event-bus';
+import hljs from 'highlight.js';
 
 export default {
   data () {
@@ -88,6 +89,13 @@ export default {
       jsonData: ''
     }
   },
+  mounted () {
+
+    hljs.configure({
+      languages: ['bash', 'json']
+    });
+
+  },
   methods: {
     send () {
       var component = this;
@@ -106,10 +114,13 @@ export default {
     },
     goTo (page) {
       EventBus.$emit('HookStepUpdate', page);
+    },
+    highlight (language, text) {
+      return hljs.highlight(language, text).value;
     }
   },
   name: 'Step3'
-}
+};
 </script>
 
 <style lang="scss">
diff --git a/package.json b/package.json
index 26f9d36..ac0c6c5 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "sass-loader": "^7.0.1",
     "slack-node": "^0.1.8",
     "vue": "^2.5.16",
-    "vue-highlightjs": "^1.3.3",
     "vue-images-loaded": "^1.1.2",
     "vue-moment": "^3.2.0",
     "vue-resource": "^1.5.0",
diff --git a/yarn.lock b/yarn.lock
index b108da7..cfb0803 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3014,7 +3014,7 @@ heroku-ssl-redirect@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/heroku-ssl-redirect/-/heroku-ssl-redirect-0.0.4.tgz#21ba0707aa503b50a412a0946abfaa88ef7d082c"
 
-highlight.js@*, highlight.js@^9.12.0:
+highlight.js@^9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
 
@@ -6624,12 +6624,6 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-highlightjs@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz#29a0d57132fc1ce15cfa61e896918f5b718c5d52"
-  dependencies:
-    highlight.js "*"
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"