Merge pull request #234 from freshworks/vuepress-live-plugin-fixes

fix(vuepress): fix Vuepress live preview plugin configuration based o…
freshworks · Oct 12, 2021 · 3d18058 · 3d18058
2 parents ed32b58 + 1e8d8ca
commit 3d18058
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/www/.vuepress/config.js b/www/.vuepress/config.js
@@ -62,6 +62,7 @@ module.exports = {
       "live",
       {
         layout: path.resolve(__dirname, "./previewLayout.vue"),
+        squiggles: false
       },
     ],
     ["@vuepress/active-header-links"],

diff --git a/www/.vuepress/previewLayout.vue b/www/.vuepress/previewLayout.vue
@@ -1,18 +1,21 @@
 <template>
   <div class="container">
-    <div class="preview-container">
+    <div class="preview block preview-container">
       <slot name="preview"></slot>
       <div class="seeCode" @click="toggle">{{showCode ? 'Hide Code' : 'Show Code'}}</div>
     </div>
-    <div class="code" v-if="showCode">
+    <div :class="`language-jsx editor block code`" v-if="showCode">
       <slot name="editor" ></slot>
       <div class="copy" ref="copyBtn" @click="copyToClipboard">Copy</div>
     </div>
   </div>
 </template>
 
 <script>
+import "prismjs/themes/prism-tomorrow.css";
+import "vue-prism-editor/dist/prismeditor.min.css";
 export default {
+  squiggles: false,
   data() {
     return {
       showCode: false
@@ -23,7 +26,7 @@ export default {
       this.showCode =!this.showCode;
     },
     async copyToClipboard() {
-      const code =  this.$slots['editor'].reduce((code, node) => code + node.data.model.value, '');
+      const code =  this.$slots['editor'].reduce((code, node) => code + node.context.model, '');
       const el = document.createElement('textarea');
       el.value = code;
       document.body.appendChild(el);
@@ -40,6 +43,51 @@ export default {
 }
 </script>
 
+<style lang="scss">
+  .VueLive-squiggles-wrapper {
+    display: none;
+  }
+
+  .VueLive-error {
+    padding: 1.25rem 1.5rem;
+    border-radius: 6px;
+    overflow: hidden;
+    color: #fff;
+    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+    font-size: 0.85em;
+    text-align: left;
+    white-space: pre-wrap;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.65;
+  }
+
+  .prism-editor-wrapper {
+    background-color: #002540;
+    .prism-editor__editor, .prism-editor__textarea {
+      padding: 1.25rem 1.5rem;
+      border-radius: 6px;
+      overflow: hidden;
+      color: #fff;
+      font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+      font-size: 0.85em;
+      text-align: left;
+      white-space: pre-wrap;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.65;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+  }
+</style>
+
 <style lang="scss" scoped>
 .container {
   margin: 20px 0;
@@ -57,15 +105,13 @@ export default {
   }
   @media screen and (prefers-reduced-motion: reduce) {
     .code {
-        position: relative;
-        margin-top: -14px;
-        transition: none;
+      position: relative;
+      transition: none;
     }
   }
 
   .code {
     position: relative;
-    margin-top: -14px;
     transition: all 0.25s ease;
   }
 
@@ -112,5 +158,4 @@ export default {
     background: #8e44ad;
   }
 }
-
 </style>