Skip to content

Commit 89dc15c

Browse files
Samuell1marcosmoura
Samuell1
authored and
marcosmoura
committed
docs: use codesandbox for examples (vuematerial#1573)
* docs: use codesandbox for examples * docs: replace source asset links * docs: use keywords and title * docs: remove unused function * add query parameters
1 parent a591144 commit 89dc15c

File tree

7 files changed

+798
-258
lines changed

7 files changed

+798
-258
lines changed

‎build/loaders/component-example-loader.js

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
const sass = require('node-sass')
2-
const pretty = require('pretty')
3-
const prettier = require('prettier')
41
const path = require('path')
52
const compiler = require('vue-template-compiler')
63
const { resolvePath } = require('../config')
@@ -12,26 +9,6 @@ function camelCaseToDash (str) {
129
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
1310
}
1411

15-
function getComponentScript (script) {
16-
return getIndentedSource(`
17-
Vue.use(VueMaterial.default)
18-
19-
${script}
20-
21-
const app = new Vue(example)
22-
23-
app.$mount('#app')
24-
`)
25-
}
26-
27-
function getComponentTemplate (template) {
28-
return pretty(`
29-
<div id="app">
30-
${template}
31-
</div>
32-
`)
33-
}
34-
3512
module.exports = function (source) {
3613
this.cacheable && this.cacheable()
3714

@@ -55,40 +32,6 @@ module.exports = function (source) {
5532
}
5633
})
5734

58-
let { script, template, style } = parsedTags
59-
60-
if (style) {
61-
style = style.replace(/~vue-material/g, '.')
62-
63-
const { css } = sass.renderSync({
64-
data: style,
65-
includePaths: [resolvePath('src')],
66-
outputStyle: 'expanded'
67-
})
68-
69-
style = css.toString('utf8')
70-
}
71-
72-
if (template) {
73-
template = template.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
74-
template = getComponentTemplate(template)
75-
}
76-
77-
if (script) {
78-
let newScript = null
79-
80-
script = script.replace('export default ', 'const example = ')
81-
script = getComponentScript(script)
82-
83-
try {
84-
newScript = transpile(script)
85-
} catch (e) {
86-
newScript = script
87-
}
88-
89-
script = prettier.format(newScript, { semi: false })
90-
}
91-
9235
const code = `
9336
const Vue = require('vue');
9437
const CodeLoading = require('docs/app/components/CodeLoading');
@@ -105,10 +48,7 @@ module.exports = function (source) {
10548
component.options.examples = component.options.examples || {};
10649
component.options.examples['${fileName}'] = {
10750
name: '${fileName}',
108-
source: ${JSON.stringify(source)},
109-
template: ${JSON.stringify(template)},
110-
script: ${JSON.stringify(script)},
111-
style: ${JSON.stringify(style)}
51+
source: ${JSON.stringify(source)}
11252
}
11353
}`
11454

‎docs/app/components/CodeExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<md-icon>code</md-icon>
77
<md-tooltip md-theme="default">Code</md-tooltip>
88
</md-button>
9-
<codepen-edit :component="component" v-if="component.name" />
9+
<codesandbox-edit :component="component" :title="title" v-if="component.name" />
1010
</md-toolbar>
1111

1212
<transition name="block">

‎docs/app/components/CodepenEdit.vue

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎docs/app/components/CodesandboxEdit.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<form class="codesandbox-edit" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
3+
<md-button type="submit" class="md-icon-button md-dense">
4+
<md-icon>launch</md-icon>
5+
<md-tooltip md-theme="default">Open in sandbox</md-tooltip>
6+
</md-button>
7+
8+
<input type="hidden" name="parameters" v-model="parameters">
9+
<input type="hidden" name="query" value="module=App.vue">
10+
</form>
11+
</template>
12+
13+
<script>
14+
15+
const html = `
16+
<!DOCTYPE html>
17+
<html>
18+
19+
<head>
20+
<meta charset="utf-8">
21+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
22+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
23+
<title>CodeSandbox Vue Material</title>
24+
</head>
25+
26+
<body>
27+
<div id="app"></div>
28+
<!-- built files will be auto injected -->
29+
</body>
30+
31+
</html>
32+
`
33+
const index = `
34+
import Vue from 'vue'
35+
import App from './App'
36+
37+
Vue.config.productionTip = false
38+
39+
import VueMaterial from 'vue-material'
40+
import 'vue-material/dist/vue-material.min.css'
41+
import 'vue-material/dist/theme/default.css'
42+
43+
Vue.use(VueMaterial)
44+
45+
new Vue({
46+
el: '#app',
47+
components: { App },
48+
template: '<App/>'
49+
})
50+
`
51+
52+
import { getParameters } from "codesandbox/lib/api/define";
53+
54+
export default {
55+
name: 'CodesandboxEdit',
56+
props: {
57+
component: Object,
58+
title: String
59+
},
60+
computed: {
61+
source () {
62+
return this.component.source.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
63+
},
64+
parameters () {
65+
return getParameters({
66+
files: {
67+
"package.json": {
68+
content: {
69+
name: `Vue Material - ${this.title}`,
70+
keywords: [
71+
"vue-material",
72+
"material-design",
73+
"vue"
74+
],
75+
dependencies: {
76+
vue: "latest",
77+
"vue-material": "latest"
78+
}
79+
}
80+
},
81+
"index.js": {
82+
content: index
83+
},
84+
"index.html": {
85+
content: html
86+
},
87+
"App.vue": {
88+
content: this.source
89+
},
90+
}
91+
})
92+
}
93+
}
94+
}
95+
</script>
96+
97+
<style lang="scss" scoped>
98+
.codesandbox-edit {
99+
.md-button {
100+
margin-right: 0;
101+
102+
.md-icon {
103+
color: #fff;
104+
}
105+
}
106+
}
107+
</style>

‎docs/app/components/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import LogoVueMaterial from './LogoVueMaterial'
66
import CodeLoading from './CodeLoading'
77
import CodeBlock from './CodeBlock'
88
import CodeExample from './CodeExample'
9-
import CodepenEdit from './CodepenEdit'
9+
import CodesandboxEdit from './CodesandboxEdit'
1010
import GridLayout from './GridLayout'
1111
import GridLayoutItem from './GridLayoutItem'
1212
import ApiItem from './ApiItem'
@@ -19,7 +19,7 @@ Vue.component(LogoVueMaterial.name, LogoVueMaterial)
1919
Vue.component(CodeLoading.name, CodeLoading)
2020
Vue.component(CodeBlock.name, CodeBlock)
2121
Vue.component(CodeExample.name, CodeExample)
22-
Vue.component(CodepenEdit.name, CodepenEdit)
22+
Vue.component(CodesandboxEdit.name, CodesandboxEdit)
2323
Vue.component(GridLayout.name, GridLayout)
2424
Vue.component(GridLayoutItem.name, GridLayoutItem)
2525
Vue.component(ApiItem.name, ApiItem)

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"babel-preset-stage-2": "^6.24.1",
5757
"chalk": "^2.3.0",
5858
"clipboard": "^1.7.1",
59+
"codesandbox": "^1.2.2",
5960
"commitizen": "^2.9.6",
6061
"concat": "^1.0.3",
6162
"connect-history-api-fallback": "^1.5.0",

0 commit comments

Comments
 (0)