feat(theme): custom prev/next labels and text (#897)

Author: brc-dd

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
+}
+```

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.

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>

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]
     }
   })
 }

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 {