feat(docs): Updates documentation system

.gitignore

@@ -7,6 +7,7 @@
 !.travis.yml
 !.babelrc
 !.circleci
+!.vuepress
 
 coverage
 

build/blocks/dev-server.js

@@ -1,12 +1,13 @@
 const { distDir } = require('./dir')
 
-module.exports = () => ({
+module.exports = (port = 8080) => ({
   historyApiFallback: true,
   noInfo: true,
   overlay: true,
   inline: true,
   hot: true,
   disableHostCheck: true,
   host: '0.0.0.0',
-  contentBase: distDir
+  contentBase: distDir,
+  port
 })

build/blocks/entry.js

@@ -1,10 +1,21 @@
 const path = require('path')
 const { sourceDir, prepend } = require('./dir')
 
-module.exports = prefix => ({
+const prod = prefix => ({
   embed: path.resolve(sourceDir, 'embed', 'embed.js'),
   'extensions/external-events': path.resolve(sourceDir, 'extensions', 'external-events.js'),
   [prepend('window', prefix)]: path.resolve(sourceDir, 'embed', 'window.js'),
   [prepend('share', prefix)]: path.resolve(sourceDir, 'embed', 'share.js'),
   [prepend('vendor', prefix)]: path.resolve(sourceDir, 'vendor.js')
 })
+
+const dev = () => ({
+  embed: path.resolve(sourceDir, 'embed', 'embed.js'),
+  'extensions/external-events': path.resolve(sourceDir, 'extensions', 'external-events.js'),
+  window: path.resolve(sourceDir, 'embed', 'window.js'),
+  share: path.resolve(sourceDir, 'embed', 'share.js'),
+  vendor: path.resolve(sourceDir, 'vendor.js'),
+  example: path.resolve(sourceDir, 'statics', 'example', 'example.js')
+})
+
+module.exports = { prod, dev }

build/blocks/plugins.js

@@ -26,12 +26,22 @@ const base = base =>
     BASE: JSON.stringify(base)
   })
 
-const html = prefix => new HtmlWebpackPlugin({
+const shareHtml = prefix => new HtmlWebpackPlugin({
   filename: 'share.html',
   template: path.resolve(sourceDir, 'statics', 'share.html'),
   excludeChunks: [ 'embed', prepend('window', prefix) ]
 })
 
+const devHtml = (...files) => files.map(file =>
+  new HtmlWebpackPlugin({
+    filename: file,
+    template: path.resolve(sourceDir, 'statics', 'example', file),
+    chunksSortMode: 'none',
+    chunks: ['example', 'vendor', 'style', 'window'],
+    excludeChunks: ['embed', 'share']
+  })
+)
+
 const jarvis = (port = 1337) => new Jarvis({ port })
 
 const bundleAnalyzer = () => new BundleAnalyzerPlugin({
@@ -41,6 +51,10 @@ const bundleAnalyzer = () => new BundleAnalyzerPlugin({
 
 const hmr = () => new webpack.HotModuleReplacementPlugin()
 
+const env = mode => new webpack.DefinePlugin({
+  mode: JSON.stringify(mode)
+})
+
 module.exports = {
-  vue, css, minifyCss, version, base, html, jarvis, bundleAnalyzer, hmr
+  vue, css, minifyCss, version, base, shareHtml, devHtml, jarvis, bundleAnalyzer, hmr, env
 }

build/blocks/rules.js

@@ -1,8 +1,9 @@
+const { resolve } = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const autoprefixer = require('autoprefixer')
 const cssClean = require('postcss-clean')
 
-const { prepend } = require('./dir')
+const { prepend , sourceDir} = require('./dir')
 
 const vue = () => ({
   test: /\.vue$/,
@@ -57,6 +58,13 @@ const fonts = prefix => ({
   }
 })
 
+const examples = () => ({
+  test: /\.json$/,
+  include: [resolve(sourceDir, 'statics', 'example')],
+  type: 'javascript/auto',
+  loader: 'file-loader'
+})
+
 module.exports = {
-  vue, javascript, images, styles, fonts
+  vue, javascript, images, styles, fonts, examples
 }

build/webpack.config.cdn.js

@@ -5,7 +5,7 @@ const { entry, output, resolve, optimization, rules, plugins } = require('./bloc
 
 module.exports = {
   mode: 'production',
-  entry: entry(version),
+  entry: entry.prod(version),
   output: output(BASE),
 
   optimization: optimization(version),
@@ -28,6 +28,7 @@ module.exports = {
     plugins.minifyCss(),
     plugins.version(),
     plugins.base(`${BASE}${version}`),
-    plugins.html(version)
+    plugins.shareHtml(version),
+    plugins.env('production')
   ]
 }

build/webpack.config.dev.js

@@ -3,22 +3,23 @@ const { entry, output, resolve, devServer, rules, plugins, optimization } = requ
 module.exports = {
   mode: 'development',
 
-  entry: entry(),
+  entry: entry.dev(),
   output: output(),
   resolve: resolve(),
 
   optimization: optimization(),
 
   devtool: 'inline-source-map',
-  devServer: devServer(),
+  devServer: devServer(9002),
 
   module: {
     rules: [
       rules.vue(),
       rules.javascript(),
       rules.images(),
       rules.styles('dev'),
-      rules.fonts()
+      rules.fonts(),
+      rules.examples()
     ]
   },
 
@@ -28,6 +29,8 @@ module.exports = {
     plugins.jarvis(1337),
     plugins.bundleAnalyzer(),
     plugins.hmr(),
-    plugins.html()
+    plugins.shareHtml(),
+    ...plugins.devHtml('standalone.html'),
+    plugins.env('development')
   ]
 }

build/webpack.config.prod.js

@@ -2,7 +2,7 @@ const { entry, output, resolve, optimization, rules, plugins } = require('./bloc
 
 module.exports = {
   mode: 'production',
-  entry: entry(),
+  entry: entry.prod(),
   output: output(),
 
   optimization: optimization(),
@@ -25,6 +25,7 @@ module.exports = {
     plugins.minifyCss(),
     plugins.version(),
     plugins.base('.'),
-    plugins.html()
+    plugins.shareHtml(),
+    plugins.env('production')
   ]
 }

docs/.vuepress/components/ColorPicker.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="container">
+    <podlove-web-player :config="config" @ready="onReady"/>
+
+    <div class="row">
+      <div class="column">
+        <h4>Main</h4>
+        <picker v-model="main" />
+      </div>
+      <div class="column">
+        <h4>Highlight</h4>
+        <picker v-model="highlight" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { Chrome } from 'vue-color'
+  import PodloveWebPlayer from './PodloveWebPlayer.vue'
+
+  export default {
+    props: ['config'],
+    name: 'ColorPicker',
+    data() {
+      return {
+        main: '#2B8AC6',
+        highlight: '#FFFFFF'
+      }
+    },
+    components: {
+      'picker': Chrome,
+      PodloveWebPlayer
+    },
+    methods: {
+      onReady (store) {
+        this.store = store
+        this.updateColors()
+      },
+
+      updateColors () {
+        const main = this.main.hex8
+        const highlight = this.highlight.hex8
+
+        this.store.dispatch({
+          type: 'SET_THEME',
+          payload: {
+            main,
+            highlight
+          }
+        })
+      }
+    },
+    watch: {
+      main () {
+        this.updateColors()
+      },
+
+      highlight () {
+        this.updateColors()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .row {
+    margin-bottom: 1.5em;
+  }
+</style>
+

docs/.vuepress/components/JsonEditor.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="editor-container" :style="{ height: height || '150px' }"></div>
+</template>
+
+<script>
+  import Editor from 'jsoneditor/dist/jsoneditor.min'
+
+  export default {
+    name: 'json-editor',
+    props: ['json', 'height', 'mode'],
+    methods: {
+      onChange (text) {
+        try {
+          this.$emit('update', JSON.parse(text))
+        } catch (e) {}
+      }
+    },
+    mounted () {
+      this.editor = new Editor(this.$el, {
+        search: false,
+        onChangeText: this.onChange.bind(this),
+        sortObjectKeys: false,
+        mode: this.mode || 'code',
+        statusBar: false
+      })
+
+      this.$emit('ready', this.editor)
+      this.editor.set(this.json)
+    },
+    beforeDestroy() {
+      this.editor.destroy()
+      this.editor = null
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import '~jsoneditor/dist/jsoneditor.min.css';
+  @import '~milligram-scss/src/Color';
+
+  .jsoneditor {
+    border-color: $color-primary !important;
+    margin-bottom: 1.5em;
+  }
+
+  .jsoneditor-menu {
+    display: none;
+  }
+</style>

docs/.vuepress/components/Playground.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <podlove-web-player :config="example" @ready="initPlayer" />
+    <json-editor :json="example" @update="updateConfig" height="500px" />
+  </div>
+</template>
+
+<script>
+  import example from '../public/fixtures/example.json'
+
+  export default {
+    data () {
+      return {
+        example,
+        store: null
+      }
+    },
+
+    methods: {
+      initPlayer (store) {
+        this.store = store
+      },
+
+      updateConfig (payload) {
+        this.store.dispatch({
+          type: 'INIT',
+          payload
+        })
+      }
+    }
+  }
+</script>

docs/.vuepress/components/PodloveWebPlayer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="player" :id="id"></div>
+</template>
+
+<script>
+  export default {
+    name: 'PodloveWebPlayer',
+    props: ['config', 'mode', 'id'],
+    mounted: function () {
+      window.podlovePlayer(this.$el, this.config).then(store => {
+        this.$emit('ready', store)
+        return store
+      }).then(window.registerExternalEvents(this.id))
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .player {
+    margin-bottom: 1.5em;
+  }
+</style>