\n ");
54 | }
55 | });
56 | }
57 | };
58 | };
59 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuepress-plugin-demo-block",
3 | "version": "0.7.2",
4 | "description": "demo block for vuepress both support vue and react",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "dev": "vuepress dev docs",
8 | "build": "vuepress build docs",
9 | "comp": "rollup -c rollup.config.js",
10 | "watch": "rollup -wc rollup.config.js"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/xiguaxigua/vuepress-plugin-demo-block.git"
15 | },
16 | "keywords": [
17 | "vuepress-plugin",
18 | "demo-block"
19 | ],
20 | "author": "xiguaxigua",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/xiguaxigua/vuepress-plugin-demo-block/issues"
24 | },
25 | "homepage": "https://github.com/xiguaxigua/vuepress-plugin-demo-block#readme",
26 | "devDependencies": {
27 | "@babel/core": "^7.2.2",
28 | "@babel/preset-env": "^7.2.3",
29 | "autoprefixer": "^9.4.5",
30 | "less": "^3.9.0",
31 | "markdown-it-container": "^2.0.0",
32 | "rollup": "^1.0.0",
33 | "rollup-plugin-babel": "^4.2.0",
34 | "rollup-plugin-commonjs": "^9.2.0",
35 | "rollup-plugin-node-resolve": "^4.0.0",
36 | "rollup-plugin-postcss": "^1.6.3",
37 | "rollup-plugin-string": "^2.0.2",
38 | "rollup-plugin-uglify": "^6.0.0",
39 | "vuepress": "^1.0.0-alpha.30"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import autoprefixer from "autoprefixer";
2 | import babel from "rollup-plugin-babel";
3 | import common from "rollup-plugin-commonjs";
4 | import resolve from "rollup-plugin-node-resolve";
5 | import postcss from "rollup-plugin-postcss";
6 | import string from 'rollup-plugin-string';
7 |
8 | export default [
9 | {
10 | input: "src/index.js",
11 | output: {
12 | file: "lib/index.js",
13 | format: "cjs"
14 | },
15 | external: ['path'],
16 | plugins: [babel(), common(), resolve()]
17 | },
18 | {
19 | input: "src/clientRootMixin.js",
20 | output: {
21 | file: "lib/clientRootMixin.js",
22 | format: "esm"
23 | },
24 | plugins: [
25 | postcss({ plugins: [autoprefixer] }),
26 | babel(),
27 | common(),
28 | resolve(),
29 | string({ include: '**/*.svg' })
30 | ]
31 | }
32 | ];
33 |
--------------------------------------------------------------------------------
/src/clientRootMixin.js:
--------------------------------------------------------------------------------
1 | import './style.less'
2 |
3 | import webController from './main'
4 |
5 | export default {
6 | mounted() {
7 | window.$VUEPRESS_DEMO_BLOCK = SETTINGS
8 | webController()
9 | },
10 |
11 | updated() {
12 | webController()
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/common/constants.js:
--------------------------------------------------------------------------------
1 | export const END_TYPE = 'container_demo_close'
2 |
3 | export const CLASS_WRAPPER = 'vuepress-plugin-demo-block__wrapper'
4 | export const CLASS_DISPLAY = 'vuepress-plugin-demo-block__display'
5 | export const CLASS_CODE = 'vuepress-plugin-demo-block__code'
6 | export const CLASS_FOOTER = 'vuepress-plugin-demo-block__footer'
7 | export const CLASS_HORIZONTAL = 'vuepress-plugin-demo-block__horizontal'
8 | export const CLASS_H_CODE = 'vuepress-plugin-demo-block__h_code'
9 |
10 | export const CLASS_APP = 'vuepress-plugin-demo-block__app'
11 | export const CLASS_SHOW_LINK = 'vuepress-plugin-demo-block__show-link'
12 | export const CLASS_EXPAND = 'vuepress-plugin-demo-block__expand'
13 | export const CLASS_OUTLINK = 'vuepress-plugin-demo-block__out-link'
14 | export const CLASS_CODEPEN = 'vuepress-plugin-demo-block__codepen'
15 | export const CLASS_JSFIDDLE = 'vuepress-plugin-demo-block__jsfiddle'
16 | export const CLASS_BUTTON = 'vuepress-plugin-demo-block__button'
17 |
18 | export const DEFAULT_SETTINGS = {
19 | jsLib: [],
20 | cssLib: [],
21 | jsfiddle: true,
22 | codepen: true,
23 | codepenLayout: 'left',
24 | codepenJsProcessor: 'babel',
25 | codepenEditors: '101',
26 | horizontal: false,
27 | vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js',
28 | react: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js',
29 | reactDOM: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js',
30 | }
31 |
32 | export const SETTINGS_KEY = '$VUEPRESS_DEMO_BLOCK'
33 |
--------------------------------------------------------------------------------
/src/common/utils.js:
--------------------------------------------------------------------------------
1 | import { DEFAULT_SETTINGS, SETTINGS_KEY } from './constants'
2 |
3 | const _once = {}
4 |
5 | const getHtmlTpl = html => `
6 | ${html}
7 |
`
8 |
9 | const getVueJsTpl = js => {
10 | const jsContent = js
11 | .replace(/export\s+default\s*?\{\n*/, '')
12 | .replace(/\n*\}\s*$/, '')
13 | .trim()
14 | return `new Vue({
15 | el: '#app',
16 | ${jsContent}
17 | })`
18 | }
19 |
20 | const toArray = value => Array.prototype.slice.call(value)
21 |
22 | export const getSettings = key =>
23 | window[SETTINGS_KEY] && window[SETTINGS_KEY][key] !== undefined
24 | ? window[SETTINGS_KEY][key]
25 | : DEFAULT_SETTINGS[key]
26 |
27 | export const h = (tag, attrs, children) => {
28 | const node = document.createElement(tag)
29 | attrs &&
30 | Object.keys(attrs).forEach(key => {
31 | if (!key.indexOf('data')) {
32 | const k = key.replace('data', '')
33 | node.dataset[k] = attrs[key]
34 | } else {
35 | node[key] = attrs[key]
36 | }
37 | })
38 | children &&
39 | children.forEach(({ tag, attrs, children }) => {
40 | node.appendChild(h(tag, attrs, children))
41 | })
42 | return node
43 | }
44 |
45 | export const $ = (parent, node, returnArray) => {
46 | const result = toArray(parent.querySelectorAll(`.${node}`))
47 | return result.length === 1 && !returnArray ? result[0] : result
48 | }
49 |
50 | const getVueScript = (js, html) => {
51 | const scripts = js.split(/export\s+default/)
52 | const scriptStrOrg = `(function() {${scripts[0]} ; return ${scripts[1]}})()`
53 | const scriptStr = window.Babel
54 | ? window.Babel.transform(scriptStrOrg, { presets: ['es2015'] }).code
55 | : scriptStrOrg
56 | const scriptObj = [eval][0](scriptStr)
57 | scriptObj.template = html
58 | return scriptObj
59 | }
60 |
61 | const getVanillaScript = js => {
62 | return window.Babel
63 | ? window.Babel.transform(js, { presets: ['es2015'] }).code
64 | : js
65 | }
66 |
67 | export const getVueDetail = (code, config) => {
68 | const cssBlock = code.match(/
--------------------------------------------------------------------------------
/src/icons/codepen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/jsfiddle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 |
3 | import {
4 | CLASS_APP,
5 | CLASS_CODE,
6 | CLASS_DISPLAY,
7 | CLASS_FOOTER,
8 | CLASS_WRAPPER,
9 | END_TYPE
10 | } from './common/constants'
11 |
12 | module.exports = (options, context) => ({
13 | name: 'vuepress-plugin-demo-block',
14 | define: {
15 | SETTINGS: options.settings || {}
16 | },
17 | clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'),
18 | extendMarkdown: md => {
19 | md.use(require('markdown-it-container'), 'demo', {
20 | render: (tokens, idx) => {
21 | const { nesting, info } = tokens[idx]
22 | if (nesting === -1) {
23 | return `
24 |
55 |
58 |
59 | `
60 | }
61 | })
62 | }
63 | })
64 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import {
2 | CLASS_APP,
3 | CLASS_CODE,
4 | CLASS_DISPLAY,
5 | CLASS_EXPAND,
6 | CLASS_FOOTER,
7 | CLASS_HORIZONTAL,
8 | CLASS_H_CODE,
9 | CLASS_SHOW_LINK,
10 | CLASS_WRAPPER,
11 | } from './common/constants';
12 | import {
13 | $,
14 | getReactDetail,
15 | getSettings,
16 | getVanillaDetail,
17 | getVueDetail,
18 | h,
19 | injectCss,
20 | } from './common/utils';
21 | import codepen from './online/codepen';
22 | import jsfiddle from './online/jsfiddle';
23 |
24 | export default function webController() {
25 | const nodes = $(document, CLASS_WRAPPER, true);
26 | if (!nodes.length) {
27 | setTimeout(_ => {
28 | webController()
29 | }, 300)
30 | return
31 | }
32 | nodes.forEach(node => {
33 | if (node.dataset.created === 'true') return;
34 | node.style.display = 'block';
35 |
36 | const codeNode = $(node, CLASS_CODE);
37 | const displayNode = $(node, CLASS_DISPLAY);
38 | const footerNode = $(node, CLASS_FOOTER);
39 | const appNode = $(displayNode, CLASS_APP);
40 |
41 | const code = decodeURIComponent(node.dataset.code);
42 | let config = decodeURIComponent(node.dataset.config);
43 | let type = decodeURIComponent(node.dataset.type);
44 | config = config ? JSON.parse(config) : {};
45 | const height = codeNode.querySelector('div').clientHeight;
46 | const detail =
47 | type === 'react'
48 | ? getReactDetail(code, config)
49 | : type === 'vanilla'
50 | ? getVanillaDetail(code, config)
51 | : getVueDetail(code, config);
52 | const expandNode = createExpandNode();
53 | footerNode.appendChild(expandNode);
54 | expandNode.addEventListener(
55 | 'click',
56 | expandHandler.bind(null, expandNode, height, codeNode, footerNode)
57 | );
58 |
59 | if (getSettings('jsfiddle')) {
60 | footerNode.appendChild(jsfiddle(detail));
61 | }
62 | if (getSettings('codepen')) {
63 | footerNode.appendChild(codepen(detail));
64 | }
65 |
66 | const horizontalConfig =
67 | config.horizontal !== undefined
68 | ? config.horizontal
69 | : getSettings('horizontal');
70 |
71 | if (horizontalConfig) {
72 | node.classList.add(CLASS_HORIZONTAL);
73 | const hCodeNode = codeNode.firstChild.cloneNode(true);
74 | hCodeNode.classList.add(CLASS_H_CODE);
75 | displayNode.appendChild(hCodeNode);
76 | }
77 |
78 | detail.css && injectCss(detail.css);
79 | if (type === 'react') {
80 | ReactDOM.render(React.createElement(detail.js), appNode);
81 | } else if (type === 'vue') {
82 | const Comp = Vue.extend(detail.script);
83 | const app = new Comp().$mount();
84 | appNode.appendChild(app.$el);
85 | } else if (type === 'vanilla') {
86 | appNode.innerHTML = detail.html;
87 | new Function(`return (function(){${detail.script}})()`)();
88 | }
89 | node.dataset.created = 'true';
90 | });
91 | }
92 |
93 | function createExpandNode() {
94 | return h('button', {
95 | className: `${CLASS_EXPAND}`,
96 | });
97 | }
98 |
99 | function expandHandler(expandNode, height, codeNode, footerNode) {
100 | const isExpand = expandNode.dataset.isExpand !== '1';
101 | codeNode.style.height = isExpand ? `${height}px` : 0;
102 | if (isExpand) {
103 | footerNode.classList.add(CLASS_SHOW_LINK);
104 | } else {
105 | footerNode.classList.remove(CLASS_SHOW_LINK);
106 | }
107 | expandNode.dataset.isExpand = isExpand ? '1' : '0';
108 | }
109 |
--------------------------------------------------------------------------------
/src/online/codepen.js:
--------------------------------------------------------------------------------
1 | import { CLASS_BUTTON, CLASS_CODEPEN } from '../common/constants'
2 | import { getSettings, h } from '../common/utils'
3 | import codepenIcon from '../icons/codepen.svg'
4 | export default function getCodepenBtn({ css, htmlTpl, jsTpl, jsLib, cssLib }) {
5 | const value = JSON.stringify({
6 | css: css,
7 | html: htmlTpl,
8 | js: jsTpl,
9 | js_external: jsLib.concat(getSettings('jsLib')).join(';'),
10 | css_external: cssLib.concat(getSettings('cssLib')).join(';'),
11 | layout: getSettings('codepenLayout'),
12 | js_pre_processor: getSettings('codepenJsProcessor'),
13 | editors: getSettings('codepenEditors')
14 | })
15 | const form = h(
16 | 'form',
17 | {
18 | className: CLASS_CODEPEN,
19 | target: '_blank',
20 | action: 'https://codepen.io/pen/define',
21 | method: 'post'
22 | },
23 | [
24 | {
25 | tag: 'input',
26 | attrs: { type: 'hidden', name: 'data', value }
27 | },
28 | {
29 | tag: 'button',
30 | attrs: {
31 | type: 'submit',
32 | innerHTML: codepenIcon,
33 | className: CLASS_BUTTON,
34 | datatip: 'Codepen'
35 | }
36 | }
37 | ]
38 | )
39 | return form
40 | }
41 |
--------------------------------------------------------------------------------
/src/online/jsfiddle.js:
--------------------------------------------------------------------------------
1 | import { CLASS_BUTTON, CLASS_JSFIDDLE } from '../common/constants'
2 | import { getSettings, h } from '../common/utils'
3 | import jsfiddleIcon from '../icons/jsfiddle.svg'
4 | export default function getJsfiddleBtn({ css, htmlTpl, jsTpl, jsLib, cssLib }) {
5 | const resource = jsLib
6 | .concat(cssLib)
7 | .concat(getSettings('cssLib'))
8 | .concat(getSettings('jsLib'))
9 | .join(',')
10 | const form = h(
11 | 'form',
12 | {
13 | className: CLASS_JSFIDDLE,
14 | target: '_blank',
15 | action: 'https://jsfiddle.net/api/post/library/pure/',
16 | method: 'post'
17 | },
18 | [
19 | {
20 | tag: 'input',
21 | attrs: { type: 'hidden', name: 'css', value: css }
22 | },
23 | {
24 | tag: 'input',
25 | attrs: { type: 'hidden', name: 'html', value: htmlTpl }
26 | },
27 | {
28 | tag: 'input',
29 | attrs: { type: 'hidden', name: 'js', value: jsTpl }
30 | },
31 | {
32 | tag: 'input',
33 | attrs: { type: 'hidden', name: 'panel_js', value: 3 }
34 | },
35 | {
36 | tag: 'input',
37 | attrs: { type: 'hidden', name: 'wrap', value: 1 }
38 | },
39 | {
40 | tag: 'input',
41 | attrs: { type: 'hidden', name: 'resources', value: resource }
42 | },
43 | {
44 | tag: 'button',
45 | attrs: {
46 | type: 'submit',
47 | className: CLASS_BUTTON,
48 | innerHTML: jsfiddleIcon,
49 | datatip: 'JSFiddle'
50 | }
51 | }
52 | ]
53 | )
54 | return form
55 | }
56 |
--------------------------------------------------------------------------------
/src/style.less:
--------------------------------------------------------------------------------
1 | @media (max-width: 1000px) {
2 | .vuepress-plugin-demo-block__h_code {
3 | display: none;
4 | }
5 | .vuepress-plugin-demo-block__app {
6 | margin-left: auto !important;
7 | margin-right: auto !important;
8 | }
9 | }
10 |
11 | .vuepress-plugin-demo-block__wrapper {
12 | margin-top: 10px;
13 | border: 1px solid #ebebeb;
14 | border-radius: 4px;
15 | transition: all .2s;
16 |
17 | &.vuepress-plugin-demo-block__horizontal {
18 | .vuepress-plugin-demo-block__display {
19 | height: 400px;
20 | display: flex;
21 |
22 | .vuepress-plugin-demo-block__app {
23 | width: 300px;
24 | border: 1px solid #ebebeb;
25 | box-shadow: 1px 1px 3px #ebebeb;
26 | margin-right: 5px;
27 | overflow: auto;
28 | }
29 |
30 | .vuepress-plugin-demo-block__h_code {
31 | flex: 1;
32 | overflow: auto;
33 | height: 100%;
34 |
35 | > pre {
36 | overflow: visible;
37 | }
38 | }
39 | }
40 | }
41 |
42 | .vuepress-plugin-demo-block__display {
43 | max-height: 400px;
44 | overflow: auto;
45 | }
46 | div {
47 | box-sizing: border-box;
48 | }
49 |
50 | &:hover {
51 | box-shadow: 0 0 11px rgba(33,33,33,.2);
52 | }
53 |
54 | .vuepress-plugin-demo-block__code {
55 | overflow: hidden;
56 | height: 0;
57 | padding: 0 !important;
58 | background-color: #282c34;
59 | border-radius: 0 !important;
60 | transition: height .5s;
61 |
62 | pre {
63 | margin: 0 !important;
64 | }
65 | }
66 |
67 | .vuepress-plugin-demo-block__display {
68 | padding: 20px;
69 | border-bottom: 1px solid #ebebeb;
70 | }
71 |
72 | .vuepress-plugin-demo-block__footer {
73 | position: relative;
74 | text-align: center;
75 |
76 | &.vuepress-plugin-demo-block__show-link {
77 | .vuepress-plugin-demo-block__jsfiddle,
78 | .vuepress-plugin-demo-block__codepen {
79 | opacity: 1;
80 | }
81 |
82 | .vuepress-plugin-demo-block__expand::before {
83 | border-top: none;
84 | border-right: 6px solid transparent;
85 | border-bottom: 6px solid #ccc;
86 | border-left: 6px solid transparent;
87 | }
88 | }
89 |
90 | &:hover {
91 | .vuepress-plugin-demo-block__jsfiddle,
92 | .vuepress-plugin-demo-block__codepen,
93 | .vuepress-plugin-demo-block__expand span,
94 | .vuepress-plugin-demo-block__expand {
95 | opacity: 1;
96 | }
97 |
98 | .vuepress-plugin-demo-block__expand::before {
99 | border-top-color: #3eaf7c !important;
100 | border-bottom-color: #3eaf7c !important;
101 | }
102 |
103 | svg {
104 | fill: #3eaf7c !important;
105 | }
106 | }
107 |
108 | .vuepress-plugin-demo-block__expand-text {
109 | transition: all .5s;
110 | opacity: 0;
111 | }
112 |
113 | form:nth-last-child(2) {
114 | right: 50px;
115 | }
116 |
117 | form:last-child {
118 | right: 10px;
119 | }
120 |
121 | .vuepress-plugin-demo-block__button {
122 | border-color: transparent;
123 | background-color: transparent;
124 | font-size: 14px;
125 | color: #3eaf7c;
126 | cursor: pointer;
127 | outline: none;
128 | margin: 0;
129 | width: 46px;
130 | position: relative;
131 |
132 | &:hover::before {
133 | content: attr(data-tip);
134 | white-space: nowrap;
135 | position: absolute;
136 | top: -30px;
137 | left: 50%;
138 | color: #eee;
139 | line-height: 1;
140 | z-index: 1000;
141 | border-radius: 4px;
142 | padding: 6px;
143 | transform: translateX(-50%);
144 | background-color: rgba(0, 0, 0, .8)
145 | }
146 |
147 | &:hover::after {
148 | content: '' !important;
149 | display: block;
150 | position: absolute;
151 | left: 50%;
152 | top: -5px;
153 | transform: translateX(-50%);
154 | border: 5px solid transparent;
155 | border-top-color: rgba(0, 0, 0, .8);
156 | }
157 |
158 | svg {
159 | width: 34px;
160 | height: 20px;
161 | fill: #ccc;
162 | }
163 | }
164 |
165 | .vuepress-plugin-demo-block__jsfiddle,
166 | .vuepress-plugin-demo-block__codepen {
167 | position: absolute;
168 | top: 10px;
169 | transition: all .5s;
170 | }
171 |
172 | .vuepress-plugin-demo-block__expand {
173 | position: relative;
174 | width: 100px;
175 | height: 40px;
176 | margin: 0;
177 | color: #3eaf7c;
178 | font-size: 14px;
179 | background-color: transparent;
180 | border-color: transparent;
181 | outline: none;
182 | transition: all .5s;
183 | cursor: pointer;
184 |
185 | &::before {
186 | content: "";
187 | position: absolute;
188 | top: 50%;
189 | left: 50%;
190 | width: 0;
191 | height: 0;
192 | border-top: 6px solid #ccc;
193 | border-right: 6px solid transparent;
194 | border-left: 6px solid transparent;
195 | transform: translate(-50%, -50%);
196 | }
197 | }
198 | }
199 | }
200 |
--------------------------------------------------------------------------------