prev/next links

docs/.vuepress/config.js

@@ -9,18 +9,19 @@ module.exports = {
     ['link', { rel: 'icon', href: `${base}logo.png` }]
   ],
   themeConfig: {
+    github: 'vuejs/vuepress',
     // sidebar config
     sidebar: [
       {
         title: 'Guide',
         children: [
-          ['/', 'Intro'],
+          '/',
           '/getting-started',
           '/markdown',
           '/assets',
           '/using-vue',
           '/default-theme',
-          '/theming',
+          '/custom-themes',
           '/deploy'
         ]
       },

docs/README.md

+---
+title: Intro
+next: /getting-started
+---
+
 # VuePress
 
 > Minimalistic docs generator with Vue component based layout system

docs/assets.md

+---
+prev: /markdown
+next: /using-vue
+---
+
 # Asset Handling
 
 ## Relative URLs

docs/theming.md → docs/custom-themes.md

+---
+prev: /default-theme
+next: /deploy
+---
+
 # Custom Themes
 
 VuePress uses Vue single file components for custom themes. To use a custom layout, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:

docs/default-theme.md

+---
+prev: /using-vue
+next: /custom-themes
+---
+
 # Default Theme Configuration

docs/deploy.md

+---
+prev: /custom-themes
+next: /config
+---
+
 # Deploying
 
 ## GitHub Pages

docs/getting-started.md

+---
+prev: /
+next: /markdown
+---
+
 # Getting Started
 
 ## Quickstart

docs/markdown.md

 ---
+prev: /getting-started
+next: /assets
 meta:
 - name: keywords
   content: static docs generator vue

docs/using-vue.md

+---
+prev: /assets
+next: /default-theme
+---
+
 # Using Vue in Markdown
 
 ## Templating

lib/app/app.js

@@ -30,6 +30,8 @@ export function createApp () {
     base: siteData.base,
     mode: 'history',
     fallback: false,
+    linkActiveClass: '',
+    linkExactActiveClass: '',
     routes
   })
 

lib/default-theme/Page.vue

 <template>
   <div class="page">
     <Content/>
+    <div class="content page-nav" v-if="prev || next">
+      <p>
+        <span v-if="prev" class="prev">
+          ← <router-link v-if="prev" class="prev" :to="prev.path">
+            {{ prev.title || prev.path }}
+          </router-link>
+        </span>
+        <span v-if="next" class="next">
+          <router-link v-if="next" :to="next.path">
+            {{ next.title || next.path }}
+          </router-link> →
+        </span>
+      </p>
+    </div>
   </div>
 </template>
+
+<script>
+import { resolvePage } from './util'
+
+export default {
+  computed: {
+    prev () {
+      const prev = this.$page.frontmatter.prev
+      return prev && resolvePage(this.$site.pages, prev)
+    },
+    next () {
+      const next = this.$page.frontmatter.next
+      return next && resolvePage(this.$site.pages, next)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.stylus'
+
+.page-nav.content
+  p
+    border-top 1px solid $borderColor
+    padding-top 1rem
+  .next
+    float right
+</style>

lib/default-theme/SideBar.vue

@@ -15,7 +15,8 @@
 
 <script>
 import SidebarGroup from './SidebarGroup.vue'
-import SidebarLink, { isActive, normalize, ensureExt } from './SidebarLink.vue'
+import SidebarLink, { isActive } from './SidebarLink.vue'
+import { resolvePage } from './util'
 
 export default {
   components: { SidebarGroup, SidebarLink },
@@ -34,7 +35,7 @@ export default {
   },
   computed: {
     sidebarItems () {
-      return resolveSidebar(
+      return resolveSidebarItems(
         this.$route,
         this.$site
       )
@@ -66,18 +67,18 @@ function resolveOpenGroupIndex (route, items) {
   return -1
 }
 
-function resolveSidebar (route, site) {
+function resolveSidebarItems (route, site) {
   const { pages, themeConfig } = site
   const sidebarConfig = themeConfig.sidebar
   if (!sidebarConfig) {
     return pages.map(p => Object.assign({ page: 'type' }, p))
   } else {
-    const matchingConfig = resolveMatchingSidebar(route, sidebarConfig)
+    const matchingConfig = resolveMatchingSidebarConfig(route, sidebarConfig)
     return matchingConfig.map(item => resolveItem(item, pages))
   }
 }
 
-function resolveMatchingSidebar (route, sidebarConfig) {
+function resolveMatchingSidebarConfig (route, sidebarConfig) {
   if (Array.isArray(sidebarConfig)) {
     return sidebarConfig
   }
@@ -117,20 +118,6 @@ function resolveItem (item, pages, isNested) {
     }
   }
 }
-
-function resolvePage (pages, rawPath) {
-  const path = normalize(rawPath)
-  for (let i = 0; i < pages.length; i++) {
-    if (normalize(pages[i].path) === path) {
-      return Object.assign({}, pages[i], {
-        type: 'page',
-        path: ensureExt(rawPath)
-      })
-    }
-  }
-  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
-  return {}
-}
 </script>
 
 <style lang="stylus">

lib/default-theme/SidebarLink.vue

 <script>
+import { normalize, ensureExt } from './util'
+
 export default {
   functional: true,
   props: ['item'],
   render (h, { parent: { $route }, props: { item }}) {
     return h('router-link', {
       props: {
-        to: item.path,
-        activeClass: '',
-        exactActiveClass: ''
+        to: item.path
       },
       class: {
         'sidebar-link': true,
@@ -19,10 +19,6 @@ export default {
   }
 }
 
-const hashRE = /#.*$/
-const extRE = /\.(md|html)$/
-const slashRE = /\/$/
-
 export function isActive (route, page) {
   const routePath = normalize(route.path)
   const pagePath = normalize(page.path)
@@ -32,27 +28,13 @@ export function isActive (route, page) {
     return routePath.indexOf(pagePath) === 0
   }
 }
-
-export function normalize (path) {
-  return path
-    .replace(hashRE, '')
-    .replace(extRE, '')
-}
-
-export function ensureExt (path) {
-  if (slashRE.test(path)) {
-    return path
-  }
-  const hashMatch = path.match(hashRE)
-  const hash = hashMatch ? hashMatch[0] : ''
-  return normalize(path) + '.html' + hash
-}
 </script>
 
 <style lang="stylus">
 @import './styles/config.stylus'
 
 a.sidebar-link
+  font-weight 400
   display inline-block
   color $textColor
   border-left 0.25rem solid transparent

lib/default-theme/styles/theme.stylus

 @import './config.stylus'
 @import './nprogress.stylus'
 
+html, body
+  padding 0
+  margin 0
+
 body
   font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
   -webkit-font-smoothing antialiased
@@ -24,10 +28,21 @@ body
   border-right 1px solid $borderColor
   overflow-y scroll
 
-.markdown
-  max-width 760px
-  margin 2rem auto
+.content
+  max-width $contentWidth
+  margin 2rem auto 3rem
   padding 0 2rem
+  a:hover
+    text-decoration underline
+
+a
+  font-weight 500
+  color $accentColor
+  text-decoration none
+
+p a code
+  font-weight 400
+  color $accentColor
 
 blockquote
   font-size 1.25rem
@@ -39,10 +54,6 @@ blockquote
 ul, ol
   padding-left 1.2em
 
-a, p a code
-  color $accentColor
-  text-decoration none
-
 strong
   font-weight 600
 
@@ -55,15 +66,15 @@ h1, h2, h3, h4, h5, h6
     opacity: 1
 
 h1
-  font-size 2.3rem
+  font-size 2.2rem
 
 h2
-  font-size 1.8rem
+  font-size 1.65rem
   padding-bottom .3rem
   border-bottom 1px solid $borderColor
 
 h3
-  font-size 1.4rem
+  font-size 1.35rem
 
 a.header-anchor
   font-size 0.85em
@@ -72,6 +83,8 @@ a.header-anchor
   padding-right 0.23em
   margin-top 0.125em
   opacity 0
+  &:hover
+    text-decoration none
 
 code
   font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
@@ -81,15 +94,13 @@ p, ul, ol
 
 p, h1, h2, h3, h4, h5, h6
   code
+    color lighten($textColor, 20%)
     padding 0.2rem 0.5rem
     margin 0
     font-size 0.85rem
     background-color rgba(27,31,35,0.05)
     border-radius 3px
 
-p code
-  color lighten($textColor, 20%)
-
 pre, pre[class*="language-"]
   background-color $codeBgColor
   color #fff
@@ -172,7 +183,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
     width $mobileSidebarWidth
   .page
     padding-left $mobileSidebarWidth
-  .markdown
+  .content
     margin 1.5rem 0
     padding 0 1.5rem
 
@@ -192,6 +203,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
   pre, pre[class*="language-"]
     margin 0 -1.5rem
     border-radius 0
-  .markdown
+  .content
     margin 1rem 0
     padding 0 1rem

lib/default-theme/util.js

+const hashRE = /#.*$/
+const extRE = /\.(md|html)$/
+const slashRE = /\/$/
+
+export function normalize (path) {
+  return path
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+export function ensureExt (path) {
+  if (slashRE.test(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  return normalize(path) + '.html' + hash
+}
+
+export function resolvePage (pages, rawPath) {
+  const path = normalize(rawPath)
+  for (let i = 0; i < pages.length; i++) {
+    if (normalize(pages[i].path) === path) {
+      return Object.assign({}, pages[i], {
+        type: 'page',
+        path: ensureExt(rawPath)
+      })
+    }
+  }
+  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+  return {}
+}

lib/webpack/markdownLoader.js

@@ -32,7 +32,7 @@ module.exports = function (src) {
   const { html, hoistedTags } = markdown.renderWithHoisting(content)
   return (
     `<template>\n` +
-      `<div class="markdown">${html}</div>\n` +
+      `<div class="markdown content">${html}</div>\n` +
     `</template>\n` +
     hoistedTags.join('\n')
   )