feat(theme-classic): allow stylizing doc paginator arrows (#6053)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/package.json

@@ -36,7 +36,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
     "globby": "^11.0.2",
-    "infima": "0.2.0-alpha.36",
+    "infima": "0.2.0-alpha.37",
     "lodash": "^4.17.20",
     "postcss": "^8.3.7",
     "prism-react-renderer": "^1.2.1",

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -123,13 +123,22 @@ declare module '@theme/CodeBlock' {
 declare module '@theme/DocPaginator' {
   import type {PropNavigation} from '@docusaurus/plugin-content-docs';
 
-  type PageInfo = {readonly permalink: string; readonly title: string};
-
   // May be simpler to provide a {navigation: PropNavigation} prop?
   export interface Props extends PropNavigation {}
 
-  const DocPaginator: (props: Props) => JSX.Element;
+  export default function DocPaginator(props: Props): JSX.Element;
-  export default DocPaginator;
+}
+
+declare module '@theme/DocPaginatorNavLink' {
+  import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
+
+  // May be simpler to provide a {navigation: PropNavigation} prop?
+  export interface Props {
+    navLink: PropNavigationLink;
+    next?: boolean;
+  }
+
+  export default function DocPaginatorNavLink(props: Props): JSX.Element;
 }
 
 declare module '@theme/DocSidebar' {

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx

@@ -6,11 +6,11 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
-import Translate, {translate} from '@docusaurus/Translate';
+import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
-import type {PropNavigation} from '@docusaurus/plugin-content-docs';
+import type {Props} from '@theme/DocPaginator';
 
-function DocPaginator(props: PropNavigation): JSX.Element {
+function DocPaginator(props: Props): JSX.Element {
   const {previous, next} = props;
 
   return (
@@ -22,34 +22,10 @@ function DocPaginator(props: PropNavigation): JSX.Element {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-        {previous && (
+        {previous && <DocPaginatorNavLink navLink={previous} />}
-          <Link className="pagination-nav__link" to={previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {previous.title}
-            </div>
-          </Link>
-        )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
-        {next && (
+        {next && <DocPaginatorNavLink navLink={next} next />}
-          <Link className="pagination-nav__link" to={next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            </div>
-            <div className="pagination-nav__label">{next.title} &raquo;</div>
-          </Link>
-        )}
       </div>
     </nav>
   );

packages/docusaurus-theme-classic/src/theme/DocPaginatorNavLink/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import type {Props} from '@theme/DocPaginatorNavLink';
+
+function DocPaginatorNavLink(props: Props): JSX.Element {
+  const {navLink, next} = props;
+  return (
+    <Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
+      <div className="pagination-nav__sublabel">
+        {next ? (
+          <Translate
+            id="theme.docs.paginator.next"
+            description="The label used to navigate to the next doc">
+            Next
+          </Translate>
+        ) : (
+          <Translate
+            id="theme.docs.paginator.previous"
+            description="The label used to navigate to the previous doc">
+            Previous
+          </Translate>
+        )}
+      </div>
+      <div className="pagination-nav__label">{navLink.title}</div>
+    </Link>
+  );
+}
+
+export default DocPaginatorNavLink;

yarn.lock

@@ -10645,10 +10645,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
-infima@0.2.0-alpha.36:
+infima@0.2.0-alpha.37:
-  version "0.2.0-alpha.36"
+  version "0.2.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.36.tgz#205515680e2dc588ec1a07b6ce108e49b29cc810"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.37.tgz#b87ff42d528d6d050098a560f0294fbdd12adb78"
-  integrity sha512-tlhQa7S09+QzQs8hCZ9oBeD6xOFap1f2zDO4I5HRZ4SMFKKGk9sIhwaou1FWpYoqM6aaoK2YN+G1fND+Sad1Qw==
+  integrity sha512-4GX7Baw+/lwS4PPW/UJNY89tWSvYG1DL6baKVdpK6mC593iRgMssxNtORMTFArLPJ/A/lzsGhRmx+z6MaMxj0Q==
 
 inflight@^1.0.4:
   version "1.0.6"