Merge branch 'master' into plugin

docs/config/README.md

@@ -109,6 +109,13 @@ Also, only enable this if you are able to deploy your site with SSL, since servi
 
 Specify locales for i18n support. For more details, see the guide on [Internationalization](../guide/i18n.md).
 
+### shouldPrefetch
+
+- Type: `Function`
+- Default: `() => true`
+
+A function to control what files should have `<link rel="preload">` resource hints generated. See [shouldPrefetch](https://ssr.vuejs.org/api/#shouldprefetch).
+
 ## Theming
 
 ### theme

docs/guide/markdown.md

@@ -224,6 +224,25 @@ export default {
 }
 ```
 
+## Import Code Snippets <Badge text="Experimental" type="warn"/> <Badge text="0.11.0+" type="tip"/>
+
+You can import code snippets from existing files via following syntax:
+
+**Input**
+
+```
+<<< @/test/markdown/fragments/snippet.js{2}
+```
+
+**Output**
+
+<<< @/test/markdown/fragments/snippet.js{2}
+
+::: tip
+  Since the import of the code snippets will be executed before webpack compilation, so you can't use the path alias in webpack. the default value of `@` is `process.cwd()`.
+:::
+
+
 ## Advanced Configuration
 
 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`:

docs/zh/config/README.md

@@ -108,6 +108,13 @@ module.exports = {
 
 提供多语言支持的语言配置。具体细节请查看 [多语言支持](../guide/i18n.md)。
 
+### shouldPrefetch
+
+- 类型: `Function`
+- 默认值: `() => true`
+
+一个函数，用来控制对于哪些文件，是需要生成 `<link rel="prefetch">` 资源提示的。请参考 [shouldPrefetch](https://ssr.vuejs.org/zh/api/#shouldpreload)。
+
 ## 主题
 
 ### theme

docs/zh/guide/markdown.md

@@ -222,6 +222,24 @@ export default {
 }
 ```
 
+## 导入代码段 <Badge text="Experimental" type="warn"/> <Badge text="0.11.0+" type="tip"/>
+
+你可以通过下述的语法导入已经存在的文件中的代码段：
+
+**Input**
+
+```
+<<< @/test/markdown/fragments/snippet.js{2}
+```
+
+**Output**
+
+<<< @/test/markdown/fragments/snippet.js{2}
+
+::: tip 注意
+  由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，此处的 `@` 默认值是 `process.cwd()`。
+:::
+
 ## 进阶配置
 
 VuePress 使用 [markdown-it](https://github.com/markdown-it/markdown-it) 来渲染 Markdown，上述大多数的拓展也都是通过自定义的插件实现的。想要进一步的话，你可以通过 `.vuepress/config.js` 的 `markdown` 选项，来对当前的 `markdown-it` 实例做一些自定义的配置：

lib/app/app.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Content from './Content'
 import OutboundLink from '../default-theme/OutboundLink.vue'
+import Badge from '../default-theme/Badge.vue'
 import ClientOnly from './ClientOnly'
 import dataMixin from './dataMixin'
 import store from './store'
@@ -30,6 +31,7 @@ Vue.mixin(dataMixin(siteData))
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
 Vue.component('OutboundLink', OutboundLink)
+Vue.component('Badge', Badge)
 // component for client-only content
 Vue.component('ClientOnly', ClientOnly)
 

lib/build.js

@@ -56,6 +56,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
     clientManifest,
     runInNewContext: false,
     inject: false,
+    shouldPrefetch: options.siteConfig.shouldPrefetch || (() => true),
     template: await fs.readFile(path.resolve(__dirname, 'app/index.ssr.html'), 'utf-8')
   })
 

lib/default-theme/Badge.vue

+<script>
+export default {
+  functional: true,
+  props: ['type', 'text'],
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type]
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.badge
+  display inline-block
+  vertical-align top
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius 9px
+  padding 0 5px
+  color white
+  margin-right 5px
+  &.tip
+    background-color #42b983
+  &.warning, &.warn
+    background-color darken(#ffe564, 35%)
+</style>

lib/default-theme/styles/theme.styl

@@ -4,6 +4,7 @@
 @require './custom-blocks'
 @require './arrow'
 @require './wrapper'
+@require './toc'
 
 html, body
   padding 0

lib/default-theme/styles/toc.styl

+.table-of-contents
+  .badge
+    vertical-align middle

lib/markdown/index.js

@@ -6,15 +6,17 @@ const component = require('./component')
 const hoistScriptStyle = require('./hoist')
 const convertRouterLink = require('./link')
 const containers = require('./containers')
+const snippet = require('./snippet')
 const emoji = require('markdown-it-emoji')
 const anchor = require('markdown-it-anchor')
 const toc = require('markdown-it-table-of-contents')
 const _slugify = require('./slugify')
-const parseHeaders = require('../util/parseHeaders')
+const { parseHeaders, removeTailHtml } = require('../util/parseHeaders')
+const { compose } = require('../util/shared')
 
 module.exports = ({ markdown = {}} = {}) => {
   // allow user config slugify
-  const slugify = markdown.slugify || _slugify
+  const slugify = markdown.slugify || compose(removeTailHtml, _slugify)
 
   const md = require('markdown-it')({
     html: true,
@@ -24,6 +26,7 @@ module.exports = ({ markdown = {}} = {}) => {
     .use(component)
     .use(highlightLines)
     .use(preWrapper)
+    .use(snippet)
     .use(convertRouterLink, Object.assign({
       target: '_blank',
       rel: 'noopener noreferrer'

lib/markdown/snippet.js

+const fs = require('fs')
+
+module.exports = function snippet (md, options = {}) {
+  const root = options.root || process.cwd()
+  function parser (state, startLine, endLine, silent) {
+    const CH = '<'.charCodeAt(0)
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // if it's indented more than 3 spaces, it should be a code block
+    if (state.sCount[startLine] - state.blkIndent >= 4) {
+      return false
+    }
+
+    for (let i = 0; i < 3; ++i) {
+      const ch = state.src.charCodeAt(pos + i)
+      if (ch !== CH || pos + i >= max) return false
+    }
+
+    if (silent) {
+      return true
+    }
+
+    const start = pos + 3
+    const end = state.skipSpacesBack(max, pos)
+    const rawPath = state.src.slice(start, end).trim().replace(/^@/, root)
+    const filename = rawPath.split(/[{:\s]/).shift()
+    const content = fs.existsSync(filename) ? fs.readFileSync(filename).toString() : 'Not found: ' + filename
+    const meta = rawPath.replace(filename, '')
+
+    state.line = startLine + 1
+
+    const token = state.push('fence', 'code', 0)
+    token.info = filename.split('.').pop() + meta
+    token.content = content
+    token.markup = '```'
+    token.map = [startLine, startLine + 1]
+
+    return true
+  }
+
+  md.block.ruler.before('fence', 'snippet', parser)
+}

lib/util/index.js

-const parseHeaders = require('./parseHeaders')
+const { deeplyParseHeaders } = require('./parseHeaders')
 
 exports.normalizeHeadTag = function (tag) {
   if (typeof tag === 'string') {
@@ -32,11 +32,11 @@ exports.inferTitle = function (frontmatter) {
     return 'Home'
   }
   if (frontmatter.data.title) {
-    return parseHeaders(frontmatter.data.title)
+    return deeplyParseHeaders(frontmatter.data.title)
   }
   const match = frontmatter.content.trim().match(/^#+\s+(.*)/)
   if (match) {
-    return parseHeaders(match[1])
+    return deeplyParseHeaders(match[1])
   }
 }
 
@@ -68,11 +68,11 @@ exports.extractHeaders = function (content, include = [], md) {
   const res = []
   tokens.forEach((t, i) => {
     if (t.type === 'heading_open' && include.includes(t.tag)) {
-      const title = parseHeaders(tokens[i + 1].content)
+      const title = tokens[i + 1].content
       const slug = t.attrs.find(([name]) => name === 'id')[1]
       res.push({
         level: parseInt(t.tag.slice(1), 10),
-        title,
+        title: deeplyParseHeaders(title),
         slug: slug || md.slugify(title)
       })
     }

lib/util/parseHeaders.js

+const { compose } = require('./shared')
+
 const parseEmojis = str => {
   const emojiData = require('markdown-it-emoji/lib/data/full.json')
   return String(str).replace(/:(.+?):/g, (placeholder, key) => emojiData[key] || placeholder)
@@ -17,13 +19,19 @@ const removeMarkdownToken = str => String(str)
   .replace(/\*(.*)\*/, '$1')  // *
   .replace(/_(.*)_/, '$1')  // _
 
-// put here to avoid circular references
-const compose = (...processors) => {
-  if (processors.length === 0) return input => input
-  if (processors.length === 1) return processors[0]
-  return processors.reduce((prev, next) => {
-    return (...args) => next(prev(...args))
-  })
+exports.removeTailHtml = (str) => {
+  return String(str).replace(/<.*>\s*$/g, '')
 }
 
-module.exports = compose(unescapeHtml, parseEmojis, removeMarkdownToken)
+// only remove some md tokens.
+exports.parseHeaders = compose(
+  unescapeHtml,
+  parseEmojis,
+  removeMarkdownToken
+)
+
+// also clean html in headers.
+exports.deeplyParseHeaders = compose(
+  exports.parseHeaders,
+  exports.removeTailHtml
+)

lib/util/shared.js

+exports.compose = (...processors) => {
+  if (processors.length === 0) return input => input
+  if (processors.length === 1) return processors[0]
+  return processors.reduce((prev, next) => {
+    return (...args) => next(prev(...args))
+  })
+}

package.json

@@ -82,7 +82,7 @@
     "toml": "^2.3.3",
     "url-loader": "^1.0.1",
     "vue": "^2.5.16",
-    "vue-loader": "^15.2.1",
+    "vue-loader": "^15.2.4",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",

test/markdown/__snapshots__/snippet.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snippet import snippet 1`] = `
+<pre><code class="language-js">export default function () {
+  // ..
+}</code></pre>
+`;
+
+exports[`snippet import snippet with highlight multiple lines 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div>
+</div>export default function () { // .. }
+`;
+
+exports[`snippet import snippet with highlight single line 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div>
+  <br>
+  <div class="highlighted">&nbsp;</div>
+</div>export default function () { // .. }
+`;

test/markdown/fragments/code-snippet-highlightLines-multiple.md

+<<< @/test/markdown/fragments/snippet.js{1-3}

test/markdown/fragments/code-snippet-highlightLines-single.md

+<<< @/test/markdown/fragments/snippet.js{1,3}

test/markdown/fragments/code-snippet.md

+<<< @/test/markdown/fragments/snippet.js

test/markdown/fragments/snippet.js

+export default function () {
+  // ..
+}

test/markdown/snippet.spec.js

+import { Md, getFragment } from './util'
+import snippet from '@/markdown/snippet.js'
+import highlightLines from '@/markdown/highlightLines.js'
+
+const md = Md().use(snippet)
+const mdH = Md().use(snippet).use(highlightLines)
+
+describe('snippet', () => {
+  test('import snippet', async () => {
+    const input = await getFragment('code-snippet')
+    const output = md.render(input)
+    expect(output).toMatchSnapshot()
+  })
+
+  test('import snippet with highlight single line', async () => {
+    const input = await getFragment('code-snippet-highlightLines-single')
+    const output = mdH.render(input)
+    expect(output).toMatchSnapshot()
+  })
+
+  test('import snippet with highlight multiple lines', async () => {
+    const input = await getFragment('code-snippet-highlightLines-multiple')
+    const output = mdH.render(input)
+    expect(output).toMatchSnapshot()
+  })
+})

yarn.lock

@@ -6683,8 +6683,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.13.0:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.2.tgz#412b87bc561cb11074d2877a33a38f78c2303cda"
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.4.tgz#31bbae6990f13b1093187c731766a14036fa72e6"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -8293,8 +8293,8 @@ vue-jest@^2.6.0:
     vue-template-es2015-compiler "^1.6.0"
 
 vue-loader@^15.2.1:
-  version "15.2.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.2.2.tgz#d845fef2eca64e91042e66315119536e17f1538d"
+  version "15.2.4"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.2.4.tgz#a7b923123d3cf87230a8ff54a1c16d31a6c5dbb4"
   dependencies:
     "@vue/component-compiler-utils" "^1.2.1"
     hash-sum "^1.0.2"