Fix most compatibility issues with new Gatsby

FreeCodeCamp · 65ecc5d04a01742b59d50e959763aebd266cc258 · SaintPeter committed Mar 1, 2016 · Mar 1, 2016 · 65ecc5d
1 parent aeb7e66
commit 65ecc5d04a01742b59d50e959763aebd266cc258
@@ -3,4 +3,5 @@ public/
 wiki-gh-pages/*
 wiki-master/*
 pages/*
-docs/*
+docs/*
+.idea/
@@ -21,6 +21,9 @@ var languageFolders = [
   }
 ];
 
+// List of supported lanugages
+var langList = [ 'en/' ];
+
 // Get File list
 fs.readdir('./wiki-master', function (err, files) {
   if (err) throw err;
@@ -52,6 +55,9 @@ fs.readdir('./wiki-master', function (err, files) {
   var extra = folderList.reduce((thisList, langSubFolder) => {
     var langDir = langSubFolder.match(/^\w{2}/)[0] + '/',
       langFiles = fs.readdirSync('./wiki-master/' + langSubFolder);
+    
+    // Add this directory to the list of languages
+    langList.push(langDir);
 
     // Setup copies for later
     languageFolders.push({
@@ -83,7 +89,7 @@ fs.readdir('./wiki-master', function (err, files) {
       })
     );
   }, []);
-
+  
   // Create folders and copy *.md files
   createFolders(fileList);
 
@@ -95,6 +101,24 @@ fs.readdir('./wiki-master', function (err, files) {
   } catch (err) {
     throw err;
   }
+
+  // Generate _pages.yaml for each language
+  langList.forEach( lang => {
+    var langDir = './pages/' + lang;
+
+    var output = fs.readdirSync(langDir).filter(file => {
+        return fs.statSync(langDir + file).isDirectory() && !/^images$/.test(file);
+      })
+      .reduce((acc, dir) => {
+        return acc + `- "/${lang + dir}/"\n`;
+      }, "");
+    
+    try {
+      fs.outputFileSync(langDir + '_pages.yaml', output);
+    } catch(err) {
+      throw err;
+    }
+  });
 });
 
 // Create a folder base
@@ -22,7 +22,9 @@ git pull origin master
 cd ..
 
 # Copy and Transform .md files from wiki repo
+echo "Creating Structure"
 node create_structure.js
+echo "Converting Files"
 node convert_files.js
 
 # Build Output
@@ -20,7 +20,7 @@
     "chroma-js": "0.7.2",
     "color-pairs-picker": "^1.3.5",
     "fs-extra": "^0.26.5",
-    "lodash": "^3.10.1",
+    "lodash": "^4.5.1",
     "mkdirp": "^0.5.1",
     "promise": "^7.0.4",
     "react": "^0.14.3",
@@ -28,8 +28,14 @@
     "react-dom": "^0.14.3",
     "react-motion": "^0.1.0",
     "react-responsive-grid": "^0.2.1",
-    "react-router": "^0.13.5",
+    "react-router": "^2.0.0",
     "typography": "^0.6.2",
     "underscore.string": "^3.2.2"
+  },
+  "devDependencies": {
+    "babel-plugin-react-transform": "^1.1.1",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.2",
+    "redbox-react": "^1.2.2"
   }
 }
@@ -1,12 +1,10 @@
 import React from 'react';
-import { RouteHandler, Link, State, Navigation } from 'react-router';
+import { Link, State, Navigation } from 'react-router';
 import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
 import Typography from 'typography';
-import sortBy from 'lodash/collection/sortBy';
 import colorPairsPicker from 'color-pairs-picker';
 import chroma from 'chroma-js';
 import includes from 'underscore.string/include';
-import { link, templateChildrenPages } from 'gatsby-helpers';
 
 import typography from 'utils/typography';
 
@@ -22,7 +20,7 @@ module.exports = React.createClass({
     return (
       <div className='wiki-container'>
         <div className='article-container'>
-          <RouteHandler typography={typography} {...this.props}/>
+          {this.props.children}
         </div>  
       </div>
     );
@@ -1,14 +1,15 @@
 import React from 'react';
-import { RouteHandler, Link, State, Navigation } from 'react-router';
+import { Link, State, Navigation } from 'react-router';
 import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
 import Typography from 'typography';
-import sortBy from 'lodash/collection/sortBy';
+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, templateChildrenPages } from 'gatsby-helpers';
-
+import { link } from 'gatsby-helpers';
 import typography from 'utils/typography';
+import pageList from './_pages.yaml';
 
 // Style code
 import 'css/github.css';
@@ -38,54 +39,54 @@ module.exports = React.createClass({
   render: function() {
     var childPages, docOptions, docPages;
     var langRegex = new RegExp( '^/' + __filename.slice(0,2))
-    childPages = templateChildrenPages(__filename, this.props.state).map(function(child) {
+    childPages = pageList.map((p) => {
+      const page = find(this.props.route.pages, (_p) => _p.path === p);
       return {
-        title: child.data.title,
-        order: child.data.order,
-        path: child.path
+        title: page.data.title,
+        order: page.data.order,
+        path: page.path
       };
-    }).filter(child => {
-      return langRegex.test(child.path);
-    });
-    childPages = sortBy(childPages, function(child) {
-      return child.order;
-    });
+    }).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(_this) {
-      
-      return function(child) {
-        var isActive;
-        isActive = _this.isActive(link(child.path));
-        return (
-          <li
-            key={child.path}
-            style={{
-              marginBottom: rhythm(1/2)
-            }}
-          >
-            <Link
-              to={link(child.path)}
+      .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={{
+            marginBottom: rhythm(1/2),
+          }}
             >
-              {isActive ? <strong>{child.title}</strong> : child.title }
-            </Link>
-          </li>
-        )
-      };
-    })(this));
+              <Link
+                to={link(child.path)}
+                style={{
+              textDecoration: 'none',
+            }}
+              >
+                {isActive ? <strong>{child.title}</strong> : child.title }
+              </Link>
+            </li>
+          )
+        };
+    });
 
     return (
       <div>
@@ -106,20 +107,20 @@ module.exports = React.createClass({
             </div>
           </div>
           <div className='articleContent'>
-            <RouteHandler typography={typography} {...this.props}/>
+            {this.props.children}
           </div>
         </Breakpoint>
         <Breakpoint maxWidth={700}>
           <div className='wikiSelector'>
             <select
-              defaultValue={this.props.state.path}
+              defaultValue={this.props.route.path}
                 onChange={this.handleTopicChange}
                 >
               {docOptions}
             </select>
           </div>
           <div className='articleContent'>
-            <RouteHandler typography={typography} {...this.props}/>
+            {this.props.children}
           </div>  
         </Breakpoint>
       </div>
@@ -1 +1 @@
-Subproject commit 4798402429d96d7248ad39c49b6c17a8f5aeac16
+Subproject commit 643a5290285115f57c660e4c9bd9b179f8aa8708
@@ -1 +1 @@
-Subproject commit 85c028b48247cf791201b955dc357a91c2f64758
+Subproject commit b756eb51fd4e120ba0ed66a5503d373d37bad262
@@ -1,20 +1,23 @@
-import React from 'react';
-import DocumentTitle from 'react-document-title';
-import typography from 'utils/typography';
-const { rhythm } = typography;
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import { config } from 'config'
 
 module.exports = React.createClass({
-  render: function() {
-    var post, rhythm;
-    post = this.props.page.data;
+  propTypes () {
+    return {
+      route: React.PropTypes.object,
+    }
+  },
+  render () {
+    const post = this.props.route.page.data
 
     return (
-      <DocumentTitle title={`${post.title} | ${this.props.config.siteTitle}`}>
+      <DocumentTitle title={`${post.title} | ${config.siteTitle}`}>
         <div className="markdown">
           <h1>{post.title}</h1>
-          <div dangerouslySetInnerHTML={{__html: post.body}}/>
+          <div dangerouslySetInnerHTML={{ __html: post.body }}/>
         </div>
       </DocumentTitle>
-    );
-  }
-});
+    )
+  },
+})