[WIP] Proof of concept - Make the docs part of the Gatsby website

gatsby-config.js

@@ -10,12 +10,19 @@ module.exports = {
     "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     "gatsby-transformer-remark",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "reference",
+        path: `${__dirname}/src/markdown/Reference/`,
+      },
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "markdown",
         path: `${__dirname}/src/markdown/`,
       },
-    },
+    }
   ],
-}
+}

gatsby-node.js

@@ -0,0 +1,53 @@
+const path = require(`path`);
+const { createFilePath } = require(`gatsby-source-filesystem`);
+/*
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions;
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({ node, getNode, basePath: `reference` });
+    createNodeField({
+      node,
+      name: `slug`,
+      value: slug,
+    });
+  }
+};
+*/
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions;
+  return new Promise((resolve, reject) => {
+    graphql(`
+      query ReferencePagesQuery {
+        allMarkdownRemark(
+          filter: {fileAbsolutePath: {glob: "**/Reference/**"}}
+          sort: {frontmatter: {title: ASC}}
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              slug
+            }
+            url: gatsbyPath(filePath: "/reference/{markdownRemark.frontmatter__slug}")
+          }
+        }
+      }
+    `).then(result => {
+      console.log(result);
+      result.data.allMarkdownRemark.nodes.forEach((node) => {
+        console.log(node);
+        const slug = node.frontmatter.slug;
+        createPage({
+          path: node.url,
+          component: path.resolve(`./src/templates/reference-page.js`),
+          context: {
+            slug: slug,
+            title: node.frontmatter.title,
+            id: node.id
+          },
+        });
+      });
+      resolve();
+    });
+  });
+};

src/layout/Header.js

@@ -60,7 +60,7 @@ const Header = () => {
           />
           <Button
             children="Reference"
-            url="https://ml5js.github.io/ml5-website-v02-docsify/#/reference/overview"
+            url="/reference"
             txtColor="var(--color-text-dark)"
             bgColor="var(--color-transparent)"
             fontSize="0.9rem"
@@ -92,4 +92,4 @@ const Header = () => {
   )
 }
 
-export default Header;
+export default Header;