docs: use codesandbox for examples (#1573)

* docs: use codesandbox for examples * docs: replace source asset links * docs: use keywords and title * docs: remove unused function * add query parameters
vuematerial · Mar 7, 2018 · 89dc15c · 89dc15c
1 parent a591144
commit 89dc15c
Show file tree

Hide file tree

Showing 7 changed files with 798 additions and 258 deletions.
diff --git a/build/loaders/component-example-loader.js b/build/loaders/component-example-loader.js
@@ -1,6 +1,3 @@
-const sass = require('node-sass')
-const pretty = require('pretty')
-const prettier = require('prettier')
 const path = require('path')
 const compiler = require('vue-template-compiler')
 const { resolvePath } = require('../config')
@@ -12,26 +9,6 @@ function camelCaseToDash (str) {
   return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
 }
 
-function getComponentScript (script) {
-  return getIndentedSource(`
-    Vue.use(VueMaterial.default)
-
-    ${script}
-
-    const app = new Vue(example)
-
-    app.$mount('#app')
-  `)
-}
-
-function getComponentTemplate (template) {
-  return pretty(`
-    <div id="app">
-      ${template}
-    </div>
-  `)
-}
-
 module.exports = function (source) {
   this.cacheable && this.cacheable()
 
@@ -55,40 +32,6 @@ module.exports = function (source) {
     }
   })
 
-  let { script, template, style } = parsedTags
-
-  if (style) {
-    style = style.replace(/~vue-material/g, '.')
-
-    const { css } = sass.renderSync({
-      data: style,
-      includePaths: [resolvePath('src')],
-      outputStyle: 'expanded'
-    })
-
-    style = css.toString('utf8')
-  }
-
-  if (template) {
-    template = template.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
-    template = getComponentTemplate(template)
-  }
-
-  if (script) {
-    let newScript = null
-
-    script = script.replace('export default ', 'const example = ')
-    script = getComponentScript(script)
-
-    try {
-      newScript = transpile(script)
-    } catch (e) {
-      newScript = script
-    }
-
-    script = prettier.format(newScript, { semi: false })
-  }
-
   const code = `
     const Vue = require('vue');
     const CodeLoading = require('docs/app/components/CodeLoading');
@@ -105,10 +48,7 @@ module.exports = function (source) {
       component.options.examples = component.options.examples || {};
       component.options.examples['${fileName}'] = {
         name: '${fileName}',
-        source: ${JSON.stringify(source)},
-        template: ${JSON.stringify(template)},
-        script: ${JSON.stringify(script)},
-        style: ${JSON.stringify(style)}
+        source: ${JSON.stringify(source)}
       }
     }`
 

diff --git a/docs/app/components/CodeExample.vue b/docs/app/components/CodeExample.vue
@@ -6,7 +6,7 @@
         <md-icon>code</md-icon>
         <md-tooltip md-theme="default">Code</md-tooltip>
       </md-button>
-      <codepen-edit :component="component" v-if="component.name" />
+      <codesandbox-edit :component="component" :title="title" v-if="component.name" />
     </md-toolbar>
 
     <transition name="block">

diff --git a/docs/app/components/CodepenEdit.vue b/docs/app/components/CodepenEdit.vue
diff --git a/docs/app/components/CodesandboxEdit.vue b/docs/app/components/CodesandboxEdit.vue
@@ -0,0 +1,107 @@
+<template>
+  <form class="codesandbox-edit" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
+    <md-button type="submit" class="md-icon-button md-dense">
+      <md-icon>launch</md-icon>
+      <md-tooltip md-theme="default">Open in sandbox</md-tooltip>
+    </md-button>
+
+    <input type="hidden" name="parameters" v-model="parameters">
+    <input type="hidden" name="query" value="module=App.vue">
+  </form>
+</template>
+
+<script>
+
+  const html = `
+  <!DOCTYPE html>
+  <html>
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
+    <title>CodeSandbox Vue Material</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+
+  </html>
+  `
+  const index = `
+  import Vue from 'vue'
+  import App from './App'
+
+  Vue.config.productionTip = false
+
+  import VueMaterial from 'vue-material'
+  import 'vue-material/dist/vue-material.min.css'
+  import 'vue-material/dist/theme/default.css'
+
+  Vue.use(VueMaterial)
+
+  new Vue({
+    el: '#app',
+    components: { App },
+    template: '<App/>'
+  })
+  `
+
+  import { getParameters } from "codesandbox/lib/api/define";
+
+  export default {
+    name: 'CodesandboxEdit',
+    props: {
+      component: Object,
+      title: String
+    },
+    computed: {
+      source () {
+        return this.component.source.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
+      },
+      parameters () {
+        return getParameters({
+          files: {
+            "package.json": {
+              content: {
+                name: `Vue Material - ${this.title}`,
+                keywords: [
+                  "vue-material",
+                  "material-design",
+                  "vue"
+                ],
+                dependencies: {
+                  vue: "latest",
+                  "vue-material": "latest"
+                }
+              }
+            },
+            "index.js": {
+              content: index
+            },
+            "index.html": {
+              content: html
+            },
+            "App.vue": {
+              content: this.source
+            },
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .codesandbox-edit {
+    .md-button {
+      margin-right: 0;
+
+      .md-icon {
+        color: #fff;
+      }
+    }
+  }
+</style>
diff --git a/docs/app/components/index.js b/docs/app/components/index.js
@@ -6,7 +6,7 @@ import LogoVueMaterial from './LogoVueMaterial'
 import CodeLoading from './CodeLoading'
 import CodeBlock from './CodeBlock'
 import CodeExample from './CodeExample'
-import CodepenEdit from './CodepenEdit'
+import CodesandboxEdit from './CodesandboxEdit'
 import GridLayout from './GridLayout'
 import GridLayoutItem from './GridLayoutItem'
 import ApiItem from './ApiItem'
@@ -19,7 +19,7 @@ Vue.component(LogoVueMaterial.name, LogoVueMaterial)
 Vue.component(CodeLoading.name, CodeLoading)
 Vue.component(CodeBlock.name, CodeBlock)
 Vue.component(CodeExample.name, CodeExample)
-Vue.component(CodepenEdit.name, CodepenEdit)
+Vue.component(CodesandboxEdit.name, CodesandboxEdit)
 Vue.component(GridLayout.name, GridLayout)
 Vue.component(GridLayoutItem.name, GridLayoutItem)
 Vue.component(ApiItem.name, ApiItem)

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "chalk": "^2.3.0",
     "clipboard": "^1.7.1",
+    "codesandbox": "^1.2.2",
     "commitizen": "^2.9.6",
     "concat": "^1.0.3",
     "connect-history-api-fallback": "^1.5.0",