fix: refactor plugin to use source-filesystem and onCreateNode

Author: DSchau

gatsby-config.js

@@ -33,14 +33,14 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        path: `${__dirname}/src/pages`,
         name: 'pages',
+        path: `${__dirname}/src/pages`
       },
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'packages',
+        name: 'content',
         path: `${__dirname}/content/`,
       },
     },

plugins/gatsby-transformer-home-example-code/gatsby-node.js

@@ -1,28 +1,29 @@
-const {readdirSync, readFileSync} = require('fs');
-const {join, resolve} = require('path');
+const crypto = require(`crypto`)
+
+// docblock goes here
+const createContentDigest = obj => crypto
+  .createHash(`md5`)
+  .update(obj)
+  .digest(`hex`)
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
-exports.sourceNodes = ({graphql, actions}) => {
+exports.onCreateNode = async ({node, loadNodeContent, actions}) => {
   const {createNode} = actions;
+  const {absolutePath, ext, name, relativeDirectory, sourceInstanceName} = node
 
-  const path = resolve(__dirname, '../../content/home/examples');
-  const files = readdirSync(path);
-
-  files.forEach(file => {
-    if (file.match(/\.js$/)) {
-      const code = readFileSync(join(path, file), 'utf8');
-      const id = file.replace(/\.js$/, '');
-
-      createNode({
-        id,
-        children: [],
-        parent: 'EXAMPLES',
-        internal: {
-          type: 'ExampleCode',
-          contentDigest: JSON.stringify(code),
-        },
-      });
-    }
-  });
+  if (sourceInstanceName === 'content' && relativeDirectory === 'home/examples' && ext === '.js') {
+    const code = await loadNodeContent(node);
+    createNode({
+      id: name,
+      children: [],
+      parent: 'EXAMPLES',
+      code,
+      mdAbsolutePath: absolutePath.replace(/\.js$/, '.md'),
+      internal: {
+        type: 'ExampleCode',
+        contentDigest: createContentDigest(JSON.stringify(code)),
+      },
+    });
+  }
 };

src/pages/index.js

@@ -37,7 +37,12 @@ class Home extends Component {
   render() {
     const {babelLoaded} = this.state;
     const {data, location} = this.props;
-    const {examples, marketing} = data;
+    const {codeExamples, examples, marketing} = data;
+
+    const code = codeExamples.edges.reduce((lookup, { node }) => {
+      lookup[node.mdAbsolutePath] = node.code;
+      return lookup;
+    }, {});
 
     return (
       <Layout location={location}>
@@ -262,7 +267,7 @@ class Home extends Component {
                           marginTop: 80,
                         },
                       }}>
-                      <CodeExample code={node.code} loaded={babelLoaded}>
+                      <CodeExample code={code[node.fileAbsolutePath]} loaded={babelLoaded}>
                         <h3 css={headingStyles}>{node.frontmatter.title}</h3>
                         <div
                           dangerouslySetInnerHTML={{__html: node.html}}
@@ -347,13 +352,23 @@ const CtaItem = ({children, primary = false}) => (
 
 export const pageQuery = graphql`
   query IndexMarkdown {
+    codeExamples: allExampleCode {
+      edges {
+        node {
+          id
+          code
+          mdAbsolutePath
+        }
+      }
+    }
+
     examples: allMarkdownRemark(
       filter: {fileAbsolutePath: {regex: "//home/examples//"}}
       sort: {fields: [frontmatter___order], order: ASC}
     ) {
       edges {
         node {
-          code
+          fileAbsolutePath
           fields {
             slug
           }