[WIP]DevDocs-ify SideNav (freeCodeCamp#129)

* Drill down menu

* Update site title on navigation and add canonical link

* remove shouldComponentUpdate

* Fix SQL alter table article and normalise

* Refactor for Feedback

Author: Bouncey

Diff for: .babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

Diff for: _normaliseArticles.js

@@ -13,7 +13,7 @@ function info(str, colour = 'red') {
 const metaRE = /---[\W\w]*?---\n*?/;
 const isAFileRE = /(\.md|\.jsx?|\.html?)$/;
 const shouldBeIgnoredRE = /^(\_|\.)/;
-const isAStubRE = /This\sis\sa\sstub\.\s\[Help\sour\scommunity\sexpand\sit\]/;
+const isAStubRE = /This\sis\sa\sstub.+?Help\sour\scommunity\sexpand\sit/;
 const markdownLinkRE = /\!?\[.*?\]\(.+?\)/g;
 const httpsRE = /https?\:\/\//;
 

Diff for: gatsby-browser.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import store from './src/store';
+
+const propTypes = {
+    children: PropTypes.node.isRequired
+  };
+
+exports.replaceRouterComponent = ({ history }) => {
+
+  const ConnectedRouterWrapper = ({ children }) => (
+    <Provider store={ store }>
+      <Router history={ history }>{ children }</Router>
+    </Provider>
+  );
+  ConnectedRouterWrapper.displayName = 'ConnectRouterWrapper';
+  ConnectedRouterWrapper.propTypes = propTypes;
+
+  return ConnectedRouterWrapper;
+};
+

Diff for: gatsby-srr.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { renderToString } from 'react-dom/server';
+
+import store from './src/store';
+
+exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+
+    const ConnectedBody = () => (
+        <Provider store={ store }>
+            { bodyComponent }
+        </Provider>
+    );
+    replaceBodyHTMLString(renderToString(<ConnectedBody/>));
+};

Diff for: package.json

@@ -13,32 +13,41 @@
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-react": "^7.0.0",
     "fs-extra": "^3.0.1",
-    "gatsby": "^1.0.1",
-    "gatsby-link": "^1.0.1",
+    "gatsby": "^1.6.6",
+    "gatsby-link": "^1.6.5",
     "gatsby-plugin-react-helmet": "^1.0.1",
-    "gatsby-plugin-sharp": "^1.0.0-beta.7",
+    "gatsby-plugin-sharp": "^1.6.0",
     "gatsby-plugin-sitemap": "^1.2.0",
-    "gatsby-remark-copy-linked-files": "^1.0.0-beta.6",
-    "gatsby-remark-images": "^1.0.0-beta.6",
-    "gatsby-remark-prismjs": "^1.0.0-beta.6",
-    "gatsby-remark-responsive-iframe": "^1.0.0-beta.6",
-    "gatsby-remark-smartypants": "^1.0.0-beta.6",
-    "gatsby-source-filesystem": "^1.0.0-beta.6",
-    "gatsby-transformer-remark": "^1.0.0-beta.6",
+    "gatsby-remark-copy-linked-files": "^1.5.0",
+    "gatsby-remark-images": "^1.5.0",
+    "gatsby-remark-prismjs": "^1.2.0",
+    "gatsby-remark-responsive-iframe": "^1.4.1",
+    "gatsby-remark-smartypants": "^1.4.1",
+    "gatsby-source-filesystem": "^1.4.1",
+    "gatsby-transformer-remark": "^1.6.3",
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.6.1",
     "react-freecodecamp-search": "^0.2.5",
+    "react-redux": "^5.0.5",
     "react-typography": "^0.15.0",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.2.1",
+    "redux-create-types": "0.0.1",
     "rx": "^4.1.0",
     "typography": "^0.15.8",
     "typography-breakpoint-constants": "^0.14.0",
     "typography-plugin-code": "^0.15.9"
   },
   "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "chalk": "^2.0.1",
     "gh-pages": "^0.12.0",
-    "pre-commit": "^1.2.2"
+    "pre-commit": "^1.2.2",
+    "redux-devtools-extension": "^2.13.2",
+    "warning": "^3.0.0"
   },
   "keywords": [
     "freeCodeCamp",
@@ -48,10 +57,8 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "node seed && gatsby build",
-    "deploy": "node seed && gatsby build --prefix-paths && gh-pages -d public",
-    "dev": "node seed && gatsby develop",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"pages/*.js\" \"utils/*.js\" \"wrappers/*.js\" \"html.js\"",
+    "build": "node seed && node --max_old_space_size=4096 ./node_modules/.bin/gatsby build",
+    "dev": "node seed && node --max_old_space_size=4096 ./node_modules/.bin/gatsby develop",
     "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
     "normalise": "node _normaliseArticles.js",
     "test": "echo \"Error: no test specified\" && exit 1"

Diff for: src/components/NavPanel.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
 
+import { navItemLi, navItemTitle } from './sideNav.module.css';
+
 const propTypes = {
   path: PropTypes.string,
   router: PropTypes.object,
@@ -11,9 +13,9 @@ const propTypes = {
 function NavItem(props) {
   const { path, title } = props;
   return (
-    <li role='presentation'>
+    <li className={ navItemLi } role='presentation'>
       <Link role='presentation' to={ path }>
-        <span>{ title }</span>
+        <span className={ navItemTitle }>{ title }</span>
       </Link>
     </li>
   );

Diff for: src/components/SideNav.jsx

@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Panel from 'react-bootstrap/lib/Panel';
+
+import {
+  body,
+  caret,
+  expanded,
+  navPanelUl,
+  panel,
+  title as titleStyle
+} from './sideNav.module.css';
+
+const propTypes = {
+  children: PropTypes.any,
+  handleClick: PropTypes.func.isRequired,
+  isExpanded: PropTypes.bool,
+  path: PropTypes.string,
+  title: PropTypes.string
+};
+
+
+class NavPanel extends PureComponent {
+  constructor() {
+    super();
+
+    this.renderHeader = this.renderHeader.bind(this);
+    this.handleHeaderClick = this.handleHeaderClick.bind(this);
+  }
+
+  handleHeaderClick() {
+    const { push } = this.context.router.history;
+    const { path } = this.props;
+    this.props.handleClick(path);
+    push(path);
+  }
+
+  renderHeader(isExpanded, title) {
+    return (
+      <div className={ titleStyle } onClick={ this.handleHeaderClick }>
+        <span
+          className={
+            'caret ' +
+            (
+              isExpanded ?
+              `${caret} ${expanded}` :
+              caret
+            )
+          }
+        />
+        <span>
+          { title }
+        </span>
+      </div>
+    );
+  }
+
+  render() {
+    const { children, isExpanded, title } = this.props;
+    return (
+      <Panel
+        bsClass={ `${panel} panel` }
+        collapsible={ true }
+        expanded={ isExpanded }
+        header={ this.renderHeader(isExpanded, title) }
+        >
+        <div className={ isExpanded ? body : '' }>
+          <ul className={ navPanelUl }>
+            { children }
+          </ul>
+        </div>
+      </Panel>
+    );
+  }
+}
+NavPanel.contextTypes = {
+  router: PropTypes.object
+};
+NavPanel.displayName = 'NavPanel';
+NavPanel.propTypes = propTypes;
+
+export default NavPanel;