feat: add pagination

exein-io · Sep 6, 2022 · 8920cca · 8920cca
1 parent 81f3503
commit 8920cca
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
     "react-modal-video": "^1.2.9",
+    "react-paginate": "^8.1.3",
     "react-popover": "^0.5.10",
     "react-refresh": "^0.14.0",
     "slugify": "^1.6.5",

diff --git a/src/common/blog/Pagination.js b/src/common/blog/Pagination.js
@@ -0,0 +1,48 @@
+import React from "react";
+import { navigate } from "gatsby";
+import ReactPaginate from 'react-paginate';
+
+const Pagination = ({ currentPageIndex, pageCount, blogPageURL }) => {
+
+    const handlePageChange = ({ selected }) => {
+        const navigatePath =
+          selected === 0 ? blogPageURL : blogPageURL + '/' + (selected + 1);
+        navigate(navigatePath);
+      };
+
+    return(
+        <div className='pagination-wrapper'>
+            <ReactPaginate
+            containerClassName="pagination-container"
+            activeLinkClassName="active-page-and-break-link"
+            pageLinkClassName="pagination-page-and-break-link"
+            breakLinkClassName="pagination-page-and-break-link"
+            previousClassName="pagination-link-wrapper right"
+            nextClassName="pagination-link-wrapper left"
+            previousLinkClassName="pagination-link"
+            nextLinkClassName="pagination-link"
+            disabledClassName="pagination-disabled"
+            previousLabel={
+                <>
+                <span className='link-triangle rotate-180 md-hidden' />
+                <span className="md-hidden">Previous</span>
+                </>
+            }
+            nextLabel={
+                <>
+                <span className="md-hidden">Next</span>
+                <span className='link-triangle md-hidden' />
+                </>
+            }
+            forcePage={currentPageIndex}
+            pageCount={pageCount}
+            pageRangeDisplayed={5}
+            marginPagesDisplayed={1}
+            onPageChange={handlePageChange}
+            />
+        </div> 
+    );
+}
+
+
+export default Pagination;
diff --git a/src/stylesheets/blog.scss b/src/stylesheets/blog.scss
@@ -38,14 +38,15 @@ main {margin-bottom: 0}
 }
 
 .posts-wrapper {
-  max-width: 968px;
+  min-width: 968px;
   border-left: 1px solid #e6e6e6;
   padding: 64px 0 112px 64px;
 
   @media (max-width: 1279px) {
     border: none;
     padding-left: 0;
-    max-width: 90%;
+    width: 90%;
+    min-width: 0;
     margin-left: auto;
     margin-right: auto;
   } 
@@ -159,31 +160,114 @@ main {margin-bottom: 0}
   }
 }
 
-.links-container {
+.pagination-wrapper {
   max-width: 1015px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 80px;
-  display: flex;
-  justify-content: space-between;
+  position: relative;
 
-  a {
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1;
-    background: linear-gradient(87.89deg, #e69d00 0%, #e6b000 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: #1a1a1a;
-    transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+  .pagination-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
 
-    &:hover {
-      color: #ffffff00;
+    li {
+      margin: 0;
+
+      .pagination-page-and-break-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 100%;
+        transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+        margin: 0 16px;
+        background: #ffffffff;
+        color: #1a1a1a;
+        font-size: 14px;
+        line-height: 1;
+        font-weight: 500;
+
+        &:hover {
+          color: #ffffff;
+          background: linear-gradient(87.89deg, #FAAB00 0%, #EBBC00 100%);
+        }
+      }
+    }
+
+    .active-page-and-break-link {
+      color: #ffffff;
+      background: linear-gradient(87.89deg, #FAAB00 0%, #EBBC00 100%);
+    }
+
+    .pagination-link-wrapper {
+      list-style: none;
+      margin: 0;
+
+      .pagination-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 1;
+        background: linear-gradient(87.89deg, #e69d00 0%, #e6b000 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: #1a1a1a;
+        transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+
+        &:hover {
+          color: #ffffff00;
+
+          .pagination-link + .link-triangle {
+            background-color: #ebc400;
+          }
+        }
+
+          .link-triangle {
+            width: 6px;
+            height: 9px;
+            margin-left: 8px;
+            background-color: #f5d400;
+            -webkit-mask-image: url("../assets/link.svg");
+            mask-image: url("../assets/link.svg");
+            transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+        }
+
+        .rotate-180 {
+          transform: rotate(180deg);
+          margin-left: 0;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .right {
+      margin-right: auto;
+    }
+
+    .left {
+      margin-left: auto;
+    }
+
+    .md-hidden {
+        @media (max-width: 767px) {
+        display: none;
+      }
     }
   }
 }
 
+.pagination-disabled {
+  opacity: 0;
+  visibility: hidden;
+}
+
 
 .blog-post {
   max-width: 1015px;
@@ -199,8 +283,19 @@ main {margin-bottom: 0}
 .blog-post-card {
   border: 1px solid #e6e6e6;
   border-radius: 8px;
-  display: flex;
   overflow: hidden;
+  padding: 0;
+  width: 100%;
+  word-wrap: break-word;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+    @media (max-width: 1279px) {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
 
   @media (max-width: 1023px) {
     flex-direction: column;
@@ -232,21 +327,6 @@ main {margin-bottom: 0}
   }
 }
 
-.blog-post-card {
-  padding: 0;
-  width: 100%;
-  word-wrap: break-word;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  @media (max-width: 1279px) {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-  } 
-}
-
 .blog-post-card, .blog-post {
   table {
     border-collapse: collapse;

diff --git a/src/templates/blog.js b/src/templates/blog.js
@@ -1,18 +1,16 @@
 import React from "react";
-import { graphql, Link } from "gatsby";
+import { graphql } from "gatsby";
 import Helmet from "react-helmet";
 
 import Layout from "../layouts";
 import PostCard from "../common/blog-post/PostCard";
 
 import "../stylesheets/blog.scss";
 import Categories from "../common/blog/Categories";
+import Pagination from "../common/blog/Pagination";
 
 export default function NewsIndex({ pageContext }) {
-
-  const { group, index, first, last } = pageContext;
-  const prevUrl = index - 1 == 1 ? "" : (index - 1).toString();
-  const nextUrl = (index + 1).toString();
+  const { group, pathPrefix, pageCount } = pageContext;
   const pageMetaTitle = "eBPF - Blog";
   const pageMetaDescription =
     "The latest news, updates and articles covering eBPF and related topics.";
@@ -77,16 +75,7 @@ export default function NewsIndex({ pageContext }) {
           {group.filter((post) => post.node.frontmatter.isFeatured !== true).map(({ node: post }) => (
             <PostCard key={post.id} post={post} />
           ))}
-            <div className='links-container'>
-              <div className='prev-link'>
-                {!first && (
-                  <Link to={`/blog/${prevUrl}`}>&lt; Previous</Link>
-                )}
-              </div>
-              <div className='next-link'>
-                {!last && <Link to={`/blog/${nextUrl}`}>Next &gt;</Link>}
-              </div>
-            </div>
+          <Pagination currentPageIndex={pathPrefix} pageCount={pageCount} blogPageURL={pathPrefix} />
           </div>
         </div>
       </div>