mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
working front page pagination
This commit is contained in:
parent
d5f578846d
commit
98cae1e034
132
gatsby-node.js
132
gatsby-node.js
@ -1,5 +1,6 @@
|
|||||||
const path = require('path')
|
const path = require('path')
|
||||||
const { createFilePath } = require('gatsby-source-filesystem')
|
const { createFilePath } = require('gatsby-source-filesystem')
|
||||||
|
const { paginate } = require('gatsby-awesome-pagination')
|
||||||
|
|
||||||
// Create slug & date for posts from file path values
|
// Create slug & date for posts from file path values
|
||||||
exports.onCreateNode = ({ node, actions, getNode }) => {
|
exports.onCreateNode = ({ node, actions, getNode }) => {
|
||||||
@ -46,9 +47,6 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
const { createPage } = actions
|
const { createPage } = actions
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const postTemplate = path.resolve('src/templates/Post.jsx')
|
|
||||||
const archiveTemplate = path.resolve('src/templates/Archive.jsx')
|
|
||||||
|
|
||||||
resolve(
|
resolve(
|
||||||
graphql(
|
graphql(
|
||||||
`
|
`
|
||||||
@ -76,47 +74,105 @@ exports.createPages = ({ graphql, actions }) => {
|
|||||||
reject(result.errors)
|
reject(result.errors)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create Posts
|
|
||||||
const posts = result.data.allMarkdownRemark.edges
|
const posts = result.data.allMarkdownRemark.edges
|
||||||
|
|
||||||
posts.forEach(post => {
|
// Generate posts & posts index
|
||||||
createPage({
|
generateContent(createPage, posts)
|
||||||
path: `${post.node.fields.slug}`,
|
|
||||||
component: postTemplate,
|
|
||||||
context: {
|
|
||||||
slug: post.node.fields.slug
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// Category & Tag Pages
|
// Generate Tag Pages
|
||||||
const tagSet = new Set()
|
createTagPages(createPage, posts)
|
||||||
const tagMap = new Map()
|
|
||||||
|
|
||||||
posts.forEach(post => {
|
|
||||||
if (post.node.frontmatter.tags) {
|
|
||||||
post.node.frontmatter.tags.forEach(tag => {
|
|
||||||
tagSet.add(tag)
|
|
||||||
|
|
||||||
const array = tagMap.has(tag) ? tagMap.get(tag) : []
|
|
||||||
array.push(post)
|
|
||||||
tagMap.set(tag, array)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const tagList = Array.from(tagSet)
|
|
||||||
|
|
||||||
tagList.forEach(tag => {
|
|
||||||
createPage({
|
|
||||||
path: `/tag/${tag}/`,
|
|
||||||
component: archiveTemplate,
|
|
||||||
context: { tag }
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const generateContent = (createPage, posts) => {
|
||||||
|
const postTemplate = path.resolve('src/templates/Post.jsx')
|
||||||
|
const postsTemplate = path.resolve('src/templates/Posts.jsx')
|
||||||
|
|
||||||
|
// Create Post pages
|
||||||
|
posts.forEach(post => {
|
||||||
|
createPage({
|
||||||
|
path: `${post.node.fields.slug}`,
|
||||||
|
component: postTemplate,
|
||||||
|
context: {
|
||||||
|
slug: post.node.fields.slug
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create paginated front page
|
||||||
|
paginate({
|
||||||
|
createPage,
|
||||||
|
items: posts,
|
||||||
|
itemsPerPage: 5,
|
||||||
|
pathPrefix: '/',
|
||||||
|
component: postsTemplate
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const createTagPages = (createPage, posts) => {
|
||||||
|
const archiveTemplate = path.resolve('src/templates/Archive.jsx')
|
||||||
|
|
||||||
|
const tagSet = new Set()
|
||||||
|
const tagMap = new Map()
|
||||||
|
|
||||||
|
posts.forEach(post => {
|
||||||
|
if (post.node.frontmatter.tags) {
|
||||||
|
post.node.frontmatter.tags.forEach(tag => {
|
||||||
|
tagSet.add(tag)
|
||||||
|
|
||||||
|
const array = tagMap.has(tag) ? tagMap.get(tag) : []
|
||||||
|
array.push(post)
|
||||||
|
tagMap.set(tag, array)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const tagList = Array.from(tagSet)
|
||||||
|
|
||||||
|
tagList.forEach(tag => {
|
||||||
|
// Create paginated tag pages
|
||||||
|
// paginate({
|
||||||
|
// createPage,
|
||||||
|
// items: tagList, // An array of objects
|
||||||
|
// itemsPerPage: 5,
|
||||||
|
// pathPrefix: `/tag/${tag.toLowerCase()}`,
|
||||||
|
// component: archiveTemplate
|
||||||
|
// })
|
||||||
|
createPage({
|
||||||
|
path: `/tag/${tag}/`,
|
||||||
|
component: archiveTemplate,
|
||||||
|
context: { tag }
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Object.keys(posts).forEach(tagName => {
|
||||||
|
// const pageSize = 5
|
||||||
|
// const pagesSum = Math.ceil(posts[tagName].length / pageSize)
|
||||||
|
|
||||||
|
// for (let page = 1; page <= pagesSum; page++) {
|
||||||
|
// createPage({
|
||||||
|
// path:
|
||||||
|
// page === 1
|
||||||
|
// ? `/tag/${tagName.toLowerCase()}`
|
||||||
|
// : `/tag/${tagName.toLowerCase()}/page/${page}`,
|
||||||
|
// component: tagTemplate,
|
||||||
|
// context: {
|
||||||
|
// posts: paginate(posts[tagName], pageSize, page),
|
||||||
|
// tag: tagName,
|
||||||
|
// pagesSum,
|
||||||
|
// page
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
// function paginate(array, page_size, page_number) {
|
||||||
|
// return array
|
||||||
|
// .slice(0)
|
||||||
|
// .slice((page_number - 1) * page_size, page_number * page_size)
|
||||||
|
// }
|
||||||
|
@ -22,7 +22,8 @@
|
|||||||
"last 3 versions"
|
"last 3 versions"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gatsby": "^2.0.0-rc.8",
|
"gatsby": "^2.0.0-rc.9",
|
||||||
|
"gatsby-awesome-pagination": "^0.1.1",
|
||||||
"gatsby-image": "^2.0.0-rc.1",
|
"gatsby-image": "^2.0.0-rc.1",
|
||||||
"gatsby-plugin-catch-links": "^2.0.2-rc.1",
|
"gatsby-plugin-catch-links": "^2.0.2-rc.1",
|
||||||
"gatsby-plugin-lunr": "^1.1.0",
|
"gatsby-plugin-lunr": "^1.1.0",
|
||||||
|
@ -39,7 +39,7 @@ Archive.propTypes = {
|
|||||||
export default Archive
|
export default Archive
|
||||||
|
|
||||||
export const archiveQuery = graphql`
|
export const archiveQuery = graphql`
|
||||||
query($tag: String) {
|
query($tag: String!) {
|
||||||
tag: allMarkdownRemark(
|
tag: allMarkdownRemark(
|
||||||
filter: { frontmatter: { tags: { eq: $tag } } }
|
filter: { frontmatter: { tags: { eq: $tag } } }
|
||||||
sort: { order: DESC, fields: [fields___date] }
|
sort: { order: DESC, fields: [fields___date] }
|
||||||
|
@ -9,10 +9,11 @@ import PostContent from '../components/atoms/PostContent'
|
|||||||
import PostMore from '../components/atoms/PostMore'
|
import PostMore from '../components/atoms/PostMore'
|
||||||
import PostLinkActions from '../components/atoms/PostLinkActions'
|
import PostLinkActions from '../components/atoms/PostLinkActions'
|
||||||
import postStyles from '../templates/Post.module.scss'
|
import postStyles from '../templates/Post.module.scss'
|
||||||
import styles from './index.module.scss'
|
import styles from './Posts.module.scss'
|
||||||
|
|
||||||
const IndexPage = ({ data, location }) => {
|
const IndexPage = ({ data, location, pageContext }) => {
|
||||||
const edges = data.allMarkdownRemark.edges
|
const edges = data.allMarkdownRemark.edges
|
||||||
|
const { previousPagePath, nextPagePath } = pageContext
|
||||||
|
|
||||||
const Posts = edges.map(({ node }) => {
|
const Posts = edges.map(({ node }) => {
|
||||||
const { type, linkurl, title, image } = node.frontmatter
|
const { type, linkurl, title, image } = node.frontmatter
|
||||||
@ -40,6 +41,12 @@ const IndexPage = ({ data, location }) => {
|
|||||||
<PostLinkActions slug={slug} linkurl={linkurl} />
|
<PostLinkActions slug={slug} linkurl={linkurl} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
|
<div>
|
||||||
|
{previousPagePath ? (
|
||||||
|
<Link to={previousPagePath}>Previous</Link>
|
||||||
|
) : null}
|
||||||
|
{nextPagePath ? <Link to={nextPagePath}>Next</Link> : null}
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
@ -49,14 +56,19 @@ const IndexPage = ({ data, location }) => {
|
|||||||
|
|
||||||
IndexPage.propTypes = {
|
IndexPage.propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
|
pageContext: PropTypes.object.isRequired,
|
||||||
location: PropTypes.object.isRequired
|
location: PropTypes.object.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
export default IndexPage
|
export default IndexPage
|
||||||
|
|
||||||
export const indexQuery = graphql`
|
export const indexQuery = graphql`
|
||||||
query {
|
query($skip: Int!, $limit: Int!) {
|
||||||
allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
|
allMarkdownRemark(
|
||||||
|
sort: { order: DESC, fields: [fields___date] }
|
||||||
|
skip: $skip
|
||||||
|
limit: $limit
|
||||||
|
) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
id
|
id
|
Loading…
Reference in New Issue
Block a user