feat(search): ✨ add search results pagination

config/config.yml

@@ -73,6 +73,11 @@ features:
     debounceTime: 380
     snippetLength: 23
     hitsPerPage: 10
+    pagination:
+      enabled: true
+      totalPages: 10
+      showPrevious: true
+      showNext: true
   toc:
     depth: 3
   previousNext:

config/default.js

@@ -61,6 +61,12 @@ module.exports = {
       debounceTime: 380,
       snippetLength: 22,
       hitsPerPage: 10,
+      pagination: {
+        enabled: true,
+        totalPages: 10,
+        showNext: true,
+        showPrevious: true
+      }
     },
     toc: {
       depth: 3,

src/components/Search/Hits.js

@@ -43,7 +43,6 @@ export const HitsWrapper = styled.div`
   }
   * {
     margin-top: 0;
-    padding: 0;
     color: ${(props) => props.theme.search.font.base};
   }
   ul {

src/components/Search/Pagination.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+
+const Button = styled(({ refine, page, children, ...props }) => {
+  const changePage = (event) => {
+    event.preventDefault();
+    refine(page);
+  };
+  return (
+    <button href="#" onClick={changePage} {...props}>
+      {children}
+    </button>
+  );
+})`
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  transition: ${(props) => props.theme.transitions.hover};
+  background-color: ${(props) =>
+    props.isCurrent
+      ? props.theme.search.pagination.current.background
+      : props.theme.search.pagination.background};
+  border: 1px solid ${(props) => props.theme.search.pagination.border};
+
+  color: ${(props) =>
+    props.isCurrent
+      ? props.theme.search.pagination.current.font
+      : props.theme.search.pagination.font};
+  border-radius: 4px;
+  box-shadow: 0 0 4px 0 ${(props) => props.theme.colors.border};
+  font-size: 1em;
+  cursor: inherit;
+  &:hover {
+    background-color: ${(props) => props.theme.search.pagination.hover};
+    color: ${(props) => props.theme.search.pagination.fontHover};
+  }
+  svg {
+    stroke: ${(props) => props.theme.search.pagination.font};
+    vertical-align: middle;
+  }
+`;
+
+const PagesList = styled.ul`
+  display: flex;
+  list-style: none;
+  margin: 0 auto;
+  align-items: center;
+  li {
+    margin: 0 1px;
+    cursor: pointer;
+  }
+`;
+
+const PagesListWrapper = styled.div`
+  padding-top: 14px;
+  padding-bottom: 2px;
+  border-top: 1px solid ${(props) => props.theme.search.pagination.border};
+  width: 100%;
+  display: flex;
+`;
+
+const leftRightMargin = '12px';
+
+const Pagination = ({ totalPages, nbPages, currentPage, refine, showPrevious, showNext }) => {
+  const pagesToShow = totalPages && nbPages > totalPages ? totalPages : nbPages;
+  const previousPage = currentPage > 1 ? currentPage - 1 : 1;
+  const nextPage = currentPage === pagesToShow ? currentPage : currentPage + 1;
+  return (
+    <PagesListWrapper>
+      <PagesList>
+        {showPrevious ? (
+          <li style={{ marginRight: leftRightMargin }}>
+            <Button refine={refine} page={previousPage}>
+              <ChevronLeft />
+            </Button>
+          </li>
+        ) : null}
+        {new Array(pagesToShow).fill(null).map((_, index) => {
+          const page = index + 1;
+          const isCurrent = currentPage === page;
+
+          return (
+            <li key={index}>
+              <Button refine={refine} page={page} isCurrent={isCurrent}>
+                {page}
+              </Button>
+            </li>
+          );
+        })}
+        {showNext ? (
+          <li style={{ marginLeft: leftRightMargin }}>
+            <Button refine={refine} page={nextPage}>
+              <ChevronRight />
+            </Button>
+          </li>
+        ) : (
+          ''
+        )}
+      </PagesList>
+    </PagesListWrapper>
+  );
+};
+
+export default Pagination;

src/components/Search/Sidebar.js

@@ -12,7 +12,7 @@ const SearchWrapper = styled.div`
   right: 0;
   left: auto;
   top: 0;
-  width: 490px;
+  width: 480px;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   background: ${(props) => props.theme.colors.background};
   display: flex;

src/components/Search/algolia/index.js

@@ -12,7 +12,8 @@ import config from 'config';
 import Input from './input';
 import { PageHit }  from './hitComps';
 import styled from '@emotion/styled';
-import SearchStatus from '../Status'
+import SearchStatus from '../Status';
+import Pagination from './pagination';
 
 
 const Root = styled.div`
@@ -78,17 +79,15 @@ class Algolia extends React.Component {
             )}
           </Index>
         </HitsWrapper>
-
-        {/* <Pagination
-          // Optional parameters
-          showFirst={true}
-          showPrevious={true}
-          showNext={true}
-          showLast={true}
-          padding={3}
-          totalPages={10}
-          // translations={object}
-        /> */}
+        {this.state.query.length > 1 &&
+        this.state.ready &&
+        config.features.search.pagination.enabled ? (
+          <Pagination
+            totalPages={config.features.search.pagination.totalPages}
+            showPrevious={config.features.search.pagination.showPrevious}
+            showNext={config.features.search.pagination.showNext}
+          />
+        ) : null}
         <Configure
           hitsPerPage={config.features.search.hitsPerPage}
           attributesToSnippet={[`excerpt:${config.features.search.snippetLength}`]}

src/components/Search/algolia/pagination.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { connectPagination } from 'react-instantsearch-dom';
+import { Pagination } from '../';
+export default connectPagination(({ currentRefinement, ...rest }) => (
+  <Pagination
+    currentPage={currentRefinement}
+    {...rest}
+  />
+));

src/components/Search/index.js

@@ -1,2 +1,3 @@
 export { SearchInput, SidebarSearchInput } from './Input';
+export { default as Pagination } from './Pagination';
 export { default as SearchSidebar } from './Sidebar';

src/theme/base.js

@@ -15,6 +15,10 @@ const decreaseIntensivity = (color, factor) => {
   return intensified.hex();
 };
 
+const grayscaleCompatible = (color) => {
+  return increaseIntensivity(colorfn(color).negate().grayscale().hex(), .7);
+}
+
 const colors = {
   ...defaultColors,
 
@@ -105,7 +109,17 @@ const search = (colors) => ({
     highlight: colors.fontDark
   },
   hover: colors.border,
-  border: colors.border
+  border: colors.border,
+  pagination: {
+    background: colors.mainBackground,
+    border: colors.border,
+    font: colors.font,
+    hover: colors.border,
+    current: {
+      background: colors.primary,
+      font: grayscaleCompatible(colors.primary)
+    }
+  }
 });
 
 const darkModeSwitch = (colors) => ({
@@ -122,7 +136,7 @@ const editOnRepo = (colors) => ({
   hover: colors.hover,
   font: {
     base: colors.font,
-    hover: colorfn(colors.hover).rotate(90).grayscale().hex(),
+    hover: grayscaleCompatible(colors.hover),
   },
 });