From 836a24683a19eefbc98d6c448c26e3696a679e7c Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 2 Jul 2022 18:00:26 +0530
Subject: [PATCH] feat(theme): custom prev/next labels and text (#897)

---
 docs/config/theme-configs.md                  | 26 ++++++++++++++++-
 docs/guide/theme-prev-next-link.md            | 28 ++++++++++++++++++-
 .../theme-default/components/VPDocFooter.vue  |  4 +--
 .../theme-default/composables/prev-next.ts    | 10 +++++--
 types/default-theme.d.ts                      | 23 +++++++++++++++
 5 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index 4ebfdc8723c1..eb40afdf9db1 100644
--- a/docs/config/theme-configs.md
+++ b/docs/config/theme-configs.md
@@ -247,9 +247,33 @@ export default {
 
 ```ts
 export interface CarbonAds {
-  code: string,
+  code: string
   placement: string
 }
 ```
 
 Learn more in [Theme: Carbon Ads](../guide/theme-carbon-ads)
+
+## docFooter
+
+- Type: `DocFooter`
+
+Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English.
+
+```js
+export default {
+  themeConfig: {
+    docFooter: {
+      prev: 'Pagina prior',
+      next: 'Proxima pagina'
+    }
+  }
+}
+```
+
+```ts
+export interface DocFooter {
+  prev?: string
+  next?: string
+}
+```
diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md
index c248d1f3a318..e52f9057c731 100644
--- a/docs/guide/theme-prev-next-link.md
+++ b/docs/guide/theme-prev-next-link.md
@@ -1,3 +1,29 @@
 # Prev Next Link
 
-Documentation coming soon...
+You can customize the text of previous and next links. This is helpful if you want to show different text on previous/next links than what you have on your sidebar.
+
+## prev
+
+- Type: `string`
+
+- Details:
+
+  Specify the text to show on the link to the previous page.
+
+  If you don't set this in frontmatter, the text will be inferred from the sidebar config.
+
+- Example:
+
+```yaml
+---
+prev: 'Get Started | Markdown'
+---
+```
+
+## next
+
+- Type: `string`
+
+- Details:
+
+  Same as `prev` but for the next page.
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 29890e7514fb..48d01d68a450 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -36,13 +36,13 @@ const hasLastUpdated = computed(() => {
     <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">Previous page</span>
+          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
           <span class="title">{{ control.prev.text }} </span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">Next page</span>
+          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
           <span class="title">{{ control.next.text }}</span>
         </a>
       </div>
diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts
index e09cb0e00458..0e97e695ec01 100644
--- a/src/client/theme-default/composables/prev-next.ts
+++ b/src/client/theme-default/composables/prev-next.ts
@@ -4,7 +4,7 @@ import { isActive } from '../support/utils'
 import { getSidebar, getFlatSideBarLinks } from '../support/sidebar'
 
 export function usePrevNext() {
-  const { page, theme } = useData()
+  const { page, theme, frontmatter } = useData()
 
   return computed(() => {
     const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath)
@@ -15,8 +15,12 @@ export function usePrevNext() {
     })
 
     return {
-      prev: candidates[index - 1],
-      next: candidates[index + 1]
+      prev: frontmatter.value.prev
+        ? { ...candidates[index - 1], text: frontmatter.value.prev }
+        : candidates[index - 1],
+      next: frontmatter.value.next
+        ? { ...candidates[index + 1], text: frontmatter.value.next }
+        : candidates[index + 1]
     }
   })
 }
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index f19f43950633..4e3f6ee05870 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -43,6 +43,11 @@ export namespace DefaultTheme {
      */
     lastUpdatedText?: string
 
+    /**
+     * Set custom prev/next labels.
+     */
+    docFooter?: DocFooter
+
     /**
      * The social links to be displayed at the end of the nav bar. Perfect for
      * placing links to social services such as GitHub, Twitter, Facebook, etc.
@@ -157,6 +162,24 @@ export namespace DefaultTheme {
     text?: string
   }
 
+  // prev-next -----------------------------------------------------------------
+
+  export interface DocFooter {
+    /**
+     * Custom label for previous page button.
+     *
+     * @default 'Previous Page'
+     */
+    prev?: string
+
+    /**
+     * Custom label for next page button.
+     *
+     * @default 'Next Page'
+     */
+    next?: string
+  }
+
   // social link ---------------------------------------------------------------
 
   export interface SocialLink {