From 10f1e4df2de5803bffc39442478f56b31c71a70e Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Sat, 7 Aug 2021 21:39:14 +0800
Subject: [PATCH] website: swizzle paginator

---
 website/src/pages/styles.module.css     |  2 +-
 website/src/theme/DocPaginator/index.js | 59 +++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 website/src/theme/DocPaginator/index.js

diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index ca342d98..d5fdec21 100755
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -34,7 +34,7 @@
 }
 
 .sectionPrimary {
-  background-color: var(--ifm-color-primary);
+  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
 }
 
 .sectionPrimaryTitle {
diff --git a/website/src/theme/DocPaginator/index.js b/website/src/theme/DocPaginator/index.js
new file mode 100644
index 00000000..46dadaf9
--- /dev/null
+++ b/website/src/theme/DocPaginator/index.js
@@ -0,0 +1,59 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import Translate, {translate} from '@docusaurus/Translate';
+
+function DocPaginator(props) {
+  const {metadata} = props;
+  return (
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label for the docs pagination',
+      })}>
+      <div className="pagination-nav__item">
+        {metadata.previous && (
+          <a
+            className="pagination-nav__link"
+            href={metadata.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; {metadata.previous.title}
+            </div>
+          </a>
+        )}
+      </div>
+      <div className="pagination-nav__item pagination-nav__item--next">
+        {metadata.next && (
+          <a className="pagination-nav__link" href={metadata.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">
+              {metadata.next.title} &raquo;
+            </div>
+          </a>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export default DocPaginator;