I'm working with my first Gatsby template (Hello Friend by Panr), and I have absolutely no experience with React.js.
I am trying to understand some of the logic of the template's design in gatsby-node.js
and gatsby-config.js
- specifically:
From gatsby-config.js
:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
And from gatsby-node.js
:
const sortedPages = markdownPages.sort((pageA, pageB) => {
const typeA = getType(pageA.node)
const typeB = getType(pageB.node)
return (typeA > typeB) - (typeA < typeB)
})
const posts = allNodes.filter(
({ internal, fileAbsolutePath }) =>
internal.type === 'MarkdownRemark' &&
fileAbsolutePath.indexOf('/posts/') !== -1,
)
// Create posts index with pagination
paginate({
createPage,
items: posts,
component: indexTemplate,
itemsPerPage: siteMetadata.postsPerPage,
pathPrefix: '/',
})
Am I following this correctly in thinking there are two content categories:
1.pages
2.posts
And the posts are enumerated (paginated) but the pages are not?
What does the sorting of pageA
and pageB
achieve?
Also, how would I go about adding additional content categories?
Note: I realize this is a vague question not well-suited for Stack Overflow. I would ask this question on a Gatsby-specific forum, but I do not believe one exists, and this is the forum recommended in the Gatsby community page.
Yes, there're two content categories right now and only the posts are listed by default.
Sorting is probably quite naive, because at the time I was writing the starter, I didn't know any good plugin to handle separate paginations (prev / next post or page) for each content types, so I made my own logic for that. sortedPages
is an array of [...typeA, ...typeB]
and later each item is checked for having siblings to create its own navigation (prev / next).
If you want to create another content type, you can do this in the same way it's defined in the starter. Just add another gatsby-source-filesystem
plugin instance, like:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `typeC`,
path: `${__dirname}/src/typeC`,
},
},
and create typeC
folder inside src
dir with markdown files. And that's it 🤓