Setting up

:) yass
FreeCodeCamp · e24eb8b9892aea48eacdd66ebfb79c986b2b31a4 · hallaathrad committed Jan 31, 2016 · Jan 31, 2016 · e24eb8b
1 parent 4e3df8c
commit e24eb8b9892aea48eacdd66ebfb79c986b2b31a4
@@ -1,3 +1,3 @@
 siteTitle="FreeCodeCamp Wiki"
-headerColor = "#884499"
+headerColor = "#006400"
 linkPrefix = "/wiki"
@@ -13,10 +13,10 @@ JSON Array/Object
 
 var fs = require('fs');
 var incomingLink = /github\.com\/freecodecamp\/freecodecamp\/wiki/gi;
-var outgoingLink = 'freecodecamp.com/wiki/docs';
+var outgoingLink = 'freecodecamp.com/wiki';
 
 // Get File list
-fs.readdir('./pages/docs/', function(err, folders) {
+fs.readdir('./pages/', function(err, folders) {
   if(err) throw err;
   var fileList = folders.filter(function(folder) {
     // Remove stupid hidden folders
@@ -31,12 +31,13 @@ fs.readdir('./pages/docs/', function(err, folders) {
   fileList.forEach(function(fileobj) {
     // Create directory
 
-    var newFileName = './pages/docs/'+fileobj.filename;
+    var newFileName = './pages/'+fileobj.filename;
 
     var data = fs.readFileSync(newFileName, 'utf-8'); //read existing contents into data
     var fd = fs.openSync(newFileName, 'w+');
 
-    data = data.replace(incomingLink, outgoingLink);
+    data = data.replace(incomingLink, outgoingLink)
+               .replace(/\.\/images/gi,'../images');  // Update image links to be relative
     var newData = new Buffer(data);
 
     var header = '---\ntitle: ' + fileobj.title + '\norder: 5\n---\n';
@@ -23,10 +23,10 @@ fs.readdir('./wiki-master', function(err, files) {
 
   fileList.forEach(function(fileobj) {
     // Create directory
-    mkdirp('./pages/docs/' + fileobj.dir, function(err) {
+    mkdirp('./pages/' + fileobj.dir, function(err) {
       if(err) throw err;
       // Copy File
-      var newFileName = './pages/docs/'+fileobj.dir+"/index.md";
+      var newFileName = './pages/'+fileobj.dir+"/index.md";
       fs.createReadStream('./wiki-master/' + fileobj.filename).pipe(fs.createWriteStream(newFileName));
     });
   });
@@ -0,0 +1,85 @@
+.container {
+  max-width:960px;
+  padding:90px 30px 0;
+  margin:0 auto;
+  position:relative;
+}
+a{
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.wiki-header {
+  z-index:999;
+  position:fixed;
+  top:0;
+  width:100%;
+  height:80px;
+  background:#fff;
+  margin-left:-30px;
+}
+.wiki-header a {
+  color:#fff;
+}
+.wiki-header a:hover {
+  color:#006400;
+}
+.wiki-header img {
+  margin-top:30px;
+  width:270px;
+}
+.wiki-header span {
+  position:absolute;
+}
+.articleContent {
+  width:95%;
+  margin:40px auto 0;
+}
+.wikiSelector {
+  position:fixed;
+  top:90px;
+}
+.wikiSelector select {
+  width:95%;
+}
+.wikiAside {
+  width: 220px;
+  border-left: 1px solid lightgrey;
+  float:right;
+  padding-left:20px;
+}
+.searchBar {
+  margin-top:10px;
+  margin-bottom:25px;
+}
+.articlesList ul {
+  list-style: none;
+  margin-left: 0;
+  height:82vh;
+  overflow-y: scroll;
+}
+
+@media (max-width:700px) {
+  .wiki-header, .wiki-selector {
+    text-align:center;
+  }
+  .wiki-header span {
+    left:50%;
+    top:60px;
+    transform: translateX(-50%);
+  }
+}
+@media (min-width:701px) {
+  .wiki-header span {
+    margin-left:10px;
+    top:40px;
+  }
+  .articleContent {
+    width:auto;
+    padding-right:30px;
+    height:88vh;
+    overflow-y: scroll;
+    margin-top:0;
+  }
+}
@@ -29,7 +29,9 @@ node convert_files.js
 gatsby build --prefix-links
 
 # Copy generated output to gh-pages on live wiki
-cp -r public/docs/* wiki-gh-pages/docs/
+cp -r wiki-master/images/* wiki-gh-pages/images/
+cp -r public/* wiki-gh-pages/
+cp css/* wiki-gh-pages/css/
 cp public/bundle.js wiki-gh-pages/
 cp public/index.html wiki-gh-pages/
 cp public/bundle.js.map wiki-gh-pages/
@@ -37,10 +39,7 @@ cp public/bundle.js.map wiki-gh-pages/
 # Update gh-pages branch with new files
 cd wiki-gh-pages/
 git pull origin gh-pages
-git add docs
-git add bundle.js.map
-git add bundle.js
-git add index.html
+git add .
 git commit -m "Page built on `date +"%d-%m-%Y %T"`"
 
 # Push gh-pages live
@@ -6,7 +6,7 @@ import typography from './utils/typography';
 const { TypographyStyle } = typography;
 
 module.exports = React.createClass({
-  getDefaultProps: function() {
+  DefaultProps: function() {
     return {
       body: ""
     };
@@ -31,10 +31,10 @@ module.exports = React.createClass({
           <style dangerouslySetInnerHTML={{__html:
             `
               a {
-                color: #884499;
+                color: #006400;
               }
               pre {
-                background: whitesmoke;
+                background: #fff;
                 padding: 1.5rem;
               }
               .demo1-ball {
@@ -47,22 +47,22 @@ module.exports = React.createClass({
                 background-size: 50px;
               }
               .ball-0 {
-                background-image: url(${link("/docs/some-react-code/0.jpg")});
+                background-image: url(${link("/some-react-code/0.jpg")});
               }
               .ball-1 {
-                background-image: url(${link("/docs/some-react-code/1.jpg")});
+                background-image: url(${link("/some-react-code/1.jpg")});
               }
               .ball-2 {
-                background-image: url(${link("/docs/some-react-code/2.jpg")});
+                background-image: url(${link("/some-react-code/2.jpg")});
               }
               .ball-3 {
-                background-image: url(${link("/docs/some-react-code/3.jpg")});
+                background-image: url(${link("/some-react-code/3.jpg")});
               }
               .ball-4 {
-                background-image: url(${link("/docs/some-react-code/4.jpg")});
+                background-image: url(${link("/some-react-code/4.jpg")});
               }
               .ball-5 {
-                background-image: url(${link("/docs/some-react-code/5.jpg")});
+                background-image: url(${link("/some-react-code/5.jpg")});
               }
             `
           }} />
@@ -0,0 +1,40 @@
+#!/bin/bash
+
+# Automate Deployment -- bash script
+# - run clearPages.sh
+# - run
+# - git checkout master
+# - Pull down the Wiki
+# - Run Conversion  (See above)
+# - Run Cleanup (See above)
+# - Run Gatsby Build Operation
+# - git checkout gh-pages
+# - Copy files to `gh-pages`
+# - Commit files to that branch
+# - Git push
+
+# Refresh pages directory
+./clearPages.sh
+
+# Update wiki repo copy
+cd wiki-master
+git pull origin master
+cd ..
+
+# Copy and Transform .md files from wiki repo
+node create_structure.js
+node convert_files.js
+
+# Build Output
+gatsby build --prefix-links
+
+# Copy generated output to gh-pages on live wiki
+cp -r wiki-master/images/* wiki-gh-pages/images/
+cp -r public/* wiki-gh-pages/
+cp css/* wiki-gh-pages/css/
+cp public/bundle.js wiki-gh-pages/
+cp public/index.html wiki-gh-pages/
+cp public/bundle.js.map wiki-gh-pages/
+
+# Get to work, baby!
+gatsby develop 
@@ -0,0 +1,2 @@
+#!/bin/bash
+cp ./pages/_template.jsx ./templates/.
@@ -1,116 +1,136 @@
 import React from 'react';
-import { RouteHandler, Link, State } from 'react-router';
+import { RouteHandler, 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 } from 'gatsby-helpers';
+import { link, templateChildrenPages } from 'gatsby-helpers';
 
 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],
+  mixins: [State, Navigation],
+  
+  getInitialState: function() {
+      return {
+          filterText: ''
+      };
+  },
+
+  handleTopicChange: function(e) {
+    return this.transitionTo(e.target.value);
+  },
+ 
+  handleSearchChange: function(e) {
+      this.setState({ 
+          filterText: this.refs.filterTextInput.value
+      });
+  },
+
   render: function() {
-    var activeHeaderColors, darker, docsActive, examplesActive, headerColors, ref1, ref2, routes
-    headerColors = colorPairsPicker(this.props.config.headerColor, {
-      contrast: 5.5
+    var childPages, docOptions, docPages;
+    childPages = templateChildrenPages(__filename, this.props.state).map(function(child) {
+      return {
+        title: child.data.title,
+        order: child.data.order,
+        path: child.path
+      };
     });
-    darker = chroma(this.props.config.headerColor).darken(9).hex();
-    activeHeaderColors = colorPairsPicker(darker, {
-      contrast: 7
+    childPages = sortBy(childPages, function(child) {
+      return child.order;
     });
-
-    routes = this.getRoutes().map(function(route) {
-      return route.path;
+    docOptions = childPages.map(function(child) {
+      return React.createElement("option", {
+        "key": child.path,
+        "value": child.path
+      }, child.title);
     });
-    docsActive = (routes.indexOf(link("/docs/")) >= 0);
+    docPages = childPages
 
-    return (
-      <div>
-        <div
-          style={{
-            background: headerColors.bg,
-            color: headerColors.fg,
-            marginBottom: rhythm(1.5)
-          }}
-        >
-          <Container
+        .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={{
-              maxWidth: 960,
-              padding: `${rhythm(1/2)}`,
-              paddingBottom: `${rhythm(1/2)}`
+              marginBottom: rhythm(1/2)
             }}
           >
-            <Grid
-              columns={12}
-              style={{
-                padding: `${rhythm(1/2)} 0`
-              }}
+            <Link
+              to={link(child.path)}
             >
-              <Span
-                columns={4}
-                style={{
-                  height: 24 // Ugly hack. How better to constrain height of div?
-                }}
-              >
-                <Link
-                  to={link('/')}
-                  style={{
-                    textDecoration: 'none',
-                    color: headerColors.fg,
-                    fontSize: fontSizeToPx("25.5px").fontSize
-                  }}
-                >
-                  {this.props.config.siteTitle}
-                </Link>
-              </Span>
-              <Span columns={8} last={true}>
-                <a
-                  style={{
-                    float: 'right',
-                    color: headerColors.fg,
-                    textDecoration: 'none',
-                    marginLeft: rhythm(1/2)
-                  }}
-                  href="https://github.com/gatsbyjs/gatsby"
-                >
-                  Github
-                </a>
-                <Link
-                  to={link('/docs/')}
-                  style={{
-                    background: docsActive ? activeHeaderColors.bg : headerColors.bg,
-                    color: docsActive ? activeHeaderColors.fg : headerColors.fg,
-                    float: 'right',
-                    textDecoration: 'none',
-                    paddingLeft: rhythm(1/2),
-                    paddingRight: rhythm(1/2),
-                    paddingBottom: rhythm(1),
-                    marginBottom: rhythm(-1),
-                    paddingTop: rhythm(1),
-                    marginTop: rhythm(-1)
-                  }}
-                >
-                  Documentation
-                </Link>
-              </Span>
-            </Grid>
-          </Container>
+              {isActive ? <strong>{child.title}</strong> : child.title }
+            </Link>
+          </li>
+        )
+      };
+    })(this));
+
+    return (
+      <div className='container'>
+        <div className='wiki-header'>
+          <a href='http://www.freecodecamp.com' 
+            >
+            <img
+              src="http://i.imgur.com/L5o713v.png" 
+              />
+            <span>
+              Return to the main site
+            </span>  
+          </a>
         </div>
-        <Container
-          style={{
-            maxWidth: 960,
-            padding: `${rhythm(1)} ${rhythm(1/2)}`,
-            paddingTop: 0
-          }}
-        >
-          <RouteHandler {...this.props}/>
-        </Container>
+        <Breakpoint minWidth={700}>
+          <div className="wikiAside">
+            <div className='searchBar'>
+              <input 
+                type='text' 
+                value ={this.props.filterText}
+                ref="filterTextInput"
+                onChange={this.handleSearchChange}
+                placeholder='Article search' 
+                /></div>
+            <div className='articlesList'>
+              <ul>
+              {docPages}
+              </ul>
+            </div>
+          </div>
+          <div className='articleContent'>
+            <RouteHandler typography={typography} {...this.props}/>
+          </div>
+        </Breakpoint>
+        <Breakpoint maxWidth={700}>
+          <div className='wikiSelector'>
+            <select
+              defaultValue={this.props.state.path}
+                onChange={this.handleTopicChange}
+                >
+              {docOptions}
+            </select>
+          </div>
+          <div className='articleContent'>
+            <RouteHandler typography={typography} {...this.props}/>
+          </div>  
+        </Breakpoint>
       </div>
     );
   }