Add initail structure for drill down menu

README.md

@@ -1,5 +1,16 @@
-# gatsby-starter-documentation
-Starter for building documentation site with GatsbyJS
+# freeCodeCamp Guides
+
+## Contributions
+
+`npm run dev` and open `localhost:8000/docs` (we are working to remove the `docs` dir #4 )
+
+New guides should be created with the format of:
+
+`[section]/[page-url-slug]/index.md`
+
+If in doubt, see other guides in the `pages/docs` directory
+
+Once a new guide has been added, `Ctrl + C` in the terminal and `npm run dev` again. This will rebuild a config file that `gatsby` uses to serve the pages.
+
+Many thanks
 
-Install this starter (assuming Gatsby is installed) by running from your CLI:
-`gatsby new gatsby-documentation-site https://github.com/gatsbyjs/gatsby-starter-documentation`

_pages.js

@@ -1,21 +1,45 @@
-/*
-*  Runnging this script will build a file (pagesArray.txt)
-*  which contains an array that should be copy/pasted into
-*  config.toml, assigned to docPages
-*/
-
 const fse = require('fs-extra');
+const Rx = require('rx');
+
+const { Observable } = Rx;
+
+const isAFileRegEx = /(\.md|\.jsx?)$/;
+const shouldBeIgnoredRegEx = /^\_/;
 
-const nonPageRegEx = /(index.md|\_template.jsx)/;
+function readDir(dir) {
+  return fse.readdirSync(`${process.cwd()}/${dir}/`)
+  .filter(item => !isAFileRegEx.test(item))
+  .filter(file => !shouldBeIgnoredRegEx.test(file))
+  .map(folder => `${dir}/${folder}`);
+}
 
-let pages = fse.readdirSync(`${process.cwd()}/pages/docs/`)
-  .filter(page => !nonPageRegEx.test(page))
-  .map(page => `/docs/${page}/`);
+let superBlocks = readDir('pages/docs');
 
-fse.writeFile(`${process.cwd()}/pagesArray.txt`, JSON.stringify(pages, null, 2))
-  .then(() => {
-    console.log(`Pages array wirtten, it has ${pages.length} entries`);
+Observable.from(superBlocks)
+  .flatMap(dir => {
+    const subDirs = readDir(dir);
+    const allDirs = [ dir, ...subDirs ]
+      .map(dir => `${dir.replace(/^pages/, '')}/`);
+
+    return Observable.from(allDirs);
   })
-  .catch(err => {
-    console.error(err);
+  .toArray()
+  .reduce((acc, current) => [ ...acc, ...current ], [])
+  .subscribe(allPages => {
+    const newConfig = fse.readFileSync(
+      `${process.cwd()}/_template.config`,
+      'utf8'
+      )
+      .replace(/{{}}/, JSON.stringify(allPages.sort(), null, 2));
+    fse.writeFile(`${process.cwd()}/config.toml`, newConfig)
+      .then(() => {
+        console.log(
+        `config.toml written, it has ${allPages.length} entries for docPages\n`
+          );
+      })
+      .catch(err => {
+        console.error(err);
+      });
+
   });
+

_template.config

@@ -0,0 +1,4 @@
+siteTitle="freeCodeCamp Guide"
+baseColor = "#006400"
+linkPrefix = "/guide"
+docPages = {{}}

components/Caret.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function Caret() {
+
+return (
+  <svg
+    height='18px'
+    preserveAspectRatio='xMidYMid meet'
+    version='1.0'
+    viewBox='0 0 400.000000 400.000000'
+    width='18px'
+    xmlns='http://www.w3.org/2000/svg'
+    >
+    <metadata>
+      Created by potrace 1.14, written by Peter Selinger 2001-2017
+    </metadata>
+    <g
+      fill='#000000'
+      stroke='none'
+      transform='translate(0.000000,400.000000) scale(0.100000,-0.100000)'
+      >
+      <path
+        d={
+          'M530 3051 l0 -219 28 -10 c15 -5 567 -202 1227 -437 660 -235 1204 ' +
+          '-430 1208 -434 4 -4 -544 -203 -1219 -442 -674 -239 -1230 -437 ' +
+          '-1235 -440 -6 -3 -8 -95 -7 -221 l3 -216 1540 558 1540 558 0 202 0 ' +
+          '202 -1455 527 c-800 290 -1494 542 -1542 559 l-88 32 0 -219z'
+        }
+      />
+    </g>
+  </svg>
+  );
+}

components/DrillDownItem.jsx

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+import { prefixLink } from 'gatsby-helpers';
+
+import typography from 'utils/typography';
+
+const { rhythm } = typography;
+
+const propTypes = {
+  item: PropTypes.object,
+  location: PropTypes.string
+};
+
+function DrillDownItem(props) {
+  const { item, location } = props;
+  const isActive = prefixLink(item.path) === location;
+
+  return (
+    <li
+      key={ item.path }
+      style={{
+        marginBottom: rhythm(1 / 2),
+            listStyle: 'none',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
+      }}
+      >
+      <Link
+        style={{
+          textDecoration: 'none'
+        }}
+        to={ prefixLink(item.path) }
+        >
+        { isActive ? <strong>{item.title}</strong> : item.title }
+      </Link>
+    </li>
+  );
+}
+
+
+DrillDownItem.propTypes = propTypes;
+DrillDownItem.displayName = 'DrillDownItem';
+
+export default DrillDownItem;

components/DrillDownMenu.jsx

@@ -0,0 +1,100 @@
+import React, { PureComponent, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { prefixLink } from 'gatsby-helpers';
+
+import typography from 'utils/typography';
+
+import DrillDownItem from './DrillDownItem.jsx';
+import Caret from './Caret.jsx';
+
+const { rhythm } = typography;
+
+const propTypes = {
+  children: PropTypes.arrayOf(PropTypes.object),
+  location: PropTypes.string,
+  parent: PropTypes.object
+};
+
+class DrillDownMenu extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      isOpen: false
+    };
+
+    this.renderChildren = this.renderChildren.bind(this);
+    this.handleCaretClick = this.handleCaretClick.bind(this);
+  }
+  renderChildren(children) {
+    return children
+      .map(child => (
+      <DrillDownItem
+        item={ child }
+        key={ child.title }
+        location={ this.props.location }
+      />
+      ));
+  }
+
+  handleCaretClick() {
+    this.setState({ isOpen: !this.state.isOpen });
+  }
+
+  render() {
+    const { parent, children } = this.props;
+    const { isOpen } = this.state;
+    if (!parent || !children) {
+      return null;
+    }
+    const isActive = prefixLink(parent.path) === this.props.location;
+    const formattedTitle = parent.title
+      .slice(0)
+      .replace(/^intro.*?:\s/i, '');
+    return (
+      <ul
+        style={{
+          listStyle: 'none',
+          marginLeft: 0,
+          marginTop: rhythm(1 / 2)
+        }}
+        >
+        <li
+          key={ parent.path }
+          style={{
+            marginBottom: rhythm(1 / 2),
+            listStyle: 'none',
+            border: '1px solid #006400',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }}
+          >
+          <Link
+            style={{
+              textDecoration: 'none'
+            }}
+            to={ prefixLink(parent.path) }
+            >
+            { isActive ? <strong>{formattedTitle}</strong> : formattedTitle }
+          </Link>
+          <span
+            onClick={ this.handleCaretClick }
+            style={{
+              height: '18px',
+              width: '18px'
+            }}
+            >
+            <Caret />
+          </span>
+        </li>
+        { isOpen ? this.renderChildren(children) : null }
+      </ul>
+    );
+  }
+}
+
+DrillDownMenu.displayName = 'DrillDownMenu';
+DrillDownMenu.propTypes = propTypes;
+
+export default DrillDownMenu;