From 73935ba921a1e1f4fa715f2694d485f36734704d Mon Sep 17 00:00:00 2001
From: Hallaathrad <Hallaathrad@gmail.com>
Date: Wed, 2 Mar 2016 23:50:55 -0500
Subject: [PATCH] Sidebar almost working

---
 app.js                       |  17 +++--
 create_structure.js          |   2 +-
 css/gatsby.css               |  13 ++++
 html.js                      |  80 ++++++++++++++++++++++
 html.jsx                     |  77 ----------------------
 package.json                 |  12 ++--
 templates/_template.jsx      |   7 +-
 templates/lang/_template.jsx | 153 ++++++++++++++++++++++---------------------
 wiki-gh-pages                |   2 +-
 wiki-master                  |   2 +-
 10 files changed, 188 insertions(+), 177 deletions(-)
 create mode 100644 html.js
 delete mode 100644 html.jsx
 mode change 100755 => 100644 templates/_template.jsx

diff --git a/app.js b/app.js
index 148e5fd..1eaab9b 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,10 @@
-exports.loadContext = function(callback) {
-  var context;
-  context = require.context('./pages', true);
+exports.loadContext = function (callback) {
+  let context = require.context('./pages', true)
   if (module.hot) {
-    module.hot.accept(context.id, function() {
-      context = require.context('./pages', true);
-      return callback(context);
-    });
+    module.hot.accept(context.id, () => {
+      context = require.context('./pages', true)
+      return callback(context)
+    })
   }
-  return callback(context);
-};
+  return callback(context)
+}
\ No newline at end of file
diff --git a/create_structure.js b/create_structure.js
index b657d07..f9ba14b 100755
--- a/create_structure.js
+++ b/create_structure.js
@@ -21,7 +21,7 @@ var languageFolders = [
   }
 ];
 
-// List of supported lanugages
+// List of supported languages
 var langList = [ 'en/' ];
 
 // Get File list
diff --git a/css/gatsby.css b/css/gatsby.css
index 5de8c45..94bceae 100644
--- a/css/gatsby.css
+++ b/css/gatsby.css
@@ -1,11 +1,24 @@
 body,html {
   overflow:hidden;
 }
+#react-mount {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 100%; 
+}
 .wiki-container {
   max-width:960px;
   padding:80px 30px 0;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
   margin:0 auto;
   position:relative;
+  overflow-x: hidden; 
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 a{
   text-decoration: none;
diff --git a/html.js b/html.js
new file mode 100644
index 0000000..ba891c5
--- /dev/null
+++ b/html.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import DocumentTitle from 'react-document-title';
+
+import { link } from 'gatsby-helpers';
+import typography from './utils/typography';
+const { TypographyStyle } = typography;
+
+module.exports = React.createClass({
+ propTypes () {
+    return {
+      title: React.PropTypes.string,
+    }
+  },
+  render () {
+    let title = DocumentTitle.rewind()
+    if (this.props.title) {
+      title = this.props.title
+    }
+    
+    let cssLink
+    if (process.env.NODE_ENV === 'production') {
+      cssLink = <link rel="stylesheet" href={link('/styles.css')} />
+    }
+
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8"/>
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
+          <meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
+          <title>{title}</title>
+          <link rel="shortcut icon" href={this.props.favicon}/>
+          <TypographyStyle/>
+          <style dangerouslySetInnerHTML={{__html:
+            `
+              a {
+                color: #006400;
+              }
+              pre {
+                background: #fff;
+                padding: 1.5rem;
+              }
+              .demo1-ball {
+                border-radius: 99px;
+                background-color: white;
+                width: 50px;
+                height: 50px;
+                border: 3px solid white;
+                position: absolute;
+                background-size: 50px;
+              }
+              .ball-0 {
+                background-image: url(${link("/some-react-code/0.jpg")});
+              }
+              .ball-1 {
+                background-image: url(${link("/some-react-code/1.jpg")});
+              }
+              .ball-2 {
+                background-image: url(${link("/some-react-code/2.jpg")});
+              }
+              .ball-3 {
+                background-image: url(${link("/some-react-code/3.jpg")});
+              }
+              .ball-4 {
+                background-image: url(${link("/some-react-code/4.jpg")});
+              }
+              .ball-5 {
+                background-image: url(${link("/some-react-code/5.jpg")});
+              }
+            `
+          }} />
+        </head>
+        <body className="landing-page">
+          <div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
+          <script src={link("/bundle.js")}/>
+        </body>
+      </html>
+    );
+  }
+});
diff --git a/html.jsx b/html.jsx
deleted file mode 100644
index f85192a..0000000
--- a/html.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import DocumentTitle from 'react-document-title';
-
-import { link } from 'gatsby-helpers';
-import typography from './utils/typography';
-const { TypographyStyle } = typography;
-
-module.exports = React.createClass({
-  DefaultProps: function() {
-    return {
-      body: ""
-    };
-  },
-
-  render: function() {
-    var title
-    title = DocumentTitle.rewind();
-    if (this.props.title) {
-      title = this.props.title;
-    }
-
-    return (
-      <html lang="en">
-        <head>
-          <meta charSet="utf-8"/>
-          <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
-          <meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
-          <title>{title}</title>
-          <link rel="shortcut icon" href={this.props.favicon}/>
-          <TypographyStyle/>
-          <style dangerouslySetInnerHTML={{__html:
-            `
-              a {
-                color: #006400;
-              }
-              pre {
-                background: #fff;
-                padding: 1.5rem;
-              }
-              .demo1-ball {
-                border-radius: 99px;
-                background-color: white;
-                width: 50px;
-                height: 50px;
-                border: 3px solid white;
-                position: absolute;
-                background-size: 50px;
-              }
-              .ball-0 {
-                background-image: url(${link("/some-react-code/0.jpg")});
-              }
-              .ball-1 {
-                background-image: url(${link("/some-react-code/1.jpg")});
-              }
-              .ball-2 {
-                background-image: url(${link("/some-react-code/2.jpg")});
-              }
-              .ball-3 {
-                background-image: url(${link("/some-react-code/3.jpg")});
-              }
-              .ball-4 {
-                background-image: url(${link("/some-react-code/4.jpg")});
-              }
-              .ball-5 {
-                background-image: url(${link("/some-react-code/5.jpg")});
-              }
-            `
-          }} />
-        </head>
-        <body className="landing-page">
-          <div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
-          <script src={link("/bundle.js")}/>
-        </body>
-      </html>
-    );
-  }
-});
diff --git a/package.json b/package.json
index 96c2857..6c92f8d 100644
--- a/package.json
+++ b/package.json
@@ -21,15 +21,15 @@
     "color-pairs-picker": "^1.3.5",
     "fs-extra": "^0.26.5",
     "lodash": "^4.5.1",
-    "mkdirp": "^0.5.1",
-    "promise": "^7.0.4",
-    "react": "^0.14.3",
+    "mkdirp": "^0.5.1",  
+    "promise": "^7.0.4",  
+    "react": "^0.14.7",
     "react-document-title": "^2.0.1",
-    "react-dom": "^0.14.3",
+    "react-dom": "^0.14.7",
     "react-motion": "^0.1.0",
-    "react-responsive-grid": "^0.2.1",
+    "react-responsive-grid": "^0.3.1",
     "react-router": "^2.0.0",
-    "typography": "^0.6.2",
+    "typography": "^0.7.0",
     "underscore.string": "^3.2.2"
   },
   "devDependencies": {
diff --git a/templates/_template.jsx b/templates/_template.jsx
old mode 100755
new mode 100644
index 5ef889d..36119ef
--- a/templates/_template.jsx
+++ b/templates/_template.jsx
@@ -1,21 +1,16 @@
 import React from 'react';
 import { Link, State, Navigation } from 'react-router';
 import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
-import Typography from 'typography';
 import colorPairsPicker from 'color-pairs-picker';
 import chroma from 'chroma-js';
 import includes from 'underscore.string/include';
-
-import typography from 'utils/typography';
+import { link, templateChildrenPages } from 'gatsby-helpers';
 
 // Style code
 import 'css/github.css';
 import 'css/gatsby.css';
 
-const { rhythm, fontSizeToPx } = typography;
-
 module.exports = React.createClass({
-  mixins: [State, Navigation],
   render: function() {
     return (
       <div className='wiki-container'>
diff --git a/templates/lang/_template.jsx b/templates/lang/_template.jsx
index ceb5ebf..3cd51c7 100755
--- a/templates/lang/_template.jsx
+++ b/templates/lang/_template.jsx
@@ -1,92 +1,86 @@
 import React from 'react';
 import { Link, State, Navigation } from 'react-router';
 import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
-import Typography from 'typography';
-import sortBy from 'lodash/sortBy';
 import find from 'lodash/find';
-import colorPairsPicker from 'color-pairs-picker';
-import chroma from 'chroma-js';
-import includes from 'underscore.string/include';
 import { link } from 'gatsby-helpers';
-import typography from 'utils/typography';
 import pageList from './_pages.yaml';
 
+import typography from 'utils/typography';
+
 // Style code
 import 'css/github.css';
 import 'css/gatsby.css';
 
-const { rhythm, fontSizeToPx } = typography;
-
 module.exports = React.createClass({
-  mixins: [State, Navigation],
-  
-  getInitialState: function() {
-      return {
-          filterText: ''
-      };
+  propTypes () {
+    return {
+      route: React.PropTypes.object,
+    }
   },
-
-  handleTopicChange: function(e) {
-    return this.transitionTo(e.target.value);
+  contextTypes: {
+    router: React.PropTypes.object.isRequired,
   },
- 
-  handleSearchChange: function(e) {
-      this.setState({ 
-          filterText: this.refs.filterTextInput.value
-      });
+  handleTopicChange (e) {
+    return this.context.router.push(e.target.value)
   },
-
-  render: function() {
-    var childPages, docOptions, docPages;
-    var langRegex = new RegExp( '^/' + __filename.slice(0,2))
-    childPages = pageList.map((p) => {
-      const page = find(this.props.route.pages, (_p) => _p.path === p);
+   getInitialState () {
+    return {
+        filterText: ''
+    };
+  }, 
+  handleSearchChange (e) {
+    this.setState({ 
+        filterText: this.refs.filterTextInput.value
+    });
+  },
+  render () {
+    var langRegex = new RegExp( '^/' + __filename.slice(0,2));
+    const childPages = pageList.map((p) => {
+      const page = find(this.props.route.pages, (_p) => _p.path === p)
       return {
         title: page.data.title,
         order: page.data.order,
-        path: page.path
-      };
+        path: page.path,
+      }
     }).sort((a,b) => { return a.order - b.order });
-    
-    docOptions = childPages.map(function(child) {
-      return React.createElement("option", {
-        "key": child.path,
-        "value": child.path
-      }, child.title);
-    });
-    
-    docPages = childPages
-      .filter(function(child) {
-          if(this.state.filterText.length > 0) {
-              let regex = new RegExp(this.state.filterText,'i');
-              return regex.test(child.title);
-          } else {
-              return true;
-          }            
-      },this)
-      .map(function(child) {
-        return function(child) {
-          var isActive;
-          isActive = link(child.path) === this.props.location.pathname;
-          return (
-            <li
-              key={child.path}
-              style={{
+    const docOptions = childPages.map((child) =>
+      <option
+        key={link(child.path)}
+        value={link(child.path)}
+      >
+        {child.title}
+      </option>
+
+    )
+    const docPages = childPages
+    .filter(function(child) {
+            if(this.state.filterText.length > 0) {
+                let regex = new RegExp(this.state.filterText,'i');
+                return regex.test(child.title);
+            } else {
+                return true;
+            }            
+        },this)
+    .map((child) => {
+      const isActive = link(child.path) === this.props.location.pathname
+      return (
+        <li
+          key={child.path}
+          style={{
             marginBottom: rhythm(1/2),
           }}
-            >
-              <Link
-                to={link(child.path)}
-                style={{
+        >
+          <Link
+            to={link(child.path)}
+            style={{
               textDecoration: 'none',
             }}
-              >
-                {isActive ? <strong>{child.title}</strong> : child.title }
-              </Link>
-            </li>
-          )
-        };
-    });
+          >
+            {isActive ? <strong>{child.title}</strong> : child.title }
+          </Link>
+        </li>
+      )
+    })
 
     return (
       <div>
@@ -99,23 +93,24 @@ module.exports = React.createClass({
                 ref="filterTextInput"
                 onChange={this.handleSearchChange}
                 placeholder='Article search' 
-                /></div>
+              />
+            </div>
             <div className='articlesList'>
               <ul>
-              {docPages}
+                {docPages}
               </ul>
-            </div>
+            </div>  
           </div>
           <div className='articleContent'>
             {this.props.children}
           </div>
         </Breakpoint>
-        <Breakpoint maxWidth={700}>
+        <Breakpoint maxWidth={700}>      
           <div className='wikiSelector'>
             <select
-              defaultValue={this.props.route.path}
-                onChange={this.handleTopicChange}
-                >
+              defaultValue={this.props.location.pathname}
+              onChange={this.handleTopicChange}
+            >
               {docOptions}
             </select>
           </div>
@@ -124,6 +119,12 @@ module.exports = React.createClass({
           </div>  
         </Breakpoint>
       </div>
-    );
-  }
-});
+    )
+  },
+})
+
+
+/*
+          
+              
+*/
diff --git a/wiki-gh-pages b/wiki-gh-pages
index 643a529..59ffce3 160000
--- a/wiki-gh-pages
+++ b/wiki-gh-pages
@@ -1 +1 @@
-Subproject commit 643a5290285115f57c660e4c9bd9b179f8aa8708
+Subproject commit 59ffce39c4afef64e5fb1807e0e6d496c5811811
diff --git a/wiki-master b/wiki-master
index b756eb5..d59e624 160000
--- a/wiki-master
+++ b/wiki-master
@@ -1 +1 @@
-Subproject commit b756eb51fd4e120ba0ed66a5503d373d37bad262
+Subproject commit d59e6241711dffa93f88bc28b2ee5a1aa3309ab0
