Add Intro pages through markdown
parent
dcb6378975
commit
ca6748a477
|
@ -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: {
|
||||
|
|
|
@ -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;
|
||||
})
|
||||
);
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the Bootstrap Challenges
|
||||
block: Bootstrap
|
||||
superBlock: Front End Libraries
|
||||
---
|
||||
## Introduction to the Bootstrap Challenges
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to jQuery
|
||||
block: jQuery
|
||||
superBlock: Front End Libraries
|
||||
---
|
||||
## Introduction to jQuery
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the Sass Challenges
|
||||
block: Sass
|
||||
superBlock: Front End Libraries
|
||||
---
|
||||
## Introduction to the Sass Challenges
|
||||
|
|
@ -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
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to Objects
|
||||
block: Basic Data Structures
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
---
|
||||
## Introduction to Objects
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to JavaScript
|
||||
block: Basic JavaScript
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
---
|
||||
## Introduction to JavaScript
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the Debugging Challenges
|
||||
block: Debugging
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
---
|
||||
## Introduction to the Debugging Challenges
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the ES6 Challenges
|
||||
block: ES6
|
||||
superBlock: JavaScript Algorithms and Data Structures
|
||||
---
|
||||
## Introduction to the ES6 Challenges
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the Applied Accessibility Challenges
|
||||
block: Applied Accessibility
|
||||
superBlock: Responsive Web Design
|
||||
---
|
||||
## Introduction to the Applied Accessibility Challenges
|
||||
|
|
@ -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
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to Basic CSS
|
||||
block: Basic CSS
|
||||
superBlock: Responsive Web Design
|
||||
---
|
||||
## Introduction to Basic CSS
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the CSS Flexbox Challenges
|
||||
block: CSS Flexbox
|
||||
superBlock: Responsive Web Design
|
||||
---
|
||||
## Introduction to the CSS Flexbox Challenges
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Introduction to the CSS Grid Challenges
|
||||
block: CSS Grid
|
||||
superBlock: Responsive Web Design
|
||||
---
|
||||
## Introduction to the CSS Grid Challenges
|
||||
|
|
@ -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
|
||||
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
`;
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue