add about modal to link to github

client/components/Nav.js

@@ -67,6 +67,13 @@ function Nav(props) {
             );
           }
         })()}
+        <li className="nav__item">
+          <p className="nav__about">
+            <Link to="/about">
+              About
+            </Link>
+          </p>
+        </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">

client/modules/IDE/components/About.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+import { browserHistory } from 'react-router';
+
+class About extends React.Component {
+  closeAboutModal() {
+    browserHistory.push('/');
+  }
+
+  render() {
+    return (
+      <div className="about">
+        <header className="about__header">
+          <h2>About</h2>
+          <button className="about__exit-button" onClick={this.closeAboutModal}>
+            <InlineSVG src={exitUrl} alt="Close About Overlay" />
+          </button>
+        </header>
+        <div className="about__copy">
+          <p>
+            The p5.js Web Editor is an open source project.
+          </p>
+          <p>
+            <a
+              href="https://github.com/processing/p5.js-web-editor"
+              target="_blank"
+            >Contribute </a>
+            or
+            <a
+              href="https://github.com/processing/p5.js-web-editor/issues/new"
+              target="_blank"
+            > report a bug.</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default About;

client/modules/IDE/pages/IDEView.js

@@ -19,6 +19,7 @@ import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '
 import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
+import About from '../components/About';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -263,6 +264,15 @@ class IDEView extends React.Component {
             );
           }
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.location.pathname === '/about') {
+            return (
+              <Overlay>
+                <About />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );

client/routes.js

@@ -22,6 +22,7 @@ const routes = (store) =>
     <Route path="/full/:project_id" component={FullView} />
     <Route path="/sketches" component={IDEView} />
     <Route path="/:username/sketches" component={IDEView} />
+    <Route path="/about" component={IDEView} />
   </Route>
   );
 

client/styles/components/_about.scss

@@ -0,0 +1,20 @@
+.about {
+  @extend %modal;
+  display: flex;
+  flex-wrap: wrap;
+  flex-flow: column;
+}
+
+.about__header {
+  display: flex;
+  justify-content: space-between;
+  padding: #{20 / $base-font-size}rem;
+}
+
+.about__exit-button {
+  @extend %icon;
+}
+
+.about__copy {
+  padding: #{20 / $base-font-size}rem;
+}

client/styles/main.scss

@@ -22,6 +22,7 @@
 @import 'components/console';
 @import 'components/resizer';
 @import 'components/overlay';
+@import 'components/about';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';

server/routes/server.routes.js

@@ -29,6 +29,10 @@ router.route('/sketches').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });
 
+router.route('/about').get((req, res) => {
+  res.sendFile(path.resolve(`${__dirname}/../../index.html`));
+});
+
 router.route('/:username/sketches').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });