fix(documentation): Refactor docs

.circleci/config.yml

@@ -200,16 +200,6 @@ jobs:
       - run: yarn global add greenkeeper-lockfile@1
       - run: greenkeeper-lockfile-upload
 
-  deploy-preview:
-    <<: *defaults-js
-    name: Deploying Surge.sh Preview
-    steps:
-      - attach_workspace:
-          at: ~/podlove-web-player
-      - restore-cache: *yarn-restore-cache
-      - run: yarn global add surge-preview
-      - run: surge-preview
-
   deploy-staging:
     <<: *defaults-js
     name: Deploying to podlove-player.surge.sh

docs/.vuepress/components/ColorPicker.vue

@@ -1,17 +1,18 @@
 <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" />
+    <ClientOnly>
+      <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>
+    </ClientOnly>
   </div>
 </template>
 

docs/.vuepress/components/JsonEditor.vue

@@ -3,8 +3,6 @@
 </template>
 
 <script>
-  import Editor from 'jsoneditor/dist/jsoneditor.min'
-
   export default {
     name: 'json-editor',
     props: ['json', 'height', 'mode'],
@@ -16,19 +14,21 @@
       }
     },
     mounted () {
-      this.editor = new Editor(this.$el, {
-        search: false,
-        onChangeText: this.onChange.bind(this),
-        sortObjectKeys: false,
-        mode: this.mode || 'code',
-        statusBar: false
-      })
+      import('jsoneditor/dist/jsoneditor.min').then(Editor => {
+        this.editor = new Editor.default(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)
+        this.$emit('ready', this.editor)
+        this.editor.set(this.json)
+      })
     },
     beforeDestroy() {
-      this.editor.destroy()
+      this.editor && this.editor.destroy()
       this.editor = null
     }
   }
@@ -46,4 +46,8 @@
   .jsoneditor-menu {
     display: none;
   }
+
+  .ace_editor {
+    position: static;
+  }
 </style>

docs/.vuepress/components/Playground.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <podlove-web-player :config="example" @ready="initPlayer" />
+
+    <h4>Config</h4>
     <json-editor :json="example" @update="updateConfig" height="500px" />
   </div>
 </template>

docs/.vuepress/components/StoreDispatches.vue → docs/.vuepress/components/StoreDispatch.vue

@@ -118,6 +118,8 @@
   }]
 
   export default {
+    name: 'store-dispatch',
+
     data () {
       return {
         store: null,

docs/.vuepress/components/StoreSubscribe.vue

@@ -9,6 +9,8 @@
   import example from '../public/fixtures/example.json'
 
   export default {
+    name: 'store-subscribe',
+
     data () {
       return {
         example,

docs/.vuepress/config.js

@@ -2,6 +2,7 @@ const base = process.env.BASE || ''
 
 module.exports = {
   title: 'VuePress Millidocs',
+  base,
   description: 'Simple documentation theme featuring Milligram CSS framework',
   theme: 'millidocs',
   head: [
@@ -14,14 +15,5 @@ module.exports = {
       permalink: false,
       permalinkBefore: false
     }
-  },
-  // configureWebpack: {
-  //   resolve: {
-  //     alias: {
-  //       '@assets': resolve('blog', 'assets'),
-  //       '@theme': resolve('blog', '.vuepress', 'theme'),
-  //       '@styles': resolve('blog', '.vuepress', 'theme', 'styles')
-  //     }
-  //   }
-  // },
+  }
 }

docs/.vuepress/public/fixtures/example.json

@@ -167,6 +167,20 @@
       "image": ""
     }
   ],
+  "visibleComponents": [
+    "tabInfo",
+    "tabChapters",
+    "tabDownload",
+    "tabAudio",
+    "tabShare",
+    "poster",
+    "showTitle",
+    "episodeTitle",
+    "subtitle",
+    "progressbar",
+    "controlSteppers",
+    "controlChapters"
+  ],
   "contributors": [
     {
       "name": "Tim Pritlove",

docs/installation.md

@@ -41,4 +41,4 @@ To integrate the player you first have to install tha package:
 npm install @podlove/podlove-web-player --save
 ```
 
-Afterwards move the player assets to a public folder of some webserver. By default the player will try to load further chunks from the webserver base. If the player files are located in a subpath you have to adapt the `reference.base` accordingly (see [config]({{ 'config.html' | relative_url }}))
+Afterwards move the player assets to a public folder of some webserver. By default the player will try to load further chunks from the webserver base. If the player files are located in a subpath you have to adapt the `reference.base` accordingly (see [config]({{ $withBase('config.html') }})

docs/player-dispatches.md

@@ -20,4 +20,4 @@ You can find a complete list of available types in the [types definition](https:
 
 ## Dispatching to the Player
 
-<store-dispatches />
+<store-dispatch />

now.json

@@ -0,0 +1,3 @@
+{
+  "alias": "podlove-web-player"
+}

package.json

@@ -21,13 +21,14 @@
   ],
   "scripts": {
     "dist:clean": "mkdir -p dist && rm -rf dist/*",
-    "docs:install": "cd docs && bundle install",
     "docs:dev": "vuepress dev docs",
-    "docs:prod": "npm run docs:install && jekyll build --source docs --destination dist --config docs/_config_prd.yml && cp -R docs/fixtures/* dist/fixtures",
+    "docs:prod": "vuepress build docs --dest dist/ && npm run webpack:build",
     "webpack:dev": "webpack-dev-server --progress --config build/webpack.config.dev.js",
     "webpack:build": "webpack --config build/webpack.config.prod.js",
     "webpack:cdn": "webpack --config build/webpack.config.cdn.js",
     "build": "npm run webpack:build",
+    "now-build": "npm run docs:prod && npm run build",
+    "now-start": "serve dist/",
     "build:cdn": "npm run webpack:cdn",
     "dev": "node scripts/dev.js",
     "test": "npm run test:prepare && NODE_ENV=AVA nyc ava && nyc report --reporter=html",
@@ -73,6 +74,7 @@
     "redux": "3.7.2",
     "redux-actions": "2.6.1",
     "redux-vuex": "^0.1.1",
+    "serve": "^10.0.0",
     "superagent": "3.8.3",
     "v-tooltip": "2.0.0-rc.33",
     "vue": "2.5.17",