Merge branch 'master' into dropdown

Author: ulivz

README.md

@@ -34,6 +34,13 @@ VuePress is still a work in progress. There are a few things that it currently d
 
 Contributions are welcome!
 
+## Development
+
+``` bash
+npm install
+npm run dev # serves VuePress' own docs with itself
+```
+
 ## License
 
 MIT

bin/vuepress.js

@@ -11,19 +11,19 @@ program
   .usage('<command> [options]')
 
 program
-  .command('dev <targetDir>')
+  .command('dev [targetDir]')
   .description('start development server')
   .option('-p, --port <port>', 'use specified port (default: 8080)')
-  .action((dir, { port }) => {
+  .action((dir = '.', { port }) => {
     wrapCommand(dev)(path.resolve(dir), { port })
   })
 
 program
-  .command('build <targetDir>')
+  .command('build [targetDir]')
   .description('build dir as static site')
   .option('-d, --dest <outDir>', 'specify build output dir (default: .vuepress/dist)')
   .option('--debug', 'build in development mode for debugging')
-  .action((dir, { debug, outDir }) => {
+  .action((dir = '.', { debug, outDir }) => {
     wrapCommand(build)(path.resolve(dir), { debug, outDir })
   })
 

docs/README.md

@@ -20,11 +20,11 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
 npm install -g vuepress
 
 # create a markdown file
-echo "# Hello VuePress!" > README.md
+echo "# Hello VuePress" > README.md
 
 # start writing
-vuepress dev .
+vuepress dev
 
 # build to static files
-vuepress build .
+vuepress build
 ```

docs/guide/README.md

@@ -16,7 +16,7 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m
 
 - [Built-in markdown extensions](./markdown.md) optimized for technical documentation
 - [Ability to leverage Vue inside markdown files](./using-vue.md)
-- [Vue-powered custom theme system](./custom-themes)
+- [Vue-powered custom theme system](./custom-themes.md)
 - PWA Support
 - Google Analytics Integration
 - A default theme with:

docs/guide/assets.md

@@ -5,16 +5,30 @@
 All markdown files are compiled into Vue components and processed by webpack, therefore you can and **should prefer** referencing any asset using relative URLs:
 
 ``` md
-![An image][./image.png]
+![An image](./image.png)
 ```
 
 This would work the same way as in `*.vue` file templates. The image will be processed with `url-loader` and `file-loader`, and copied to appropriate locations in the generated static build.
 
 In addition, you can use the `~` prefix to explicitly indicate this is a webpack module request, allowing you to reference files with webpack aliases or from npm dependencies:
 
 ``` md
-![Image from alias][~@assets/image.png]
-![Image from dependency][~some-dependency/image.png]
+![Image from alias](~@alias/image.png)
+![Image from dependency](~some-dependency/image.png)
+```
+
+webpack aliases can be configured via [configureWebpack](/config/#configurewebpack) in `.vuepress/config.js`. Example:
+
+``` js
+module.exports = {
+  configurewebpack: {
+    resolve: {
+      alias: {
+        '@alias': 'path/to/some/dir'
+      }
+    }
+  }
+}
 ```
 
 ## Public Files

docs/guide/getting-started.md

@@ -9,13 +9,13 @@ If you just want to play around with VuePress, you can install it globally:
 npm install -g vuepress
 
 # create a markdown file
-echo "# Hello VuePress!" > index.md
+echo "# Hello VuePress" > README.md
 
 # start writing
-vuepress dev .
+vuepress dev
 
 # build
-vuepress build .
+vuepress build
 ```
 
 ## Inside an Existing Project

docs/guide/markdown.md

@@ -167,7 +167,7 @@ export default {
 
 ## Advanced Configuration
 
-VuePress uses [markdown-it]() as the markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vuepress/config.js`:
+VuePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vuepress/config.js`:
 
 ``` js
 module.exports = {

docs/guide/using-vue.md

@@ -123,7 +123,7 @@ Make sure a custom component's names either contains a hyphen or is in PascalCas
 
 ## Script & Style Hoisting
 
-Sometimes you may need to apply some JavaScript or CSS only to the current page. In those case you can directly write root-level `<script>` or `<style>` blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component.
+Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases you can directly write root-level `<script>` or `<style>` blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component.
 
 <p class="demo" :class="$style.example"></p>
 

lib/build.js

@@ -5,7 +5,9 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   const path = require('path')
   const chalk = require('chalk')
   const webpack = require('webpack')
+  const readline = require('readline')
   const { promisify } = require('util')
+  const escape = require('escape-html')
   const rimraf = promisify(require('rimraf'))
   const mkdirp = promisify(require('mkdirp'))
   const readFile = promisify(fs.readFile)
@@ -17,6 +19,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   const { createBundleRenderer } = require('vue-server-renderer')
   const { normalizeHeadTag, applyUserWebpackConfig } = require('./util')
 
+  process.stdout.write('Extracting site metadata...')
   const options = await prepare(sourceDir)
   if (cliOptions.outDir) {
     options.outDir = cliOptions.outDir
@@ -28,6 +31,9 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   let clientConfig = createClientConfig(options, cliOptions).toConfig()
   let serverConfig = createServerConfig(options, cliOptions).toConfig()
 
+  // disable uglify for server
+  serverConfig.optimization = { minimizer: [] }
+
   // apply user config...
   const userConfig = options.siteConfig.configureWebpack
   if (userConfig) {
@@ -53,7 +59,6 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   const renderer = createBundleRenderer(serverBundle, {
     clientManifest,
     runInNewContext: false,
-    // shouldPrefetch: () => false,
     inject: false,
     template: fs.readFileSync(path.resolve(__dirname, 'app/index.ssr.html'), 'utf-8')
   })
@@ -64,14 +69,21 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
     .join('\n  ')
 
   // render pages
-  await Promise.all(options.siteData.pages.map(renderPage))
+  console.log('Rendering static HTML...')
+  for (const page of options.siteData.pages) {
+    await renderPage(page)
+  }
 
   // if the user does not have a custom 404.md, generate the theme's default
   if (!options.siteData.pages.some(p => p.path === '/404.html')) {
     await renderPage({ path: '/404.html' })
   }
 
+  readline.clearLine(process.stdout, 0)
+  readline.cursorTo(process.stdout, 0)
+
   if (options.siteConfig.serviceWorker) {
+    console.log('Generating service worker...')
     const wbb = require('workbox-build')
     wbb.generateSW({
       swDest: path.resolve(outDir, 'service-worker.js'),
@@ -112,16 +124,19 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   function renderAttrs (attrs = {}) {
     const keys = Object.keys(attrs)
     if (keys.length) {
-      return ' ' + keys.map(name => `${name}="${attrs[name]}"`).join(' ')
+      return ' ' + keys.map(name => `${name}="${escape(attrs[name])}"`).join(' ')
     } else {
       return ''
     }
   }
 
   async function renderPage (page) {
     const pagePath = page.path
-    const pageMeta = renderPageMeta(page.frontmatter && page.frontmatter.meta)
+    readline.clearLine(process.stdout, 0)
+    readline.cursorTo(process.stdout, 0)
+    process.stdout.write(`Rendering page: ${pagePath}`)
 
+    const pageMeta = renderPageMeta(page.frontmatter && page.frontmatter.meta)
     const context = {
       url: pagePath,
       userHeadTags,
@@ -135,8 +150,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
       html = await renderer.renderToString(context)
     } catch (e) {
       console.error(chalk.red(`Error rendering ${pagePath}:`))
-      console.error(e.stack)
-      return
+      throw e
     }
     const filename = pagePath.replace(/\/$/, '/index.html').replace(/^\//, '')
     const filePath = path.resolve(outDir, filename)
@@ -149,7 +163,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
     return meta.map(m => {
       let res = `<meta`
       Object.keys(m).forEach(key => {
-        res += ` ${key}="${m[key]}"`
+        res += ` ${key}="${escape(m[key])}"`
       })
       return res + `>`
     }).join('')

lib/default-theme/NavLinks.vue

@@ -34,7 +34,7 @@
       class="github-link"
       target="_blank"
       rel="noopener">
-      Github
+      GitHub
       <OutboundLink/>
     </a>
   </nav>

lib/default-theme/SidebarLink.vue

@@ -14,7 +14,9 @@ export default {
       ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
       : selfActive
     const link = renderLink(h, item.path, item.title || item.path, active)
-    const configDepth = $page.frontmatter.sidebarDepth || $site.themeConfig.sidebarDepth
+    const configDepth = $page.frontmatter.sidebarDepth != null
+      ? $page.frontmatter.sidebarDepth
+      : $site.themeConfig.sidebarDepth
     const maxDepth = configDepth == null ? 1 : configDepth
     if (item.type === 'auto') {
       return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
@@ -47,7 +49,7 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
     const active = isActive(route, path + '#' + c.slug)
     return h('li', { class: 'sidebar-sub-header' }, [
       renderLink(h, '#' + c.slug, c.title, active),
-      ...renderChildren(h, c.children, path, route, maxDepth, depth + 1)
+      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
     ])
   }))
 }

lib/default-theme/styles/code.styl

@@ -34,7 +34,7 @@
   .highlighted-line
     background-color rgba(0, 0, 0, 66%)
     display block
-    margin 0.1rem -1.8rem 0
+    margin 0.1rem -1.5rem 0
     padding 0.1rem 1.8rem
 
 pre[class="language-js"], pre[class="language-javascript"]

lib/default-theme/styles/mobile.styl

@@ -29,8 +29,9 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 @media (max-width: $MQMobileNarrow)
   h1
     font-size 1.9rem
-  pre, pre[class*="language-"]
-    margin 0.85rem -1.5rem
-    border-radius 0
   .content:not(.custom)
     padding 1.5rem
+  .content
+    pre, pre[class*="language-"]
+      margin 0.85rem -1.5rem
+      border-radius 0

lib/default-theme/styles/theme.styl

@@ -132,7 +132,7 @@ table
 
 tr
   border-top 1px solid #dfe2e5
-  &:nth-child(2)
+  &:nth-child(2n)
     background-color #f6f8fa
 
 th, td

lib/dev.js

@@ -17,6 +17,7 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
   const { applyUserWebpackConfig } = require('./util')
   const { frontmatterEmitter } = require('./webpack/markdownLoader')
 
+  process.stdout.write('Extracting site metadata...')
   const options = await prepare(sourceDir)
 
   // setup watchers to update options and dynamically generated files

lib/markdown/highlight.js

@@ -1,11 +1,15 @@
 const chalk = require('chalk')
 const prism = require('prismjs')
 const loadLanguages = require('prismjs/components/index')
+const escapeHtml = require('escape-html')
 
 // required to make embedded highlighting work...
 loadLanguages(['markup', 'css', 'javascript'])
 
 function wrap (code, lang) {
+  if (lang === 'text') {
+    code = escapeHtml(code)
+  }
   return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
 }