Skip to content

Commit

Permalink
blog pagination (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bianchimro
bianchimro committed Jul 14, 2019
1 parent b132ba6 commit a60f96f
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 15 deletions.
24 changes: 22 additions & 2 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports.createPages = ({ actions, graphql }) => {
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
Expand All @@ -51,13 +51,33 @@ exports.createPages = ({ actions, graphql }) => {
return Promise.reject(result.errors)
}

return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
let pages = result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: getTemplate(node.frontmatter),
context: {}, // additional data can be passed via context
})
})

// Create blog-list pages
const posts = result.data.allMarkdownRemark.edges.filter(x => get(x, 'node.frontmatter.layout') !== 'gallery_project')
const postsPerPage = 10
const numPages = Math.ceil(posts.length / postsPerPage)
Array.from({ length: numPages }).forEach((_, i) => {

createPage({
path: i === 0 ? `/blog` : `/blog/${i + 1}`,
component: path.resolve("./src/templates/blogListTemplate.js"),
context: {
limit: postsPerPage,
skip: i * postsPerPage,
numPages,
currentPage: i + 1,
},
})
})

return pages
})

}
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1"
"react-helmet": "^5.2.1",
"reactstrap": "^8.0.1"
},
"devDependencies": {
"prettier": "^1.18.2"
Expand Down
4 changes: 2 additions & 2 deletions src/components/blog-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from "react"

const BlogBlock = ({ node }) => {

const { html, snippet, frontmatter} = node
const { html, excerpt, frontmatter} = node
const { image } = frontmatter


Expand All @@ -25,7 +25,7 @@ const BlogBlock = ({ node }) => {
<h1>{node.frontmatter.title}</h1>
<div
// className={styles.blogPostContent}
dangerouslySetInnerHTML={{ __html: snippet }}
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</div>
<div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const Header = ({ siteTitle }) => (
</button>
<div className="collapse navbar-collapse">
<div className="navbar-nav ml-auto">
<Link className="nav-item nav-link" activeClassName="active" to="/blog">Blog</Link>
<Link className="nav-item nav-link" activeClassName="active" to="/learning">Learning</Link>
<Link className="nav-item nav-link" activeClassName="active" to="/gallery">Gallery</Link>
<Link className="nav-item nav-link" activeClassName="active" to="/blog" partiallyActive={true}>Blog</Link>
<Link className="nav-item nav-link" activeClassName="active" to="/learning" partiallyActive={true}>Learning</Link>
<Link className="nav-item nav-link" activeClassName="active" to="/gallery" partiallyActive={true}>Gallery</Link>
</div>
</div>
</div>
Expand Down
32 changes: 27 additions & 5 deletions src/pages/blog.js → src/templates/blogListTemplate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@ import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import BlogBlock from "../components/blog-block"
// import { graphql } from 'gatsby'
import range from 'lodash/range'
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';

const BlogPage = ({data}) => {

const BlogPage = ({data, pathContext}) => {

const { numPages, currentPage } = pathContext


return <Layout>
<SEO title="Blog" />
Expand All @@ -21,20 +26,36 @@ const BlogPage = ({data}) => {
))}
</div>
</div>


{/* pagination */}
{numPages > 1 && <div className="d-flex flex-row justify-content-center mt-5"><Pagination aria-label="Page navigation example">
{ range(numPages).map(page => (
<PaginationItem key={page} active={currentPage === page + 1}>
<PaginationLink href={`/blog/${page === 0 ? '' : page + 1}`}>
{page + 1}
</PaginationLink>
</PaginationItem>
))}
</Pagination></div>}


</div>



</Layout>
}

export default BlogPage

export const query = graphql`
query {
export const pageQuery = graphql`
query blogListQuery($skip: Int!, $limit: Int!){
allMarkdownRemark(
filter: {frontmatter: {layout: {ne: "gallery_project"}}}
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
limit: $limit
skip: $skip
) {
edges {
node {
Expand All @@ -50,6 +71,7 @@ query {
}
html
snippet
excerpt
}
}
}
Expand Down
93 changes: 91 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -717,6 +717,13 @@
dependencies:
regenerator-runtime "^0.13.2"

"@babel/runtime@^7.2.0":
version "7.5.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.4.tgz#cb7d1ad7c6d65676e66b47186577930465b5271b"
integrity sha512-Na84uwyImZZc3FKf4aUF1tysApzwf3p2yuFBIyBfbzT5glzKTdvYI4KVW4kcgjrzoGUjC7w3YyCHcJKaRxsr2Q==
dependencies:
regenerator-runtime "^0.13.2"

"@babel/template@^7.1.0", "@babel/template@^7.4.4":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
Expand Down Expand Up @@ -2640,6 +2647,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.3:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==

cli-boxes@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
Expand Down Expand Up @@ -3104,6 +3116,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

create-react-context@<=0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"

create-react-context@^0.2.1:
version "0.2.3"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
Expand Down Expand Up @@ -3738,7 +3758,7 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"

dom-helpers@^3.2.1:
dom-helpers@^3.2.1, dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
Expand Down Expand Up @@ -7389,6 +7409,16 @@ lodash.foreach@^4.3.0, lodash.foreach@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=

lodash.isfunction@^3.0.9:
version "3.0.9"
resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==

lodash.isobject@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
integrity sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=

lodash.isplainobject@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
Expand Down Expand Up @@ -7474,6 +7504,11 @@ lodash.toarray@^4.4.0:
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=

lodash.tonumber@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz#0b96b31b35672793eb7f5a63ee791f1b9e9025d9"
integrity sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk=

lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
Expand Down Expand Up @@ -9084,6 +9119,11 @@ pnp-webpack-plugin@^1.4.1:
dependencies:
ts-pnp "^1.1.2"

popper.js@^1.14.4:
version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==

portfinder@^1.0.20:
version "1.0.20"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
Expand Down Expand Up @@ -9562,7 +9602,7 @@ prompts@^2.1.0:
kleur "^3.0.2"
sisteransi "^1.0.0"

prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -9838,6 +9878,18 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react-popper@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
dependencies:
"@babel/runtime" "^7.1.2"
create-react-context "<=0.2.2"
popper.js "^1.14.4"
prop-types "^15.6.1"
typed-styles "^0.0.7"
warning "^4.0.2"

react-reconciler@^0.20.0:
version "0.20.4"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.20.4.tgz#3da6a95841592f849cb4edd3d38676c86fd920b2"
Expand All @@ -9856,6 +9908,16 @@ react-side-effect@^1.1.0:
exenv "^1.2.1"
shallowequal "^1.0.1"

react-transition-group@^2.3.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
dependencies:
dom-helpers "^3.4.0"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"

react@^16.8.4, react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
Expand All @@ -9866,6 +9928,21 @@ react@^16.8.4, react@^16.8.6:
prop-types "^15.6.2"
scheduler "^0.13.6"

reactstrap@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.0.1.tgz#0b663c8195f540bc1d6d5dbcbcf73cab56fe7c79"
integrity sha512-GvUWEL+a2+3npK1OxTXcNBMHXX4x6uc1KQRzK7yAOl+8sAHTRWqjunvMUfny3oDh8yKVzgqpqQlWWvs1B2HR9A==
dependencies:
"@babel/runtime" "^7.2.0"
classnames "^2.2.3"
lodash.isfunction "^3.0.9"
lodash.isobject "^3.0.2"
lodash.tonumber "^4.0.3"
prop-types "^15.5.8"
react-lifecycles-compat "^3.0.4"
react-popper "^1.3.3"
react-transition-group "^2.3.1"

read-chunk@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.2.0.tgz#2984afe78ca9bfbbdb74b19387bf9e86289c16ca"
Expand Down Expand Up @@ -11740,6 +11817,11 @@ type-of@^2.0.1:
resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972"
integrity sha1-5yoXQYllaOn2KDeNgW1pEvfyOXI=

typed-styles@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==

typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
Expand Down Expand Up @@ -12159,6 +12241,13 @@ warning@^3.0.0:
dependencies:
loose-envify "^1.0.0"

warning@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"

watchpack@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
Expand Down

0 comments on commit a60f96f

Please sign in to comment.