feat(theme): allow prev/next links to be disabled globally (#2317)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
vuejs · Jun 10, 2023 · 29a9647 · 29a9647
1 parent 90478b3
commit 29a9647
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 37 deletions.
diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md
@@ -351,7 +351,7 @@ Learn more in [Default Theme: Carbon Ads](./default-theme-carbon-ads)
 
 - Type: `DocFooter`
 
-Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English.
+Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English. Also can be used to disable prev/next links globally. If you want to selectively enable/disable prev/next links, you can use [frontmatter](./default-theme-prev-next-links).
 
 ```js
 export default {
@@ -366,8 +366,8 @@ export default {
 
 ```ts
 export interface DocFooter {
-  prev?: string
-  next?: string
+  prev?: string | false
+  next?: string | false
 }
 ```
 

diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts
@@ -14,37 +14,43 @@ export function usePrevNext() {
       return isActive(page.value.relativePath, link.link)
     })
 
+    const hidePrev =
+      (theme.value.docFooter?.prev === false && !frontmatter.value.prev) ||
+      frontmatter.value.prev === false
+
+    const hideNext =
+      (theme.value.docFooter?.next === false && !frontmatter.value.next) ||
+      frontmatter.value.next === false
+
     return {
-      prev:
-        frontmatter.value.prev === false
-          ? undefined
-          : {
-              text:
-                (typeof frontmatter.value.prev === 'string'
-                  ? frontmatter.value.prev
-                  : typeof frontmatter.value.prev === 'object'
-                  ? frontmatter.value.prev.text
-                  : undefined) ?? candidates[index - 1]?.text,
-              link:
-                (typeof frontmatter.value.prev === 'object'
-                  ? frontmatter.value.prev.link
-                  : undefined) ?? candidates[index - 1]?.link
-            },
-      next:
-        frontmatter.value.next === false
-          ? undefined
-          : {
-              text:
-                (typeof frontmatter.value.next === 'string'
-                  ? frontmatter.value.next
-                  : typeof frontmatter.value.next === 'object'
-                  ? frontmatter.value.next.text
-                  : undefined) ?? candidates[index + 1]?.text,
-              link:
-                (typeof frontmatter.value.next === 'object'
-                  ? frontmatter.value.next.link
-                  : undefined) ?? candidates[index + 1]?.link
-            }
+      prev: hidePrev
+        ? undefined
+        : {
+            text:
+              (typeof frontmatter.value.prev === 'string'
+                ? frontmatter.value.prev
+                : typeof frontmatter.value.prev === 'object'
+                ? frontmatter.value.prev.text
+                : undefined) ?? candidates[index - 1]?.text,
+            link:
+              (typeof frontmatter.value.prev === 'object'
+                ? frontmatter.value.prev.link
+                : undefined) ?? candidates[index - 1]?.link
+          },
+      next: hideNext
+        ? undefined
+        : {
+            text:
+              (typeof frontmatter.value.next === 'string'
+                ? frontmatter.value.next
+                : typeof frontmatter.value.next === 'object'
+                ? frontmatter.value.next.text
+                : undefined) ?? candidates[index + 1]?.text,
+            link:
+              (typeof frontmatter.value.next === 'object'
+                ? frontmatter.value.next.link
+                : undefined) ?? candidates[index + 1]?.link
+          }
     } as {
       prev?: { text?: string; link?: string }
       next?: { text?: string; link?: string }

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -232,18 +232,18 @@ export namespace DefaultTheme {
 
   export interface DocFooter {
     /**
-     * Custom label for previous page button.
+     * Custom label for previous page button. Can be set to `false` to disable.
      *
      * @default 'Previous page'
      */
-    prev?: string
+    prev?: string | boolean
 
     /**
-     * Custom label for next page button.
+     * Custom label for next page button. Can be set to `false` to disable.
      *
      * @default 'Next page'
      */
-    next?: string
+    next?: string | boolean
   }
 
   // social link ---------------------------------------------------------------