From 07d8163649965a24480463da9320b2aa3652a219 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Thu, 19 Nov 2020 02:00:22 +0900
Subject: [PATCH 1/4] fix: fix next and prev links not working

---
 .../theme-default/components/EditLink.vue     |  1 +
 .../components/NextAndPrevLinks.ts            | 61 -------------
 .../components/NextAndPrevLinks.vue           | 32 ++++---
 .../composables/nextAndPrevLinks.ts           | 86 +++++++++++--------
 src/node/server.ts                            | 57 +-----------
 types/shared.d.ts                             |  2 -
 6 files changed, 69 insertions(+), 170 deletions(-)
 delete mode 100644 src/client/theme-default/components/NextAndPrevLinks.ts

diff --git a/src/client/theme-default/components/EditLink.vue b/src/client/theme-default/components/EditLink.vue
index df2a9aa3259f..7a464e16a243 100644
--- a/src/client/theme-default/components/EditLink.vue
+++ b/src/client/theme-default/components/EditLink.vue
@@ -49,5 +49,6 @@ export default defineComponent({
   margin-left: 4px;
   width: 1rem;
   height: 1rem;
+  transform: translateY(-1px);
 }
 </style>
diff --git a/src/client/theme-default/components/NextAndPrevLinks.ts b/src/client/theme-default/components/NextAndPrevLinks.ts
deleted file mode 100644
index 09572b88c0f9..000000000000
--- a/src/client/theme-default/components/NextAndPrevLinks.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { computed } from 'vue'
-import { useRoute, useSiteData } from 'vitepress'
-import { DefaultTheme } from '../config'
-
-export default {
-  setup() {
-    const route = useRoute()
-    // TODO: could this be useSiteData<DefaultTheme.Config> or is the siteData
-    // resolved and has a different structure?
-    const siteData = useSiteData()
-
-    const resolveLink = (targetLink: string) => {
-      let target: DefaultTheme.SideBarLink | undefined
-      Object.keys(siteData.value.themeConfig.sidebar).some((k) => {
-        return siteData.value.themeConfig.sidebar[k].some(
-          (v: { children: any }) => {
-            if (Array.isArray(v.children)) {
-              target = v.children.find((value: any) => {
-                return value.link === targetLink
-              })
-            }
-            return !!target
-          }
-        )
-      })
-      return target
-    }
-
-    const next = computed(() => {
-      const pageData = route.data
-      if (pageData.frontmatter.next === false) {
-        return undefined
-      }
-      if (typeof pageData.frontmatter.next === 'string') {
-        return resolveLink(pageData.frontmatter.next)
-      }
-      return pageData.next
-    })
-
-    const prev = computed(() => {
-      const pageData = route.data
-      if (pageData.frontmatter.prev === false) {
-        return undefined
-      }
-      if (typeof pageData.frontmatter.prev === 'string') {
-        return resolveLink(pageData.frontmatter.prev)
-      }
-      return pageData.prev
-    })
-
-    const hasLinks = computed(() => {
-      return !!next || !!prev
-    })
-
-    return {
-      next,
-      prev,
-      hasLinks
-    }
-  }
-}
diff --git a/src/client/theme-default/components/NextAndPrevLinks.vue b/src/client/theme-default/components/NextAndPrevLinks.vue
index f8879fa6fe38..3ebaa70eaa65 100644
--- a/src/client/theme-default/components/NextAndPrevLinks.vue
+++ b/src/client/theme-default/components/NextAndPrevLinks.vue
@@ -1,16 +1,18 @@
 <template>
   <div v-if="hasLinks" class="next-and-prev-link">
-    <div class="prev">
-      <a v-if="prev" class="link" :href="prev.link">
-        <ArrowLeft class="icon icon-prev" />
-        <span class="text">{{ prev.text }}</span>
-      </a>
-    </div>
-    <div class="next">
-      <a v-if="next" class="link" :href="next.link">
-        <span class="text">{{ next.text }}</span>
-        <ArrowRight class="icon icon-next" />
-      </a>
+    <div class="container">
+      <div class="prev">
+        <a v-if="prev" class="link" :href="prev.link">
+          <ArrowLeft class="icon icon-prev" />
+          <span class="text">{{ prev.text }}</span>
+        </a>
+      </div>
+      <div class="next">
+        <a v-if="next" class="link" :href="next.link">
+          <span class="text">{{ next.text }}</span>
+          <ArrowRight class="icon icon-next" />
+        </a>
+      </div>
     </div>
   </div>
 </template>
@@ -41,6 +43,10 @@ export default defineComponent({
 
 <style scoped>
 .next-and-prev-link {
+  padding-top: 1rem;
+}
+
+.container {
   display: flex;
   justify-content: space-between;
   border-top: 1px solid var(--border-color);
@@ -82,8 +88,8 @@ export default defineComponent({
 .icon {
   display: block;
   flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
+  width: 16px;
+  height: 16px;
   fill: var(--text-color);
 }
 
diff --git a/src/client/theme-default/composables/nextAndPrevLinks.ts b/src/client/theme-default/composables/nextAndPrevLinks.ts
index e08a6b81c9dc..f3895fcd3845 100644
--- a/src/client/theme-default/composables/nextAndPrevLinks.ts
+++ b/src/client/theme-default/composables/nextAndPrevLinks.ts
@@ -1,55 +1,42 @@
 import { computed } from 'vue'
-import { useRoute, useSiteData } from 'vitepress'
+import { useSiteDataByRoute, usePageData } from 'vitepress'
 import { DefaultTheme } from '../config'
 
 export function useNextAndPrevLinks() {
-  const route = useRoute()
-  // TODO: could this be useSiteData<DefaultTheme.Config> or is the siteData
-  // resolved and has a different structure?
-  const siteData = useSiteData()
-
-  const resolveLink = (targetLink: string) => {
-    let target: DefaultTheme.SideBarLink | undefined
-    Object.keys(siteData.value.themeConfig.sidebar).some((k) => {
-      return siteData.value.themeConfig.sidebar[k].some(
-        (v: { children: any }) => {
-          if (Array.isArray(v.children)) {
-            target = v.children.find((value: any) => {
-              return value.link === targetLink
-            })
-          }
-          return !!target
-        }
-      )
+  const site = useSiteDataByRoute()
+  const page = usePageData()
+
+  const candidates = computed(() => {
+    return getFlatSidebarLinks(site.value.themeConfig?.sidebar)
+  })
+
+  const currentPath = computed(() => {
+    return '/' + page.value.relativePath.replace(/(index)?\.(md|html)$/, '')
+  })
+
+  const currentIndex = computed(() => {
+    return candidates.value.findIndex((item) => {
+      return item.link === currentPath.value
     })
-    return target
-  }
+  })
 
   const next = computed(() => {
-    const pageData = route.data
-    if (pageData.frontmatter.next === false) {
-      return undefined
+    if (
+      site.value.themeConfig?.nextLinks !== false &&
+      currentIndex.value > -1 &&
+      currentIndex.value < candidates.value.length - 1
+    ) {
+      return candidates.value[currentIndex.value + 1]
     }
-    if (typeof pageData.frontmatter.next === 'string') {
-      return resolveLink(pageData.frontmatter.next)
-    }
-    return pageData.next
   })
 
   const prev = computed(() => {
-    const pageData = route.data
-    if (pageData.frontmatter.prev === false) {
-      return undefined
-    }
-    if (typeof pageData.frontmatter.prev === 'string') {
-      return resolveLink(pageData.frontmatter.prev)
+    if (site.value.themeConfig?.prevLinks !== false && currentIndex.value > 0) {
+      return candidates.value[currentIndex.value - 1]
     }
-    return pageData.prev
   })
 
-  const hasLinks = computed(() => {
-    return !!next.value || !!prev.value
-  })
+  const hasLinks = computed(() => !!next.value || !!prev.value)
 
   return {
     next,
@@ -57,3 +44,26 @@ export function useNextAndPrevLinks() {
     hasLinks
   }
 }
+
+function getFlatSidebarLinks(
+  sidebar?: DefaultTheme.SideBarConfig
+): DefaultTheme.SideBarLink[] {
+  if (!sidebar || sidebar === 'auto') {
+    return []
+  }
+
+  return sidebar.reduce<DefaultTheme.SideBarLink[]>((links, item) => {
+    if (item.link) {
+      links.push({ text: item.text, link: item.link })
+    }
+
+    if ((item as DefaultTheme.SideBarGroup).children) {
+      links = [
+        ...links,
+        ...getFlatSidebarLinks((item as DefaultTheme.SideBarGroup).children)
+      ]
+    }
+
+    return links
+  }, [])
+}
diff --git a/src/node/server.ts b/src/node/server.ts
index bc3fb3fe152e..14814a3caaca 100644
--- a/src/node/server.ts
+++ b/src/node/server.ts
@@ -105,18 +105,13 @@ function createVitePressPlugin({
         ctx.body = vueSrc
         debug(ctx.url, ctx.status)
 
-        const pageDataWithLinks = {
-          ...pageData,
-          // TODO: this doesn't work with locales
-          ...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(pageDataWithLinks)
+            JSON.stringify(pageData)
           )}`
         }
         return
@@ -133,56 +128,6 @@ function createVitePressPlugin({
   }
 }
 
-// TODO: share types from SideBarLink, SideBarGroup, etc. We are also assuming
-// all themes follow this structure, in which case, we should expose the type
-// instead of having any for themeConfig or not nest `sidebar` inside
-// `themeConfig`, specially given it must be specified inside `locales` if there
-// are any
-interface SideBarLink {
-  text: string
-  link: string
-}
-
-function getNextAndPrev(themeConfig: any, pagePath: string) {
-  if (!themeConfig.sidebar) {
-    return
-  }
-  const sidebar = themeConfig.sidebar
-  let candidates: SideBarLink[] = []
-  Object.keys(sidebar).forEach((k) => {
-    if (!pagePath.startsWith(k)) {
-      return
-    }
-    sidebar[k].forEach((sidebarItem: { children?: SideBarLink[] }) => {
-      if (!sidebarItem.children) {
-        return
-      }
-      sidebarItem.children.forEach((candidate) => {
-        candidates.push(candidate)
-      })
-    })
-  })
-
-  const path = pagePath.replace(/\.(md|html)$/, '')
-  const currentLinkIndex = candidates.findIndex((v) => v.link === path)
-
-  const nextAndPrev: { prev?: SideBarLink; next?: SideBarLink } = {}
-
-  if (
-    themeConfig.nextLinks !== false &&
-    currentLinkIndex > -1 &&
-    currentLinkIndex < candidates.length - 1
-  ) {
-    nextAndPrev.next = candidates[currentLinkIndex + 1]
-  }
-
-  if (themeConfig.prevLinks !== false && currentLinkIndex > 0) {
-    nextAndPrev.next = candidates[currentLinkIndex - 1]
-  }
-
-  return nextAndPrev
-}
-
 export async function createServer(options: ServerConfig = {}) {
   const config = await resolveConfig(options.root)
 
diff --git a/types/shared.d.ts b/types/shared.d.ts
index ee624a17de75..859176f29ff3 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -29,8 +29,6 @@ export interface PageData {
   headers: Header[]
   relativePath: string
   lastUpdated: number
-  next?: { text: string; link: string }
-  prev?: { text: string; link: string }
 }
 
 export interface Header {

From 49cb6feb04a9e2bdc8b77d023626634f07ff8423 Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Fri, 20 Nov 2020 16:48:26 +0900
Subject: [PATCH 2/4] fix: not working with multi sidebar config

---
 .../composables/nextAndPrevLinks.ts           | 48 ++++++++++++++++---
 src/client/theme-default/utils.ts             |  8 ++++
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/client/theme-default/composables/nextAndPrevLinks.ts b/src/client/theme-default/composables/nextAndPrevLinks.ts
index f3895fcd3845..f65743a98c74 100644
--- a/src/client/theme-default/composables/nextAndPrevLinks.ts
+++ b/src/client/theme-default/composables/nextAndPrevLinks.ts
@@ -1,5 +1,6 @@
 import { computed } from 'vue'
 import { useSiteDataByRoute, usePageData } from 'vitepress'
+import { isArray, getPathDirName, ensureStartingSlash } from '../utils'
 import { DefaultTheme } from '../config'
 
 export function useNextAndPrevLinks() {
@@ -7,11 +8,17 @@ export function useNextAndPrevLinks() {
   const page = usePageData()
 
   const candidates = computed(() => {
-    return getFlatSidebarLinks(site.value.themeConfig?.sidebar)
+    const path = ensureStartingSlash(page.value.relativePath)
+    const sidebar = site.value.themeConfig?.sidebar
+
+    return getFlatSidebarLinks(path, sidebar)
   })
 
   const currentPath = computed(() => {
-    return '/' + page.value.relativePath.replace(/(index)?\.(md|html)$/, '')
+    return ensureStartingSlash(page.value.relativePath).replace(
+      /(index)?\.(md|html)$/,
+      ''
+    )
   })
 
   const currentIndex = computed(() => {
@@ -46,24 +53,51 @@ export function useNextAndPrevLinks() {
 }
 
 function getFlatSidebarLinks(
+  path: string,
   sidebar?: DefaultTheme.SideBarConfig
 ): DefaultTheme.SideBarLink[] {
   if (!sidebar || sidebar === 'auto') {
     return []
   }
 
+  return isArray(sidebar)
+    ? getFlatSidebarLinksFromArray(path, sidebar)
+    : getFlatSidebarLinksFromObject(path, sidebar)
+}
+
+function getFlatSidebarLinksFromArray(
+  path: string,
+  sidebar: DefaultTheme.SideBarItem[]
+): DefaultTheme.SideBarLink[] {
   return sidebar.reduce<DefaultTheme.SideBarLink[]>((links, item) => {
     if (item.link) {
       links.push({ text: item.text, link: item.link })
     }
 
-    if ((item as DefaultTheme.SideBarGroup).children) {
-      links = [
-        ...links,
-        ...getFlatSidebarLinks((item as DefaultTheme.SideBarGroup).children)
-      ]
+    if (isSideBarGroup(item)) {
+      links = [...links, ...getFlatSidebarLinks(path, item.children)]
     }
 
     return links
   }, [])
 }
+
+function getFlatSidebarLinksFromObject(
+  path: string,
+  sidebar: DefaultTheme.MultiSideBarConfig
+): DefaultTheme.SideBarLink[] {
+  const paths = [path, Object.keys(sidebar)[0]]
+  const item = paths.map((p) => sidebar[getPathDirName(p)]).find(Boolean)
+
+  if (isArray(item)) {
+    return getFlatSidebarLinksFromArray(path, item)
+  }
+
+  return []
+}
+
+function isSideBarGroup(
+  item: DefaultTheme.SideBarItem
+): item is DefaultTheme.SideBarGroup {
+  return (item as DefaultTheme.SideBarGroup).children !== undefined
+}
diff --git a/src/client/theme-default/utils.ts b/src/client/theme-default/utils.ts
index 0ff92f237f91..2f8b4bd44566 100644
--- a/src/client/theme-default/utils.ts
+++ b/src/client/theme-default/utils.ts
@@ -9,6 +9,10 @@ export function isNullish(value: any): value is null | undefined {
   return value === null || value === undefined
 }
 
+export function isArray(value: any): value is any[] {
+  return Array.isArray(value)
+}
+
 export function withBase(path: string) {
   return (useSiteData().value.base + path).replace(/\/+/g, '/')
 }
@@ -62,6 +66,10 @@ export function getPathDirName(path: string): string {
   return ensureEndingSlash(segments.join('/'))
 }
 
+export function ensureStartingSlash(path: string): string {
+  return /^\//.test(path) ? path : `/${path}`
+}
+
 export function ensureEndingSlash(path: string): string {
   return /(\.html|\/)$/.test(path) ? path : `${path}/`
 }

From c06435dab33f258c41a34fdfc029872e518a036d Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Fri, 20 Nov 2020 16:53:45 +0900
Subject: [PATCH 3/4] fix: netlify build

---
 src/client/theme-default/composables/nextAndPrevLinks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/composables/nextAndPrevLinks.ts b/src/client/theme-default/composables/nextAndPrevLinks.ts
index f65743a98c74..79e09ff5bd5d 100644
--- a/src/client/theme-default/composables/nextAndPrevLinks.ts
+++ b/src/client/theme-default/composables/nextAndPrevLinks.ts
@@ -9,7 +9,7 @@ export function useNextAndPrevLinks() {
 
   const candidates = computed(() => {
     const path = ensureStartingSlash(page.value.relativePath)
-    const sidebar = site.value.themeConfig?.sidebar
+    const sidebar = site.value.themeConfig.sidebar
 
     return getFlatSidebarLinks(path, sidebar)
   })

From f7c972317c14442fc756f1ec9f7c6fad9966f399 Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Fri, 20 Nov 2020 16:57:01 +0900
Subject: [PATCH 4/4] fix: more fix for netlify

---
 .../theme-default/composables/nextAndPrevLinks.ts     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/composables/nextAndPrevLinks.ts b/src/client/theme-default/composables/nextAndPrevLinks.ts
index 79e09ff5bd5d..ab784e5605f9 100644
--- a/src/client/theme-default/composables/nextAndPrevLinks.ts
+++ b/src/client/theme-default/composables/nextAndPrevLinks.ts
@@ -15,10 +15,9 @@ export function useNextAndPrevLinks() {
   })
 
   const currentPath = computed(() => {
-    return ensureStartingSlash(page.value.relativePath).replace(
-      /(index)?\.(md|html)$/,
-      ''
-    )
+    const path = ensureStartingSlash(page.value.relativePath)
+
+    return path.replace(/(index)?\.(md|html)$/, '')
   })
 
   const currentIndex = computed(() => {
@@ -29,7 +28,7 @@ export function useNextAndPrevLinks() {
 
   const next = computed(() => {
     if (
-      site.value.themeConfig?.nextLinks !== false &&
+      site.value.themeConfig.nextLinks !== false &&
       currentIndex.value > -1 &&
       currentIndex.value < candidates.value.length - 1
     ) {
@@ -38,7 +37,7 @@ export function useNextAndPrevLinks() {
   })
 
   const prev = computed(() => {
-    if (site.value.themeConfig?.prevLinks !== false && currentIndex.value > 0) {
+    if (site.value.themeConfig.prevLinks !== false && currentIndex.value > 0) {
       return candidates.value[currentIndex.value - 1]
     }
   })