feat: add prev/next links (#56)

* feat: set Prev/Next to page data
* feat: set links at the bottom of page
* feat: hide next/prev links when themeConfig expressly set false

src/client/theme-default/components/NextAndPrevLinks.ts

@@ -0,0 +1,22 @@
+import { defineComponent, computed } from 'vue'
+import { usePageData } from 'vitepress'
+
+export default defineComponent({
+  setup() {
+    const pageData = usePageData()
+    const next = computed(() => {
+      return pageData.value.next
+    })
+    const prev = computed(() => {
+      return pageData.value.prev
+    })
+    const hasLinks = computed(() => {
+      return !!next || !!prev
+    })
+    return {
+      next,
+      prev,
+      hasLinks
+    }
+  }
+})

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-if="hasLinks" class="links-wrapper">
+    <div class="prev-link">
+      <div v-if="prev">
+      ← <a :href="prev.link">{{prev.text}}</a>
+      </div>
+    </div>
+    <div class="next-link">
+      <div v-if="next">
+      <a :href="next.link">{{next.text}}</a> →
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./NextAndPrevLinks"></script>
+
+<style>
+.links-wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/client/theme-default/components/Page.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="content">
     <Content />
+    <NextAndPrevLinks />
   </div>
 </template>
 
+<script>
+import NextAndPrevLinks from './NextAndPrevLinks.vue'
+export default {
+  components:{ NextAndPrevLinks }
+}
+</script>
+
 <style>
 .content {
   max-width: 46rem;

src/node/server.ts

@@ -104,13 +104,17 @@ function createVitePressPlugin({
         ctx.body = vueSrc
         debug(ctx.url, ctx.status)
 
+        const pageDataWithLinks = {
+          ...pageData,
+          ...getNextAndPrev(siteData.themeConfig, ctx.path)
+        }
         await next()
 
         // make sure this is the main <script> block
         if (!ctx.query.type) {
           // inject pageData to generated script
           ctx.body += `\nexport const __pageData = ${JSON.stringify(
-            JSON.stringify(pageData)
+            JSON.stringify(pageDataWithLinks)
           )}`
         }
         return
@@ -127,6 +131,41 @@ function createVitePressPlugin({
   }
 }
 
+function getNextAndPrev(themeConfig: any, pagePath: string) {
+  if (!themeConfig.sidebar) {
+    return
+  }
+  const sidebar = themeConfig.sidebar
+  let candidates: { text: string; link: string }[] = []
+  Object.keys(sidebar).forEach((k) => {
+    if (!pagePath.startsWith(k)) {
+      return
+    }
+    sidebar[k].forEach((sidebarItem: { [key: string]: any }) => {
+      if (!sidebarItem.children) {
+        return
+      }
+      sidebarItem.children.forEach((candidate: any) => {
+        candidates.push(candidate)
+      })
+    })
+  })
+
+  const path = pagePath.replace(/\.(md|html)$/, '')
+  const currentLinkIndex = candidates.findIndex((v) => v.link === path)
+  const hideNextLink = themeConfig.nextLinks === false
+  const hidePrevLink = themeConfig.prevLinks === false
+
+  return {
+    ...(currentLinkIndex !== -1 && !hideNextLink
+      ? { next: candidates[currentLinkIndex + 1] }
+      : {}),
+    ...(currentLinkIndex !== -1 && !hidePrevLink
+      ? { prev: candidates[currentLinkIndex - 1] }
+      : {})
+  }
+}
+
 export async function createServer(options: ServerConfig = {}) {
   const config = await resolveConfig(options.root)
 

types/shared.d.ts

@@ -26,6 +26,8 @@ export interface PageData {
   frontmatter: Record<string, any>
   headers: Header[]
   lastUpdated: number
+  next?: { text: string; link: string }
+  prev?: { text: string; link: string }
 }
 
 export interface Header {