diff --git a/.circleci/config.yml b/.circleci/config.yml index 0eea3ed..529dae7 100644 --- 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 index c77344b..f0d28f4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ License

-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/animate.css@3.7.0/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 deleted file mode 100644 index b06071f..0000000 --- a/README_cn.md +++ /dev/null @@ -1,100 +0,0 @@ -

vuepress-plugin-demo-code

- -

- Build Status - Version - License -

- -[English](README.md) | 简体中文 - -> demo-code plugin for vuepress. - -借助这个插件，你可以通过下述的语法在展示 demo 的同时，将这段代码展示出来。 - -```md -::: demo -
Click me!
- - -::: -``` - -[实际效果请点击这里](https://buptsteve.github.io/vuepress-plugin-demo-code/zh/example/) - -## Install - -* 首先安装 [vuepress v1.x](https://github.com/vuejs/vuepress) - -* 接着安装插件 - -```bash -$ npm i -D vuepress-plugin-demo-code -# OR -$ yarn add -D vuepress-plugin-demo-code -``` - -## Usage -配置 vuepress config - -```js -module.exports = { - plugins: ['demo-code'], -} -``` - -## Options -插件支持以下配置 - -```js -module.exports = { - plugins: [ - ['demo-code', { - showText: 'show code', - hideText: 'hide', - styleStr: 'text-decoration: underline;', - minHeight: 200, - demoCodeMark: 'demo-code', - }] - ], -} -``` - -### showText -* 类型：`String` -* 默认值：`show code` - -展开代码按钮的文案。 - -### hideText -* 类型：`String` -* 默认值：`hide code` - -收起代码按钮的文案。 - -### minHeight -* 类型：`Number` -* 默认值：`200`(px) - -代码收起时的高度。 - -### demoCodeMark -* 类型：`String` -* 默认值：`demo` - -插件的标记，即跟在 `:::` 后的标记。 - -## Related -* [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block) - -## License - -[MIT](http://opensource.org/licenses/MIT) - -Copyright (c) StEve Young diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 8cab34a..3e8ea06 100644 --- 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/animate.css@3.7.0/animate.min.css` }], ], plugins: [ [demoCode, { + cssLibs: [ + 'https://unpkg.com/animate.css@3.7.0/animate.min.css', + ], showText: 'show more', hideText: 'hide', minHeight: 200, diff --git a/docs/README.md b/docs/README.md index ee2ce1b..42aca14 100644 --- 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/animate.css@3.7.0/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 index 0216bca..5248678 100644 --- 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 + + ::: ``` @@ -26,7 +32,7 @@ export default { ::: demo + + ::: ## Code Language @@ -45,16 +57,28 @@ You may notice that the top right corner of the display code shows `vue`(default ```md ::: demo html -

+

this is common html

+ + ::: ``` ### Result ::: demo html -

+

this is common html

+ + ::: diff --git a/docs/zh/README.md b/docs/zh/README.md index b79c395..5670243 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -28,6 +28,17 @@ export default { [实际效果请点击这里](./example/) +## Features +* 只有一份代码同时生成 demo 和 code +* 代码可折叠 +* 支持在线编辑 + * ✔ Codepen + * ✔ JSFiddle + * ✔ CodeSandbox +* 专门为浏览长代码进行了设计 + * Sticky 的收起按钮 + * 点击收起按钮时自动滚动到代码的顶部 + ## Install * 首先安装 [vuepress v1.x](https://github.com/vuejs/vuepress) @@ -56,16 +67,46 @@ module.exports = { module.exports = { plugins: [ ['demo-code', { + jsLibs: [ + // umd + 'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js', + ], + cssLibs: [ + 'https://unpkg.com/animate.css@3.7.0/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 +* 类型：`Array` +* 默认值：`[]` + +展示 demo 所需的 js 库。 + +### cssLibs +* 类型：`Array` +* 默认值：`[]` + +展示 demo 所需的 css 库。 + ### showText * 类型：`String` * 默认值：`show code` @@ -84,6 +125,20 @@ module.exports = { 代码收起时的高度。 +### onlineBtns +* 类型：`Object` +* 默认值：`{ codepen: true, jsfiddle: true, codesandbox: true }` + +展示哪些在线编辑的按钮。 + +### codesandbox +* 类型：`Object` +* 默认值：`{ deps: {}, json: '', query: 'module=App.vue'', embed: '' },` + +It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api). + +> `deps` is dependencies + ### demoCodeMark * 类型：`String` * 默认值：`demo` diff --git a/docs/zh/example/README.md b/docs/zh/example/README.md index d372a9e..da0d36d 100644 --- a/docs/zh/example/README.md +++ b/docs/zh/example/README.md @@ -1,4 +1,4 @@ -# Eaxmple +# Example ## 常规操作 直接把 demo 代码用 `::: demo` 和 `:::` 包裹。即可生成可运行的 demo 和代码。 @@ -18,6 +18,12 @@ export default { }, } + + ::: ``` @@ -35,6 +41,12 @@ export default { }, } + + ::: ## 代码语言 @@ -44,16 +56,28 @@ export default { ```md ::: demo html -

+

this is common html

+ + ::: ``` ### 实现效果 ::: demo html -

+

this is common html

+ + ::: diff --git a/package.json b/package.json index 6581fe1..b37577c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuepress-plugin-demo-code", - "version": "0.2.1", + "version": "0.3.0", "description": "📝 Demo and code plugin for vuepress", "main": "src/index.js", "files": [ @@ -41,6 +41,7 @@ ] }, "dependencies": { + "codesandbox": "1.1.13", "markdown-it-container": "^2.0.0", "prismjs": "^1.15.0" }, diff --git a/src/DemoAndCode.vue b/src/DemoAndCode.vue index fe6b332..9af9ff9 100644 --- a/src/DemoAndCode.vue +++ b/src/DemoAndCode.vue @@ -3,14 +3,25 @@
- {{ controlText }} -
+ + {{ controlText }} +
+ + +
+ +
@@ -20,20 +31,41 @@ diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..f600a95 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,40 @@ +const JS_RE = /\n` + : type === 'css' + ? `\n` + : `Error type: js | css` + +const getCodeSandboxTmpl = ({ js, css, html, deps, jsLibs, cssLibs }) => getParameters({ + files: { + 'main.js': { content: CODE_SANDBOX_JS }, + 'App.vue': { + content: + `\n\n` + + `\n\n` + + `\n`, + }, + 'index.html': { + content: + cssLibs.map(urlToHtmlTag('css')) + + jsLibs.map(urlToHtmlTag('js')) + + CODE_SANDBOX_HTML, + }, + 'package.json': { + content: { + dependencies: Object.assign({ vue: 'latest' }, deps), + }, + }, + }, +}) + +const parseAndDecode = str => JSON.parse(decodeURIComponent(str)) +const encodeAndStringify = obj => encodeURIComponent(JSON.stringify(obj)) + +module.exports = { + getJsTmpl, + getHtmlTmpl, + parseAndDecode, + getMatchedResult, + encodeAndStringify, + getCodeSandboxTmpl, +}