close #2, support online edit (#3)

* feat: support online edit with Codepen and JSFiddle and CodeSandbox * ci: only deploy docs in master branch
BuptStEve · Feb 13, 2019 · fecfd97 · fecfd97
1 parent 29a214f
commit fecfd97
Show file tree

Hide file tree

Showing 17 changed files with 648 additions and 122 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -5,6 +5,10 @@
 version: 2
 jobs:
   build:
+    branches:
+      only:
+        - master
+
     docker:
       # specify the version you desire here
       - image: circleci/node:latest

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
     <a href="https://www.npmjs.com/package/vuepress-plugin-demo-code"><img src="https://img.shields.io/npm/l/vuepress-plugin-demo-code.svg" alt="License"></a>
 </p>
 
-English | [简体中文](README_cn.md)
+English | [简体中文](https://buptsteve.github.io/vuepress-plugin-demo-code/zh/)
 
 > demo-code plugin for vuepress.
 
@@ -28,6 +28,17 @@ export default {
 
 [Please click here to see the demo](https://buptsteve.github.io/vuepress-plugin-demo-code/example/)
 
+## Features
+* Only one source code
+* Foldable code
+* Online edit support
+  * ✔ Codepen
+  * ✔ JSFiddle
+  * ✔ CodeSandbox
+* Designed for long code
+  * Sticky fold button
+  * Auto scroll to top when you fold code
+
 ## Install
 
 * First, install [vuepress v1.x](https://github.com/vuejs/vuepress)
@@ -56,16 +67,46 @@ This plugin supports the following configurations.
 module.exports = {
     plugins: [
         ['demo-code', {
+            jsLibs: [
+                // umd
+                'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js',
+            ],
+            cssLibs: [
+                'https://unpkg.com/[email protected]/animate.min.css',
+            ],
             showText: 'show code',
             hideText: 'hide',
             styleStr: 'text-decoration: underline;',
             minHeight: 200,
+            onlineBtns: {
+                codepen: true,
+                jsfiddle: true,
+                codesandbox: true,
+            },
+            codesandbox: {
+                deps: { 'lodash': 'latest' },
+                json: '',
+                query: '',
+                embed: '',
+            },
             demoCodeMark: 'demo-code',
         }]
     ],
 }
 ```
 
+### jsLibs
+* Type: `Array`
+* Default: `[]`
+
+Js libraries for the demo.
+
+### cssLibs
+* Type: `Array`
+* Default: `[]`
+
+Css libraries for the demo.
+
 ### showText
 * Type: `String`
 * Default: `show code`
@@ -84,6 +125,20 @@ The display text of fold code button.
 
 The height of the code when it is folded.
 
+### onlineBtns
+* Type: `Object`
+* Default: `{ codepen: true, jsfiddle: true, codesandbox: true }`
+
+Display online edit buttons.
+
+### codesandbox
+* Type: `Object`
+* Default: `{ deps: {}, json: '', query: 'module=App.vue'', embed: '' },`
+
+It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api).
+
+> `deps` is dependencies
+
 ### demoCodeMark
 * Type: `String`
 * Default: `demo`

diff --git a/README_cn.md b/README_cn.md
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -13,9 +13,13 @@ module.exports = {
     },
     head: [
         ['link', { rel: 'icon', href: `/favicon.ico` }],
+        ['link', { rel: 'stylesheet', href: `https://unpkg.com/[email protected]/animate.min.css` }],
     ],
     plugins: [
         [demoCode, {
+            cssLibs: [
+                'https://unpkg.com/[email protected]/animate.min.css',
+            ],
             showText: 'show more',
             hideText: 'hide',
             minHeight: 200,

diff --git a/docs/README.md b/docs/README.md
@@ -28,6 +28,17 @@ export default {
 
 [Please click here to see the demo](./example/)
 
+## Features
+* Only one source code
+* Foldable code
+* Online edit support
+  * ✔ Codepen
+  * ✔ JSFiddle
+  * ✔ CodeSandbox
+* Designed for long code
+  * Sticky fold button
+  * Auto scroll to top when you fold code
+
 ## Install
 
 * First, install [vuepress v1.x](https://github.com/vuejs/vuepress)
@@ -56,16 +67,46 @@ This plugin supports the following configurations.
 module.exports = {
     plugins: [
         ['demo-code', {
+            jsLibs: [
+                // umd
+                'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js',
+            ],
+            cssLibs: [
+                'https://unpkg.com/[email protected]/animate.min.css',
+            ],
             showText: 'show code',
             hideText: 'hide',
             styleStr: 'text-decoration: underline;',
             minHeight: 200,
+            onlineBtns: {
+                codepen: true,
+                jsfiddle: true,
+                codesandbox: true,
+            },
+            codesandbox: {
+                deps: { 'lodash': 'latest' },
+                json: '',
+                query: '',
+                embed: '',
+            },
             demoCodeMark: 'demo-code',
         }]
     ],
 }
 ```
 
+### jsLibs
+* Type: `Array`
+* Default: `[]`
+
+Js libraries for the demo.
+
+### cssLibs
+* Type: `Array`
+* Default: `[]`
+
+Css libraries for the demo.
+
 ### showText
 * Type: `String`
 * Default: `show code`
@@ -84,6 +125,20 @@ The display text of fold code button.
 
 The height of the code when it is folded.
 
+### onlineBtns
+* Type: `Object`
+* Default: `{ codepen: true, jsfiddle: true, codesandbox: true }`
+
+Display online edit buttons.
+
+### codesandbox
+* Type: `Object`
+* Default: `{ deps: {}, json: '', query: 'module=App.vue'', embed: '' },`
+
+It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api).
+
+> `deps` is dependencies
+
 ### demoCodeMark
 * Type: `String`
 * Default: `demo`

diff --git a/docs/example/README.md b/docs/example/README.md
@@ -1,15 +1,15 @@
-# Eaxmple
+# Example
 
 ## Common Usage
 
-Just wrapper your demo code between `::: demo` and `:::`.Then you can generate runnable demo and code.
+Just wrapper your demo code between `::: demo` and `:::`. Then you will get runnable demo and code.
 
 ### Usage Example
 
 ```md
 ::: demo
 <template>
-    <button @click="onClick">Click me!</button>
+    <button class="animated shake infinite" @click="onClick">Click me!</button>
 </template>
 
 <script>
@@ -19,14 +19,20 @@ export default {
     },
 }
 </script>
+
+<style>
+button {
+    color: blue;
+}
+</style>
 :::
 ```
 
 ### Result
 
 ::: demo
 <template>
-    <button @click="onClick">Click me!</button>
+    <button class="animated shake infinite" @click="onClick">Click me!</button>
 </template>
 
 <script>
@@ -36,6 +42,12 @@ export default {
     },
 }
 </script>
+
+<style>
+button {
+    color: blue;
+}
+</style>
 :::
 
 ## Code Language
@@ -45,16 +57,28 @@ You may notice that the top right corner of the display code shows `vue`(default
 
 ```md
 ::: demo html
-<p>
+<p class="common-html">
     this is <span style="color: red;">common</span> html
 </p>
+
+<style>
+.common-html {
+    color: green;
+}
+</style>
 :::
 ```
 
 ### Result
 
 ::: demo html
-<p>
+<p class="common-html">
     this is <span style="color: red;">common</span> html
 </p>
+
+<style>
+.common-html {
+    color: green;
+}
+</style>
 :::