Merge branch 'master' into line-number-support

docs/guide/README.md

@@ -17,15 +17,16 @@ 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.md)
-- Automatic Service Worker generation
-- Google Analytics Integration
-- Multi-language support
+- [Automatic Service Worker generation](../config/#serviceworker)
+- [Google Analytics Integration](../config/#ga)
+- [Multi-language support](./i18n.md)
 - A default theme with:
   - Responsive layout
-  - Optional Homepage
-  - Simple out-of-the-box header-based search
-  - Customizable navbar and sidebar
-  - Auto-generated GitHub link and page edit links
+  - [Optional Homepage](../default-theme-config/#homepage)
+  - [Simple out-of-the-box header-based search](../default-theme-config/#built-in-search)
+  - [Algolia Search](../default-theme-config/#algolia-search)
+  - Customizable [navbar](../default-theme-config/#navbar) and [sidebar](../default-theme-config/#sidebar)
+  - [Auto-generated GitHub link and page edit links](../default-theme-config/#git-repo-and-edit-links)
 
 ## Todo
 

docs/guide/using-vue.md

@@ -40,7 +40,7 @@ Each markdown file is first compiled into HTML and then passed on as a Vue compo
 
 **Output**
 
-<pre><code>{{ 1 + 1 }}</code></pre>
+<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
 
 ### Directives
 
@@ -54,7 +54,7 @@ Directives also work:
 
 **Output**
 
-<pre><code><span v-for="i in 3">{{ i }} </span></code></pre>
+<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
 
 ### Access to Site & Page Data
 

docs/zh/config/README.md

@@ -93,8 +93,8 @@ module.exports = {
 - `sw-error`
 
 ::: tip PWA NOTES
-`serviceWorker` 仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 `.vuepress/public` 提供 Manifest 和 icons，更多细节，请参见 [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
-当然，仅仅只在你的网站部署后能用 SSL 的时候开启它，因为 service worker 只能在 HTTPs 的链接下注册。
+`serviceWorker` 选项仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 `.vuepress/public` 提供 Manifest 和 icons，更多细节，请参见 [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+此外，只有您能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。
 :::
 
 ### locales

docs/zh/guide/README.md

@@ -15,15 +15,16 @@ VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静
 - 为技术文档而优化的 [内置 Markdown 拓展](./markdown.md)
 - [在 Markdown 文件中使用 Vue 组件的能力](./using-vue.md)
 - [Vue 驱动的自定义主题系统](./custom-themes.md)
-- 自动生成 Service Worker
-- Google Analytics 集成
-- 多语言支持
+- [自动生成 Service Worker](../config/#serviceworker)
+- [Google Analytics 集成](../config/#ga)
+- [多语言支持](./i18n.md)
 - 默认主题包含：
   - 响应式布局
-  - 可选的主页
-  - 简洁的开箱即用的标题搜索
-  - 可以自定义的导航栏（navbar）和侧边栏（sidebar）
-  - 自动生成的 GitHub 链接和页面的编辑链接
+  - [可选的主页](../default-theme-config/#首页)
+  - [简洁的开箱即用的标题搜索](../default-theme-config/#内置搜索)
+  - [Algolia 搜索](../default-theme-config/#algolia-搜索)
+  - 可自定义的[导航栏](../default-theme-config/#导航栏) 和[侧边栏](../default-theme-config/#侧边栏)
+  - [自动生成的 GitHub 链接和页面的编辑链接](../default-theme-config/#git-仓库和编辑链接)
 
 ## Todo
 

docs/zh/guide/using-vue.md

@@ -40,7 +40,7 @@ export default {
 
 **Output**
 
-<pre><code>{{ 1 + 1 }}</code></pre>
+<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
 
 ### 指令
 
@@ -54,7 +54,7 @@ export default {
 
 **Output**
 
-<pre><code><span v-for="i in 3">{{ i }} </span></code></pre>
+<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
 
 ### 访问网站以及页面的数据
 

lib/app/root-mixins/index.js

@@ -0,0 +1,2 @@
+import updateMeta from './updateMeta'
+export default [updateMeta]

lib/app/root-mixins/updateMeta.js

@@ -0,0 +1,48 @@
+export default {
+  created () {
+    if (this.$ssrContext) {
+      this.$ssrContext.title = this.$title
+      this.$ssrContext.lang = this.$lang
+      this.$ssrContext.description = this.$page.description || this.$description
+    }
+  },
+  mounted () {
+    // update title / meta tags
+    this.currentMetaTags = []
+    const updateMeta = () => {
+      document.title = this.$title
+      document.documentElement.lang = this.$lang
+      const meta = [
+        {
+          name: 'description',
+          content: this.$description
+        },
+        ...(this.$page.frontmatter.meta || [])
+      ]
+      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
+    }
+    this.$watch('$page', updateMeta)
+    updateMeta()
+  },
+  beforeDestroy () {
+    updateMetaTags(null, this.currentMetaTags)
+  }
+}
+
+function updateMetaTags (meta, current) {
+  if (current) {
+    current.forEach(c => {
+      document.head.removeChild(c)
+    })
+  }
+  if (meta) {
+    return meta.map(m => {
+      const tag = document.createElement('meta')
+      Object.keys(m).forEach(key => {
+        tag.setAttribute(key, m[key])
+      })
+      document.head.appendChild(tag)
+      return tag
+    })
+  }
+}

lib/app/util.js

@@ -1,3 +1,10 @@
+export function injectMixins (options, mixins) {
+  if (!options.mixins) {
+    options.mixins = []
+  }
+  options.mixins.push(...mixins)
+}
+
 export function pathToComponentName (path) {
   if (path.charAt(path.length - 1) === '/') {
     return `page${path.replace(/\//g, '-') + 'index'}`

lib/default-theme/Layout.vue

@@ -87,32 +87,7 @@ export default {
     }
   },
 
-  created () {
-    if (this.$ssrContext) {
-      this.$ssrContext.title = this.$title
-      this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
-    }
-  },
-
   mounted () {
-    // update title / meta tags
-    this.currentMetaTags = []
-    const updateMeta = () => {
-      document.title = this.$title
-      document.documentElement.lang = this.$lang
-      const meta = [
-        {
-          name: 'description',
-          content: this.$description
-        },
-        ...(this.$page.frontmatter.meta || [])
-      ]
-      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
-    }
-    this.$watch('$page', updateMeta)
-    updateMeta()
-
     window.addEventListener('scroll', this.onScroll)
 
     // configure progress bar
@@ -132,8 +107,6 @@ export default {
   },
 
   beforeDestroy () {
-    updateMetaTags(null, this.currentMetaTags)
-
     window.removeEventListener('scroll', this.onScroll)
   },
 
@@ -191,24 +164,6 @@ export default {
     }
   }
 }
-
-function updateMetaTags (meta, current) {
-  if (current) {
-    current.forEach(c => {
-      document.head.removeChild(c)
-    })
-  }
-  if (meta) {
-    return meta.map(m => {
-      const tag = document.createElement('meta')
-      Object.keys(m).forEach(key => {
-        tag.setAttribute(key, m[key])
-      })
-      document.head.appendChild(tag)
-      return tag
-    })
-  }
-}
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>

lib/default-theme/styles/code.styl

@@ -11,81 +11,87 @@
 
 .content
   pre, pre[class*="language-"]
-    background-color $codeBgColor
     line-height 1.4
-    border-radius 6px
     padding 1.25rem 1.5rem
     margin 0.85rem 0
+    background transparent
     overflow auto
-    position relative
     code
       color #fff
       padding 0
       background-color transparent
       border-radius 0
-    &:before
-      position absolute
-      top 0.8em
-      right 1em
-      font-size 0.75rem
-      color rgba(255, 255, 255, 0.4)
   .highlighted-line
     background-color rgba(0, 0, 0, 66%)
     display block
     margin 0 -1.5rem
     padding 0 1.5rem
 
-pre[class="language-js"], pre[class="language-javascript"]
+div[class*="language-"]
+  position relative
+  background-color $codeBgColor
+  border-radius 6px
+  &::before
+    position absolute
+    top 0.8em
+    right 1em
+    font-size 0.75rem
+    color rgba(255, 255, 255, 0.4)
+
+div[class="language-js"], div[class="language-javascript"]
   &:before
     content "js"
 
-pre[class="language-html"], pre[class="language-markup"]
+div[class="language-html"], div[class="language-markup"]
   &:before
     content "html"
 
-pre[class="language-markdown"], pre[class="language-md"]
+div[class="language-markdown"], div[class="language-md"]
   &:before
     content "md"
 
-pre[class="language-vue"]:before
+div[class="language-vue"]:before
   content "vue"
 
-pre[class="language-css"]:before
+div[class="language-css"]:before
   content "css"
 
-pre[class="language-sass"]:before
+div[class="language-sass"]:before
   content "sass"
 
-pre[class="language-less"]:before
+div[class="language-less"]:before
   content "less"
 
-pre[class="language-scss"]:before
+div[class="language-scss"]:before
   content "scss"
 
-pre[class="language-stylus"]:before
+div[class="language-stylus"]:before
   content "stylus"
 
-pre[class="language-json"]:before
+div[class="language-json"]:before
   content "json"
 
-pre[class="language-ruby"]:before
+div[class="language-ruby"]:before
   content "rb"
 
-pre[class="language-python"]:before
+div[class="language-python"]:before
   content "py"
 
-pre[class="language-go"]:before
+div[class="language-go"]:before
   content "go"
 
-pre[class="language-java"]:before
+div[class="language-java"]:before
   content "java"
 
-pre[class="language-c"]:before
+div[class="language-c"]:before
   content "c"
 
-pre[class="language-bash"]:before
+div[class="language-bash"]:before
   content "sh"
 
+div[class="language-yaml"]:before
+  content "yaml"
+
 $lineNumberWrapperWidth = 3rem
 
 .content pre[line-number-mode]

lib/default-theme/styles/mobile.styl

@@ -36,6 +36,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
   .content:not(.custom)
     padding 1.5rem
   .content
-    pre, pre[class*="language-"]
+    div[class*="language-"]
       margin 0.85rem -1.5rem
       border-radius 0

lib/dev.js

@@ -29,9 +29,10 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
 
   // watch add/remove of files
   const pagesWatcher = chokidar.watch([
-    path.join(sourceDir, '**/*.md'),
-    path.join(sourceDir, '.vuepress/components/**/*.vue')
+    '**/*.md',
+    '.vuepress/components/**/*.vue'
   ], {
+    cwd: sourceDir,
     ignored: '.vuepress/**/*.md',
     ignoreInitial: true
   })

lib/markdown/highlightLines.js

@@ -8,12 +8,12 @@ module.exports = md => {
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx, options] = args
     const token = tokens[idx]
+    const langName = token.info.replace(RE, '').trim()
 
     if (!token.info || !RE.test(token.info)) {
-      return fence(...args)
+      return `<div class="language-${langName}">${fence(...args)}</div>`
     }
 
-    const langName = token.info.replace(RE, '').trim()
     token.info = langName
 
     const lineNumbers = RE.exec(token.info)[1]

lib/prepare.js

@@ -61,7 +61,7 @@ if (!Object.assign) Object.assign = require('object-assign')`
 
   // 5. handle user override
   const overridePath = path.resolve(sourceDir, '.vuepress/override.styl')
-  const hasUserOverride = options.useDefaultTheme && fs.existsSync(overridePath)
+  const hasUserOverride = fs.existsSync(overridePath)
   await writeTemp(`override.styl`, hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
 
   // 6. handle enhanceApp.js
@@ -345,6 +345,10 @@ async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
   return (
     `import ThemeLayout from '@themeLayout'\n` +
     `import ThemeNotFound from '@themeNotFound'\n` +
+    `import { injectMixins } from '@app/util'\n` +
+    `import rootMixins from '@app/root-mixins'\n\n` +
+    `injectMixins(ThemeLayout, rootMixins)\n` +
+    `injectMixins(ThemeNotFound, rootMixins)\n\n` +
     `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
   )
 }