progress

Author: yyx990803

.gitignore

@@ -2,3 +2,5 @@
 node_modules
 *.log
 .temp
+docs/_dist
+TODOs.md

bin/vuepress.js

@@ -1,4 +1,6 @@
 const path = require('path')
 const { build } = require('../lib')
 
-build(path.resolve(__dirname, '../docs'))
+build(path.resolve(__dirname, '../docs')).catch(err => {
+  console.log(err)
+})

docs/_components/demo-1.vue

@@ -8,7 +8,7 @@
 export default {
   data () {
     return {
-      msg: 'hello'
+      msg: 'hello this is a dynamic demo'
     }
   }
 }

docs/kitchen-sink.md renamed to docs/kitchen/sink.md

@@ -1,11 +1,11 @@
 # Custom Layout
 
-VuePress uses Vue single file components for custom layouts. To use a custom layout, create a `_layout` directory under `docs`, and then create a `Layout.vue` file:
+VuePress uses Vue single file components for custom layouts. To use a custom layout, create a `_theme` directory under `docs`, and then create a `App.vue` file:
 
-```
+``` bash
 - docs
-  - _layout
-    - Layout.vue
+  - _theme
+    - App.vue
 ```
 
 From there it's the same as developing a normal Vue application. There are only a few special things to note:

docs/layout.md

@@ -16,13 +16,12 @@ import routes from './.temp/routes'
 
 const router = new Router({
   mode: 'history',
-  scrollBehavior: () => ({ y: 0 }),
   routes
 })
 
 // expose Vue Press data
 const g = typeof window !== 'undefined' ? window : global
-const $site = Vue.prototype.$site = g.VUE_PRESS_DATA
+const $site = Vue.prototype.$site = g.VUEPRESS_DATA
 
 Vue.mixin({
   computed: {
@@ -32,9 +31,18 @@ Vue.mixin({
   }
 })
 
+Vue.component('Content', {
+  functional: true,
+  render (h, { parent }) {
+    return h('page-' + parent.$page.name)
+  }
+})
+
 const app = new Vue({
   router,
-  render: h => h(Layout)
+  render (h) {
+    return h('router-view')
+  }
 })
 
 export { app, router }

lib/app/app.js

@@ -0,0 +1,114 @@
+<template>
+  <div id="container">
+    <ul>
+      <li v-for="page in $site.pages">
+        <router-link :to="page.path">{{ page.name }}</router-link>
+      </li>
+    </ul>
+    <Index v-if="$page.isIndex" />
+    <Page v-else />
+  </div>
+</template>
+
+<script>
+import nprogress from 'nprogress'
+import Index from './Index.vue'
+import Page from './Page.vue'
+
+export default {
+  components: { Index, Page },
+  mounted () {
+    nprogress.configure({ showSpinner: false })
+
+    this.$router.beforeEach((to, from, next) => {
+      nprogress.start()
+      next()
+    })
+
+    this.$router.afterEach(() => {
+      nprogress.done()
+    })
+  }
+}
+</script>
+
+<style>
+/*
+  Copied from nprogress since it doens't
+  allow programmatic configuration of color
+*/
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #41b883;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #41b883, 0 0 5px #41b883;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #41b883;
+  border-left-color: #41b883;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

lib/default-layout/Layout.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index">
+    <h1>This is the Index</h1>
     <Content/>
   </div>
 </template>

lib/default-theme/App.vue

@@ -1,8 +1,11 @@
 const fs = require('fs')
 const path = require('path')
+const rimraf = require('rimraf')
 const globby = require('globby')
 const webpack = require('webpack')
 const tempPath = path.resolve(__dirname, 'app/.temp')
+const createClientConfig = require('./webpack/clientConfig')
+const createServerConfig = require('./webpack/serverConfig')
 
 exports.build = async function build (sourceDir) {
   // 1. loadConfig
@@ -14,30 +17,63 @@ exports.build = async function build (sourceDir) {
   // 3. generate routes
   await genRoutesFile(sourceDir)
 
-  // 4. build
+  // 4. client build
+  const clientConfig = createClientConfig({ sourceDir }).toConfig()
+  return new Promise((resolve, reject) => {
+    rimraf.sync(clientConfig.output.path)
+    webpack(clientConfig, (err, stats) => {
+      if (err) {
+        return reject(err)
+      }
+      if (stats.hasErrors()) {
+        return reject(stats.toJson().errors)
+      }
+      resolve()
+    })
+  })
 }
 
 async function genComponentRegistrationFile (sourceDir) {
-  const componentDir = path.resolve(sourceDir, '_components')
-  if (!fs.existsSync(componentDir)) {
-    return
-  }
+  const pages = await globby(['**/*.md'], { cwd: sourceDir })
+  const components = (await resolveComponents(sourceDir)) || []
 
-  const components = await globby(['*.vue'], { cwd: componentDir })
-  if (!components.length) {
-    return
-  }
-
-  const file = `import Vue from 'vue'\n` + components.map(file => {
-    const name = file.replace(/\.vue$/, '')
-    const absolutePath = path.resolve(componentDir, file)
+  function genImport (file) {
+    const isPage = /\.md$/.test(file)
+    const name = (isPage ? `page-` : ``) + file.replace(/\.(vue|md)$/, '').replace(/\/|\\/, '-')
+    const baseDir = isPage ? sourceDir : path.resolve(sourceDir, '_components')
+    const absolutePath = path.resolve(baseDir, file)
     const code = `Vue.component(${JSON.stringify(name)}, () => import(${JSON.stringify(absolutePath)}))`
     return code
-  }).join('\n')
+  }
 
+  const all = [...pages, ...components]
+  const file = `import Vue from 'vue'\n` + all.map(genImport).join('\n')
   fs.writeFileSync(path.join(tempPath, 'register-components.js'), file)
 }
 
-async function genRoutesFile () {
+async function resolveComponents (sourceDir) {
+  const componentDir = path.resolve(sourceDir, '_components')
+  if (!fs.existsSync(componentDir)) {
+    return
+  }
+  return await globby(['*.vue'], { cwd: componentDir })
+}
+
+async function genRoutesFile (sourceDir) {
+  const pages = await globby(['**/*.md'], { cwd: sourceDir })
+
+  function genRoute (file) {
+    const name = file.replace(/\.md$/, '')
+    const code = `
+    {
+      path: ${JSON.stringify('/' + (name === 'index' ? '' : name))},
+      component: Layout
+    }`
+    return code
+  }
 
+  const file =
+    `import Layout from '~layout'\n` +
+    `export default [${pages.map(genRoute).join(',')}\n]`
+  fs.writeFileSync(path.join(tempPath, 'routes.js'), file)
 }