feat(v2): bootstrap pagination (#2695)

* feat(v2): Add pagination

* çhore(v2): remove console.log

* feat(v2): remove changes in template

packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js

@@ -7,10 +7,10 @@
 
 import React from 'react';
 import BlogPostCard from '@theme/BlogPostItem';
-import Footer from '@theme/Footer';
+import BlogListPaginator from '@theme/BlogListPaginator';
 
 function BlogListPage(props) {
-  const {items} = props;
+  const {items, metadata} = props;
 
   return (
     <div className="container-fluid mt-5">
@@ -27,7 +27,7 @@ function BlogListPage(props) {
             </BlogPostCard>
           </div>
         ))}
-        <Footer />
+        <BlogListPaginator metadata={metadata} />
       </div>
     </div>
   );

packages/docusaurus-theme-bootstrap/src/theme/BlogListPaginator/index.js

@@ -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 Link from '@docusaurus/Link';
+
+function BlogListPaginator(props) {
+  const {previousPage, nextPage} = props.metadata;
+
+  return (
+    <nav
+      aria-label="Blog list page navigation"
+      className="my-5 col col-xl-4 offset-xl-4 col-xs-6">
+      <ul className="pagination justify-content-between">
+        <li className="page-item">
+          {previousPage && (
+            <Link className="page-link rounded-pill" to={previousPage}>
+              Older
+            </Link>
+          )}
+        </li>
+        <li className="page-item">
+          {nextPage && (
+            <Link className="page-link rounded-pill" to={nextPage}>
+              Newer
+            </Link>
+          )}
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default BlogListPaginator;

packages/docusaurus-theme-bootstrap/src/theme/BlogPostPage/index.js

@@ -7,23 +7,28 @@
 
 import React from 'react';
 import BlogPostItem from '@theme/BlogPostItem';
+import BlogPostPaginator from '@theme/BlogPostPaginator';
 
 function BlogPostPage(props) {
   const {content: BlogPostContents} = props;
   const {frontMatter, metadata} = BlogPostContents;
+  const {nextItem, prevItem} = metadata;
 
   return (
     <div className="container-fluid my-5">
       <div className="row row-cols-1 row-cols-sm-1">
         <div
           key={metadata.permalink}
-          className="col col-md-6 offset-md-3 col-xs-6 mb-5">
+          className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
           <BlogPostItem
             frontMatter={frontMatter}
             metadata={metadata}
             isBlogPostPage>
             <BlogPostContents />
           </BlogPostItem>
+          {(nextItem || prevItem) && (
+            <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+          )}
         </div>
       </div>
     </div>

packages/docusaurus-theme-bootstrap/src/theme/BlogPostPaginator/index.js

@@ -0,0 +1,36 @@
+/**
+ * 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';
+
+function BlogPostPaginator(props) {
+  const {nextItem, prevItem} = props;
+
+  return (
+    <nav aria-label="Blog post page navigation" className="my-5">
+      <ul className="pagination justify-content-between">
+        <li className="page-item">
+          {prevItem && (
+            <Link className="page-link rounded-pill" to={prevItem.permalink}>
+              &laquo; {prevItem.title}
+            </Link>
+          )}
+        </li>
+        <li className="page-item">
+          {nextItem && (
+            <Link className="page-link rounded-pill" to={nextItem.permalink}>
+              {nextItem.title} &raquo;
+            </Link>
+          )}
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default BlogPostPaginator;