Add Intro pages through markdown

gatsby-config.js

@@ -23,6 +23,14 @@ module.exports = {
         source: buildChallenges$
       }
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'introductions',
+        path: path.resolve(__dirname, './src/introductions')
+      }
+    },
+    'gatsby-transformer-remark',
     {
       resolve: 'gatsby-plugin-google-fonts',
       options: {

gatsby-node.js

@@ -9,6 +9,7 @@ const classic = path.resolve(
   __dirname,
   './src/templates/Challenges/classic/Show.js'
 );
+const intro = path.resolve(__dirname, './src/templates/Introduction/Intro.js');
 
 const views = {
   // backend: BackEnd,
@@ -33,6 +34,16 @@ exports.onCreateNode = function onCreateNode({ node, boundActionCreators }) {
     // TODO: Normalise tests to { test: '', testString: ''}?
     createNodeField({ node, name: 'tests', value: tests });
   }
+
+  if (node.internal.type === 'MarkdownRemark') {
+    const { frontmatter: { block, superBlock, title } } = node;
+
+    const slug = `/${dasherize(superBlock)}${
+      block ? `/${dasherize(block)}${title ? `/${dasherize(title)}` : ''}` : ''
+    }`;
+
+    createNodeField({ node, name: 'slug', value: slug });
+  }
 };
 
 exports.createPages = ({ graphql, boundActionCreators }) => {
@@ -60,6 +71,21 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
               }
             }
           }
+          allMarkdownRemark {
+            edges {
+              node {
+                fields {
+                  slug
+                }
+                frontmatter {
+                  block
+                  superBlock
+                  title
+                }
+                html
+              }
+            }
+          }
         }
       `).then(result => {
         if (result.errors) {
@@ -93,6 +119,18 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           });
         });
 
+        // Create intro pages
+        result.data.allMarkdownRemark.edges.forEach(edge => {
+          const { fields: { slug } } = edge.node;
+          createPage({
+            path: slug,
+            component: intro,
+            context: {
+              slug
+            }
+          });
+        });
+
         return;
       })
     );

package.json

@@ -20,9 +20,10 @@
     "gatsby-plugin-google-fonts": "^0.0.4",
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-react-next": "^1.0.11",
-    "gatsby-source-filesystem": "^1.5.27",
+    "gatsby-source-filesystem": "^1.5.29",
     "gatsby-source-mongodb": "^1.5.19",
     "gatsby-transformer-json": "^1.0.16",
+    "gatsby-transformer-remark": "^1.7.39",
     "jest": "^22.4.3",
     "lodash": "^4.17.5",
     "loop-protect": "^2.1.6",

src/pages/apis-and-microservices/basic-node-and-express/index.md → src/introductions/apis-and-microservices/basic-node-and-express/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Basic Node and Express Challenges
 block: Basic Node and Express
+superBlock: APIs and Microservices
 ---
 ## Introduction to the Basic Node and Express Challenges
 

src/pages/apis-and-microservices/managing-packages-with-npm/index.md → src/introductions/apis-and-microservices/managing-packages-with-npm/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Managing Packages with npm Challenges
 block: Managing Packages with Npm
+superBlock: APIs and Microservices
 ---
 ## Introduction to the Managing Packages with npm Challenges
 

src/pages/apis-and-microservices/mongodb-and-mongoose/index.md → src/introductions/apis-and-microservices/mongodb-and-mongoose/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the MongoDB and Mongoose Challenges
 block: MongoDB and Mongoose
+superBlock: APIs and Microservices
 ---
 ## Introduction to the MongoDB and Mongoose Challenges
 

src/pages/data-visualization/data-visualization-with-d3/index.md → src/introductions/data-visualization/data-visualization-with-d3/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Data Visualization with D3 Challenges
 block: Data Visualization with D3
+superBlock: Data Visualization
 ---
 ## Introduction to the Data Visualization with D3 Challenges
 

src/pages/data-visualization/json-apis-and-ajax/index.md → src/introductions/data-visualization/json-apis-and-ajax/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the JSON APIs and AJAX Challenges
 block: JSON APIs and Ajax
+superBlock: Data Visualization
 ---
 ## Introduction to the JSON APIs and AJAX Challenges
 

src/pages/front-end-libraries/bootstrap/index.md → src/introductions/front-end-libraries/bootstrap/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Bootstrap Challenges
 block: Bootstrap
+superBlock: Front End Libraries
 ---
 ## Introduction to the Bootstrap Challenges
 

src/pages/front-end-libraries/jquery/index.md → src/introductions/front-end-libraries/jquery/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to jQuery
 block: jQuery
+superBlock: Front End Libraries
 ---
 ## Introduction to jQuery
 

src/pages/front-end-libraries/sass/index.md → src/introductions/front-end-libraries/sass/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Sass Challenges
 block: Sass
+superBlock: Front End Libraries
 ---
 ## Introduction to the Sass Challenges
 

src/pages/information-security-and-quality-assurance/information-security-with-helmetjs/index.md → src/introductions/information-security-and-quality-assurance/information-security-with-helmetjs/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to Information Security with HelmetJS Challenges
 block: Information Security with HelmetJS
+superBlock: Information Security and Quality Assurance
 ---
 ## Introduction to Information Security with HelmetJS Challenges
 

src/pages/javascript-algorithms-and-data-structures/basic-data-structures/index.md → src/introductions/javascript-algorithms-and-data-structures/basic-data-structures/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to Objects
 block: Basic Data Structures
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to Objects
 

src/pages/javascript-algorithms-and-data-structures/basic-javascript/index.md → src/introductions/javascript-algorithms-and-data-structures/basic-javascript/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to JavaScript
 block: Basic JavaScript
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to JavaScript
 

src/pages/javascript-algorithms-and-data-structures/debugging/index.md → src/introductions/javascript-algorithms-and-data-structures/debugging/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Debugging Challenges
 block: Debugging
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the Debugging Challenges
 

src/pages/javascript-algorithms-and-data-structures/es6/index.md → src/introductions/javascript-algorithms-and-data-structures/es6/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the ES6 Challenges
 block: ES6
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the ES6 Challenges
 

src/pages/javascript-algorithms-and-data-structures/functional-programming/index.md → src/introductions/javascript-algorithms-and-data-structures/functional-programming/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Functional Programming Challenges
 block: Functional Programming
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the Functional Programming Challenges
 

src/pages/javascript-algorithms-and-data-structures/object-oriented-programming/index.md → src/introductions/javascript-algorithms-and-data-structures/object-oriented-programming/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Object Oriented Programming Challenges
 block: Object Oriented Programming
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the Object Oriented Programming Challenges
 

src/pages/javascript-algorithms-and-data-structures/regular-expressions/index.md → src/introductions/javascript-algorithms-and-data-structures/regular-expressions/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Regular Expression Challenges
 block: Regular Expressions
+superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the Regular Expression Challenges
 

src/pages/responsive-web-design/applied-accessibility/index.md → src/introductions/responsive-web-design/applied-accessibility/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Applied Accessibility Challenges
 block: Applied Accessibility
+superBlock: Responsive Web Design
 ---
 ## Introduction to the Applied Accessibility Challenges
 

src/pages/responsive-web-design/applied-visual-design/index.md → src/introductions/responsive-web-design/applied-visual-design/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Applied Visual Design Challenges
 block: Applied Visual Design
+superBlock: Responsive Web Design
 ---
 ## Introduction to the Applied Visual Design Challenges
 

src/pages/responsive-web-design/basic-css/index.md → src/introductions/responsive-web-design/basic-css/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to Basic CSS
 block: Basic CSS
+superBlock: Responsive Web Design
 ---
 ## Introduction to Basic CSS
 

src/pages/responsive-web-design/css-flexbox/index.md → src/introductions/responsive-web-design/css-flexbox/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the CSS Flexbox Challenges
 block: CSS Flexbox
+superBlock: Responsive Web Design
 ---
 ## Introduction to the CSS Flexbox Challenges
 

src/pages/responsive-web-design/css-grid/index.md → src/introductions/responsive-web-design/css-grid/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the CSS Grid Challenges
 block: CSS Grid
+superBlock: Responsive Web Design
 ---
 ## Introduction to the CSS Grid Challenges
 

src/pages/responsive-web-design/responsive-web-design-principles/index.md → src/introductions/responsive-web-design/responsive-web-design-principles/index.md

@@ -1,6 +1,7 @@
 ---
 title: Introduction to the Responsive Web Design Challenges
 block: Responsive Web Design Principles
+superBlock: Responsive Web Design
 ---
 ## Introduction to the Responsive Web Design Challenges
 

src/redux/propTypes.js

@@ -9,6 +9,15 @@ const FileType = PropTypes.shape({
   tail: PropTypes.string
 });
 
+export const MarkdownRemark = PropTypes.shape({
+  html: PropTypes.string,
+  frontmatter: PropTypes.shape({
+    title: PropTypes.string,
+    block: PropTypes.string,
+    superBlock: PropTypes.string
+  })
+});
+
 export const ChallengeNode = PropTypes.shape({
   block: PropTypes.string,
   challengeType: PropTypes.number,

src/templates/Introduction/Intro.js

@@ -0,0 +1,30 @@
+/* global graphql */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MarkdownRemark } from '../../redux/propTypes';
+
+const propTypes = {
+  data: PropTypes.shape({
+    markdownRemark: MarkdownRemark
+  })
+};
+
+function IntroductionPage({ data: { markdownRemark } }) {
+  const { html } = markdownRemark;
+  return (
+    <div className='intro-layout' dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
+
+IntroductionPage.displayName = 'IntroductionPage';
+IntroductionPage.propTypes = propTypes;
+
+export default IntroductionPage;
+
+export const query = graphql`
+  query IntroPageBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+    }
+  }
+`;