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

pages/blog.js

@@ -3,13 +3,20 @@ import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
 import { PageSeo } from '@/components/SEO'
 
-export async function getStaticProps() {
-  const posts = await getAllFilesFrontMatter('blog')
+export const POSTS_PER_PAGE = 10
 
-  return { props: { posts } }
+export async function getStaticProps() {
+  const getPosts = await getAllFilesFrontMatter('blog')
+  const posts = getPosts.splice(0, POSTS_PER_PAGE)
+  const pagination = {
+    currentPage: 1,
+    totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE) + 1,
+  }
+
+  return { props: { posts, pagination } }
 }
 
-export default function Blog({ posts }) {
+export default function Blog({ posts, pagination }) {
   return (
     <>
       <PageSeo
@@ -17,7 +24,7 @@ export default function Blog({ posts }) {
         description={siteMetadata.description}
         url={`${siteMetadata.siteUrl}/blog`}
       />
-      <ListLayout posts={posts} title="All Posts" />
+      <ListLayout posts={posts} pagination={pagination} title="All Posts" />
     </>
   )
 }