updates to DocsShowCode component

docs/common/DocsShow.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <div class="show" :style="{ display: block ? 'block' : 'inline-block' }">
+    <div class="show" :style="style">
       <slot></slot>
     </div>
   </div>
@@ -18,6 +18,18 @@
         type: Boolean,
         default: false,
       },
+      padding: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      style() {
+        return {
+          display: this.block ? 'block' : 'inline-block',
+          padding: this.padding ? '8px 24px' : null,
+        };
+      },
     },
   };
 
@@ -27,7 +39,6 @@
 <style lang="scss" scoped>
 
   .show {
-    padding: 8px 24px;
     margin: 8px;
     border: 1px solid #dedede;
     border-radius: 4px;

docs/common/DocsShowCode.vue → docs/common/DocsShowCode/index.vue

@@ -1,25 +1,26 @@
 <template>
 
-  <DocsShow :block="block">
-    <Prism :language="language">
+  <DocsShow :block="block" :padding="false">
+    <!-- Note that slot contents are HTML-escaped using webpack-loader.js -->
+    <PrismComponent :language="language">
       <slot></slot>
-    </Prism>
+    </PrismComponent>
   </DocsShow>
 
 </template>
 
 
 <script>
 
-  import 'prismjs';
+  import Prism from 'prismjs';
   import 'prismjs/themes/prism.css';
   import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-  import Prism from 'vue-prism-component';
+  import PrismComponent from 'vue-prism-component';
 
   export default {
     name: 'DocsShowCode',
     components: {
-      Prism,
+      PrismComponent,
     },
     props: {
       // `display: block` takes up full width
@@ -32,6 +33,11 @@
         required: true,
       },
     },
+    mounted() {
+      // Ensure prism-normalize-whitespace plugin is run
+      // ref: https://github.com/egoist/vue-prism-component/issues/10#issuecomment-988938865
+      Prism.highlightAll();
+    },
   };
 
 </script>
@@ -48,7 +54,7 @@
   }
 
   pre[class*='language-'] {
-    padding: 0;
+    padding: 8px 24px;
     margin: 0;
   }
 

docs/common/DocsShowCode/webpack-loader.js

@@ -0,0 +1,14 @@
+var TAG_PATTERN = new RegExp(`<DocsShowCode(.*?)>(.*?)</DocsShowCode>`, 'gms');
+
+function escape(unsafe) {
+  return (unsafe || '')
+    .replace(/&/gm, '&amp;')
+    .replace(/</gm, '&lt;')
+    .replace(/>/gm, '&gt;');
+}
+
+module.exports = function(content) {
+  return content.replace(TAG_PATTERN, function(_, attributes, innerText) {
+    return `<DocsShowCode${attributes}>${escape(innerText)}</DocsShowCode>`;
+  });
+};

docs/pages/colors.vue

@@ -53,7 +53,9 @@
       </p>
 
       <DocsShowCode language="html">
-        &lt;div :style="{ color: $themeTokens.error }"&gt;This is an error&lt;/div&gt;
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShowCode>
 
       <p>
@@ -75,7 +77,7 @@
       </p>
 
       <DocsShowCode language="html">
-        &lt;input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" /&gt;
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
       </DocsShowCode>
 
       <p>This is usually not necessary, and using <code>style</code> is preferred for simplicity when possible.</p>

docs/pages/kcheckbox.vue

@@ -53,7 +53,7 @@
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        &lt;KCheckbox label="First lesson" /&gt;
+        <KCheckbox label="First lesson" />;
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
@@ -65,9 +65,9 @@
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        &lt;KCheckbox&gt;
-          &lt;KLabeledIcon icon="lesson" label="First lesson" /&gt;
-        &lt;/KCheckbox&gt;
+        <KCheckbox>
+          <KLabeledIcon icon="lesson" label="First lesson" />
+        </KCheckbox>
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
@@ -82,11 +82,11 @@
           <!-- eslint-disable -->
           <!-- prevent prettier from changing indentation -->
           <DocsShowCode language="html">
-            &lt;KCheckbox&gt;
-              &lt;label&gt;
-                &lt;KLabeledIcon icon="lesson" label="First lesson" /&gt;
-              &lt;/label&gt;
-            &lt;/KCheckbox&gt;
+            <KCheckbox>
+              <label>
+                <KLabeledIcon icon="lesson" label="First lesson"></KLabeledIcon>
+              </label>
+            </KCheckbox>
           </DocsShowCode>
           <!-- eslint-enable -->
 

docs/pages/layout/index.vue

@@ -85,16 +85,16 @@
       <p>
         For example, consider a Vue file with this in its template and script:
       </p>
-      <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        &lt;div class="box" :style="boxStyle"&gt;
+        <div class="box" :style="boxStyle">
           Box 1
-        &lt;/div&gt;
-        &lt;div class="box" :style="boxStyle"&gt;
+        </div>
+        <div class="box" :style="boxStyle">
           Box 2
-        &lt;/div&gt;
+        </div>
       </DocsShowCode>
+      <!-- eslint-disable -->
+      <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="javascript">
         computed: {
           boxStyle() {
@@ -195,19 +195,16 @@
       <p>
         For example, a common pattern in Kolibri is to have a button right-aligned at the top of a page alongside the header on large windows, but on medium and small windows to move the button underneath the header and left-align it. To do this with the responsive grid:
       </p>
-      <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        &lt;KGrid&gt;
-          &lt;KGridItem :layout12="{ span: 9 }"&gt;
-            &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/h2&gt;
-          &lt;/KGridItem&gt;
-          &lt;KGridItem :layout12="{ span: 3, alignment: 'right' }"&gt;
-            &lt;KButton text="Button" primary/&gt;
-          &lt;/KGridItem&gt;
-        &lt;/KGrid&gt;
+        <KGrid>
+          <KGridItem :layout12="{ span: 9 }">
+            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+          </KGridItem>
+          <KGridItem :layout12="{ span: 3, alignment: 'right' }">
+            <KButton text="Button" primary />
+          </KGridItem>
+        </KGrid>
       </DocsShowCode>
-      <!-- eslint-enable -->
 
       <p>
         Each grid item is described by layout objects which can contain a column <code>span</code> and default text <code>alignment</code>. When no additional layout information is provided, the <code>span</code> defaults to the total number of columns (i.e. full-width), and <code>alignment</code> defaults to <code>'right'</code>.

docs/pages/styling/index.vue

@@ -28,7 +28,9 @@
         Use these by importing the design system's <code>definitions.scss</code> file. For example, this HTML and SCSS in a Vue template:
       </p>
       <DocsShowCode language="html">
-        &lt;div class="box"&gt;Hello!&lt;/div&gt;
+        <div class="box">
+          Hello!
+        </div>
       </DocsShowCode>
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->

nuxt.config.js

@@ -19,6 +19,7 @@ export default {
   srcDir: './docs/',
   plugins: ['~/plugins/load-common-components.js', '~/plugins/load-lib-components.js'],
   css: ['normalize.css/normalize.css', '~/assets/main.scss'],
+  modulesDir: ['node_modules', 'docs'], // allow custom DocsShowCode loader to be found
   build: {
     extractCSS: true,
     optimization: {
@@ -42,6 +43,12 @@ export default {
         loader: 'svg-icon-inline-loader',
         exclude: /node_modules/,
       });
+      // handles escaping HTML inside <DocsShowCode> slots
+      config.module.rules.push({
+        test: /\.vue$/,
+        loader: 'common/DocsShowCode/webpack-loader.js',
+        exclude: /node_modules/,
+      });
       // used for glossary
       config.module.rules.push({
         test: /\.tbx$/,