How to understand the logic of Gatsby blog template content types?

Question

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.

score 2 · Accepted Answer · answered Jan 17 '20 at 23:30

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

Cool, so I could do one for just pictures and use another Gatsby plugin for an image gallery? (Googling) Wow, there are a lot of Gatsby plugins for galleries... >_O — AveryFreeman, Jan 18 '20 at 01:24
As far as I know you can do whatever you want in Gatsby using plugins ;-) A lot of things in Hello Friend theme is custom made, so you can do similar things as well ;-) — Radek, Jan 18 '20 at 08:19

How to understand the logic of Gatsby blog template content types?

1 Answers1