Add pagination support (#52)

* Add pagination support

* Change posts per page value to 10

* Change /blog/1 page to be same as /blog/
Modify canonical url to reflect current page

* Conditionally render pagination component
This commit is contained in:
Ahmad Al Maaz
2021-05-26 16:56:19 +03:00
committed by GitHub
parent 3c3cb9cbeb
commit 847f2537c3
5 changed files with 9439 additions and 21 deletions

View File

@ -2,10 +2,11 @@ import Link from '@/components/Link'
import Tag from '@/components/Tag'
import siteMetadata from '@/data/siteMetadata'
import { useState } from 'react'
import Pagination from '@/components/Pagination'
const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
export default function ListLayout({ posts, title }) {
export default function ListLayout({ posts, title, pagination }) {
const [searchValue, setSearchValue] = useState('')
const filteredBlogPosts = posts.filter((frontMatter) => {
const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
@ -81,6 +82,9 @@ export default function ListLayout({ posts, title }) {
})}
</ul>
</div>
{pagination && (
<Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
)}
</>
)
}