Move docs node generation to a local plugin

gatsby-config.js

@@ -36,6 +36,13 @@ const plugins = [
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
+  {
+    resolve: 'gatsby-theme-iterative-docs',
+    options: {
+      docComponent: require.resolve('./src/templates/doc.tsx'),
+      disable: Boolean(process.env.SKIP_DOCS)
+    }
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {

src/gatsby/models/docs/createPages.js → plugins/gatsby-theme-iterative-docs/createPages.js

@@ -33,18 +33,34 @@ const parseHeadings = text => {
   return matches
 }
 
-const createPages = async ({ graphql, actions }) => {
-  // DOCS
+const defaultGetTemplate = (template, defaultTemplate) =>
+  template
+    ? require.resolve(path.resolve('src', 'templates', template + '.tsx'))
+    : defaultTemplate
+
+const createPages = async (
+  { graphql, actions },
+  {
+    defaultTemplate = path.resolve('src', 'templates', 'doc.tsx'),
+    getTemplate = defaultGetTemplate,
+    disable
+  }
+) => {
+  if (disable) return
   const docsResponse = await graphql(
     `
       {
         docs: allDocsPage(limit: 9999) {
           edges {
             node {
               id
-              rawMarkdownBody
               slug
               template
+              parent {
+                ... on MarkdownRemark {
+                  rawMarkdownBody
+                }
+              }
             }
           }
         }
@@ -56,19 +72,20 @@ const createPages = async ({ graphql, actions }) => {
     throw docsResponse.errors
   }
 
-  const docComponent = require.resolve('../../../templates/doc.tsx')
-
   docsResponse.data.docs.edges.forEach(doc => {
     const {
-      node: { id, slug, rawMarkdownBody, template }
+      node: {
+        id,
+        slug,
+        template,
+        parent: { rawMarkdownBody }
+      }
     } = doc
     const headings = parseHeadings(rawMarkdownBody)
 
     if (slug) {
       actions.createPage({
-        component: template
-          ? require.resolve(path.resolve('src', 'templates', template + '.tsx'))
-          : docComponent,
+        component: getTemplate(template, defaultTemplate),
         path: slug,
         context: {
           id,

plugins/gatsby-theme-iterative-docs/gatsby-node.js

@@ -0,0 +1,21 @@
+module.exports = {
+  createSchemaCustomization: async function createSchemaCustomization(api) {
+    const {
+      actions: { createTypes },
+      schema: { buildObjectType }
+    } = api
+    createTypes([
+      buildObjectType({
+        name: 'DocsPage',
+        interfaces: ['Node'],
+        fields: {
+          template: 'String',
+          title: 'String',
+          description: 'String'
+        }
+      })
+    ])
+  },
+  createPages: require('./createPages.js'),
+  onCreateNode: require('./onCreateNode.js')
+}

src/gatsby/models/docs/onCreateMarkdownContentNode.js → plugins/gatsby-theme-iterative-docs/onCreateNode.js

@@ -1,10 +1,22 @@
 const path = require('path')
 
-async function createMarkdownDocsNode(api, { parentNode, createChildNode }) {
-  const splitDir = parentNode.relativeDirectory.split('/')
+function onCreateNode(
+  {
+    node,
+    getNode,
+    createNodeId,
+    createContentDigest,
+    actions: { createNode, createParentChildLink }
+  },
+  { disable }
+) {
+  if (disable || node.internal.type !== 'MarkdownRemark') {
+    return
+  }
+  const parentNode = getNode(node.parent)
+  const splitDir = parentNode.relativeDirectory.split(path.sep)
   if (splitDir[0] !== 'docs') return
 
-  const { node, createNodeId, createContentDigest } = api
   const { name, relativePath } = parentNode
   splitDir[0] = 'doc'
 
@@ -30,7 +42,8 @@ async function createMarkdownDocsNode(api, { parentNode, createChildNode }) {
     }
   }
 
-  return createChildNode(docNode)
+  createNode(docNode)
+  createParentChildLink({ parent: node, child: docNode })
 }
 
-module.exports = createMarkdownDocsNode
+module.exports = onCreateNode

plugins/gatsby-theme-iterative-docs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "gatsby-theme-iterative-docs",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT"
+}

src/gatsby/models.js

@@ -1,5 +1,4 @@
 const markdownContent = require('./models/markdown-content')
-const docs = require('./models/docs')
 const blog = require('./models/blog')
 const authors = require('./models/authors')
 const imageSourcePaths = require('./models/image-source-paths')
@@ -9,7 +8,6 @@ const pruneCache = require('./models/prune-cache')
 
 const models = [
   markdownContent,
-  docs,
   blog,
   authors,
   imageSourcePaths,

src/templates/doc.tsx

@@ -10,9 +10,11 @@ import Documentation from '../components/Documentation'
 interface IDocPageProps {
   data: {
     page: {
-      htmlAst: Node
-      title?: string
       description?: string
+      title?: string
+      parent: {
+        htmlAst: Node
+      }
     }
   }
   pageContext: {
@@ -26,7 +28,11 @@ const DocPage: React.FC<IDocPageProps> = ({
   pageContext: { slug, headings }
 }) => {
   const {
-    page: { htmlAst, title, description }
+    page: {
+      description,
+      title,
+      parent: { htmlAst }
+    }
   } = data
 
   const { label } = getItemByPath(slug)
@@ -44,9 +50,13 @@ export default DocPage
 export const pageQuery = graphql`
   query DocPage($id: String!) {
     page: docsPage(id: { eq: $id }) {
-      title
       description
-      htmlAst
+      title
+      parent {
+        ... on MarkdownRemark {
+          htmlAst
+        }
+      }
     }
   }
 `