Skip to content

Paginate category, tag, and author pages #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

Paginate category, tag, and author pages #32

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7d399a5
Not using pathPrefix inside Pagination component
dajocarter Nov 5, 2018
1604034
Use singular prefix in URL
dajocarter Nov 5, 2018
61bd57a
Paginate category pages
dajocarter Nov 5, 2018
684227c
Paginate tag pages
dajocarter Nov 5, 2018
28ec73a
Paginate author pages
dajocarter Nov 5, 2018
8cadbd9
Add missing field in author query
dajocarter Nov 6, 2018
82218b3
Add fallback for post not having a category or tag
dajocarter Nov 6, 2018
cb6d3e4
Fix copy/paste typo
dajocarter Nov 6, 2018
741ecc8
[WIP] Add linked numbers to pagination
dajocarter Nov 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 42 additions & 2 deletions src/components/Pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
import React from 'react'
import { Link } from 'gatsby'

const Pagination = ({ pageContext }) => {
const { previousPagePath, nextPagePath } = pageContext
const Pagination = ({ pageContext, endSize = 1, midSize = 1 }) => {
const {
previousPagePath,
nextPagePath,
numberOfPages,
humanPageNumber,
} = pageContext
let dots = false

return (
<nav className="pagination" role="navigation">
Expand All @@ -14,6 +20,40 @@ const Pagination = ({ pageContext }) => {
</Link>
</div>
)}
{Array.from({ length: numberOfPages }, (_, i) => {
const index = i + 1
const renderLink =
index <= endSize ||
(index >= humanPageNumber - midSize &&
index <= humanPageNumber + midSize) ||
index > numberOfPages - endSize
let NavItem = null
if (index === humanPageNumber) {
dots = true
NavItem = (
<div className="navbar-item" key={`page-${index}`}>
<span aria-current="page" className="current">
{index}
</span>
</div>
)
} else if (renderLink) {
dots = true
NavItem = (
<div className="navbar-item" key={`page-${index}`}>
<Link to={i === 0 ? `/` : `/${index}`}>{index}</Link>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ve been thinking a bit about this one. We have a pagination helper in the awesome pagination plugin. The trick is, we also support defining a function to calculate what the paginated paths should be. In that case, there’s no way to calculate the page number links without that function.

I’m thinking maybe we add some logic that allows for that function to be passed to the pagination component, with the same default used in both the paginate() function and the component. It’s an interesting one. Will give it a little more thought...

</div>
)
} else if (dots) {
dots = false
NavItem = (
<div className="navbar-item" key={`page-${index}`}>
<span className="dots">&hellip;</span>
</div>
)
}
return NavItem
})}
{nextPagePath && (
<div className="navbar-item">
<Link to={nextPagePath} rel="next">
Expand Down