Programatically create chapter pages

- Add chapter content folder for json file and create seattle.json
- Add chapter schema to CMS
- Update gatsby-node.js to query allChapters and create a page for each one

Author: deweydell

content/chapters/seattle.json

@@ -0,0 +1,3 @@
+{
+  "city": "Seattle"
+}

gatsby-node.js

@@ -6,6 +6,25 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
+// Add slug field based on filepath to content nodes
+// We use this slug to create the path for the automatically generated pages
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+
+  if (
+    node.internal.type === `MarkdownRemark` ||
+    node.internal.type === `ChaptersJson`
+  ) {
+    const value = createFilePath({ node, getNode })
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    })
+  }
+}
+
+// Create subpages from markdown and chapter pages from json
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
@@ -24,41 +43,50 @@ exports.createPages = ({ actions, graphql }) => {
           }
         }
       }
+      allChaptersJson {
+        edges {
+          node {
+            id
+            city
+            fields {
+              slug
+            }
+          }
+        }
+      }
     }
   `).then(result => {
     if (result.errors) {
       result.errors.forEach(e => console.error(e.toString()))
       return Promise.reject(result.errors)
     }
 
-    const pages = result.data.allMarkdownRemark.edges
+    const subPages = result.data.allMarkdownRemark.edges
+    const chapterPages = result.data.allChaptersJson.edges
 
-    pages.forEach(edge => {
+    subPages.forEach(edge => {
       const id = edge.node.id
       createPage({
         path: edge.node.fields.slug,
         tags: edge.node.frontmatter.tags,
         component: path.resolve(
           `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
-        // additional data can be passed via context
         context: {
           id,
         },
       })
     })
-  })
-}
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
 
-  if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
-    createNodeField({
-      name: `slug`,
-      node,
-      value,
+    chapterPages.forEach(edge => {
+      const id = edge.node.id
+      createPage({
+        path: edge.node.fields.slug,
+        component: path.resolve(`src/templates/chapter.js`),
+        context: {
+          id,
+        },
+      })
     })
-  }
+  })
 }

src/templates/chapter.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import Layout from '../layouts/default'
+
+const ChapterTemplate = ({ data }) => {
+  const { chaptersJson: chapter } = data
+  return (
+    <Layout>
+      <section>
+        <h1>{chapter.city}</h1>
+      </section>
+    </Layout>
+  )
+}
+
+export default ChapterTemplate
+
+export const chapterQuery = graphql`
+  query Chapter($id: String!) {
+    chaptersJson(id: { eq: $id }) {
+      city
+    }
+  }
+`

static/admin/config.yml

@@ -13,6 +13,16 @@ publish_mode: editorial_workflow
 show_preview_links: false
 
 collections:
+  - name: 'chapters'
+    label: 'Chapters'
+    folder: 'content/chapters'
+    delete: false
+    fields:
+      - label: 'City'
+        name: 'city'
+        widget: 'string'
+        required: true
+
   - name: 'pages'
     label: 'Pages'
     description: 'Edit the copy of standalone pages on our site.'