Merge pull request #11 from vue-styleguidist/feat-customlayout

feature: custom layout

Author: elevatebart

chainWebpack.js

@@ -1,3 +1,10 @@
-module.exports = function chainWebpack(config) {
-  config.resolve.alias.set("vue$", "vue/dist/vue.esm.js");
+const path = require("path");
+
+module.exports = options => {
+  const layoutPath = options.layout || path.resolve(__dirname, "./layout.vue");
+  return function(config) {
+    config.resolve.alias
+      .set("vue$", "vue/dist/vue.esm.js")
+      .set("vuepress-plugin-live/live-layout", layoutPath);
+  };
 };

dangerfile.js

@@ -8,7 +8,7 @@ const lockfileChanged = danger.git.modified_files.includes("package-lock.json");
 
 if (packageChanged && !lockfileChanged) {
   warn(`Changes were made to \`package.json\`, but not to \`package-lock.json\`.
-If you’ve changed any dependencies (added, removed or updated any packages), please run \`yarn install\` and commit changes in package-lock.json file.`);
+If you’ve changed any dependencies (added, removed or updated any packages), please run \`npm install\` and commit changes in package-lock.json file.  Make sure you’re using npm 5.7+.`);
 }
 
 if (!packageChanged && lockfileChanged) {

docs/.vuepress/config.js

@@ -11,7 +11,13 @@ module.exports = {
     sidebar: ["/", "/Install.md"]
   },
   plugins: [
-    [require("../../index")],
+    [
+      require("../../index"),
+      {
+        // uncomment this to use a custom layout
+        // layout: path.resolve(__dirname, "../custom-layout")
+      }
+    ],
     [
       "@vuepress/register-components",
       {

docs/Install.md

@@ -13,11 +13,19 @@ yarn add -D vuepress-plugin-live
 
 In `.vuepress/config.js` add `["live"]` to the list of plugins
 
-```js{3,4,5}
+```js{6,7,8,9,10,11,12}
+const path = require("path");
+
 module.exports = {
   //...
   plugins: [
-    ["live"],
+    [
+      "live",
+      {
+        // optional: use layout to customize how the live editor is going to look like
+        layout: path.resolve(__dirname, "./myCustomLayout.vue")
+      }
+    ],
     [
       "@vuepress/register-components",
       {
@@ -32,3 +40,21 @@ module.exports = {
   ]
 };
 ```
+
+### Options
+
+#### `layout` (optional)
+
+Absolute path to the layout vue-live is going to use.
+NOTA: the layout should have 2 slots named `preview` and `editor`.
+
+Example layout (simplest):
+
+```vue
+<template functional>
+  <div>
+    <slot name="preview"></slot>
+    <slot name="editor"></slot>
+  </div>
+</template>
+```

docs/custom-layout.vue

@@ -0,0 +1,16 @@
+<template functional>
+  <div class="preview-code">
+    <div class="preview block">
+      <slot name="preview"></slot>
+    </div>
+    <div class="editor block">
+      <slot name="editor"></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.preview-code {
+  border: 3px dashed green;
+}
+</style>

index.js

@@ -2,10 +2,10 @@ const chainWebpack = require("./chainWebpack");
 const enhanceAppFiles = require("./enhanceAppFiles");
 const chainMarkdown = require("./markDownPlugin");
 
-module.exports = () => {
+module.exports = (options, app, plugin) => {
   return {
     name: "vuepress-plugin-live",
-    chainWebpack,
+    chainWebpack: chainWebpack(options),
     enhanceAppFiles,
     chainMarkdown
   };

package.json

@@ -4,6 +4,7 @@
   "description": "Make your markdown code examples come alive ",
   "main": "index.js",
   "scripts": {
+    "start": "npm run docs",
     "docs": "vuepress dev docs --no-clear-screen",
     "docs:build": "vuepress build docs"
   },

vueLiveWithLayout.js

@@ -1,4 +1,4 @@
-import layout from "./layout.vue";
+import layout from "vuepress-plugin-live/live-layout";
 
 // vuepress is compiled in both node and non-node models
 // it needs a "global" variable to make buble work.