plenty o changes

client/assets/scss/Sidebar.scss

@@ -0,0 +1,64 @@
+$transitionDuration: .4s;
+
+.Sidebar{
+  background: #fff;
+  width: 300px;
+  padding-right: 1em;
+  padding-left: 1em;
+  
+  img{
+      width: 100%;
+      height: auto;
+  }
+  
+  a.toggler{
+    display: none;
+  }
+  
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-height: 100%;
+    
+    transform: translateX(300px);
+    -webkit-transform: translateX(300px);
+    transition: transform $transitionDuration ease-out;
+    -webkit-transition: transform $transitionDuration ease-out;
+    
+    &.open {
+      transform: translateX(0px);
+      -webkit-transform: translateX(0px);
+      border-left: 1px solid #EAEAEA;
+      
+        &:before {
+            content:    " ";
+            display:    block;
+            background: rgba(0,0,0,0.4);
+            position:   absolute;
+            height:     100%;
+            width:      100vw;
+            top:        0;
+            right:      100%;
+        }
+        
+        a.toggler{
+            transform: rotate(450deg);
+        }
+    }
+    
+    a.toggler{
+        display: block;
+        width: 2em;
+        height: 2em;
+        position: absolute;
+        left: -3em;
+        top: .5em;
+        cursor: pointer;
+        color: white;
+        transform: rotate(0deg);
+        transition: transform $transitionDuration ease-out;
+        -webkit-transition: transform $transitionDuration ease-out;
+    }
+  }
+}

client/assets/scss/main.scss

@@ -1,5 +1,26 @@
+@import './utils.scss';
+
 body{
   position: relative;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+a{
+  background-color: transparent;
+  color: #3598db;
+  text-decoration: none;
+ 
+ &:hover{
+   color: #3598db;
+ }
 }
 
 .Layout {
@@ -47,21 +68,3 @@ body{
   flex: 1;
   -webkit-flex: 1;
 }
-
-.Sidebar{
-  background: #fff;
-  width: 300px;
-  
-  img{
-      width: 100%;
-      height: auto;
-  }
-  
-  @media (max-width: 768px) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
-

client/assets/scss/utils.scss

@@ -0,0 +1,25 @@
+/* Effect 1: Brackets */
+.link{
+    position: relative;
+    
+    &:before{
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0;
+        left: 0;
+        background-color: #3598db;
+        visibility: hidden;
+        -webkit-transform: scaleX(0);
+        transform: scaleX(0);
+        -webkit-transition: all 0.2s ease-in-out 0s;
+        transition: all 0.2s ease-in-out 0s;
+    }
+    
+    &:hover:before{
+        visibility: visible;
+        -webkit-transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}

client/js/app.js

@@ -40,7 +40,7 @@ ReactDOM.render((
         <Router history={history}>
             <Route path="/" component={App}>
                 <IndexRoute component={Index}/>
-                <Route path="/test" component={Index}/>
+                <Route path="/:page" component={Index}/>
             </Route>
         </Router>
     </Provider>

client/js/components/Post.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Post extends React.Component{
+    
+    
+    render(){
+        return(
+            <div></div>
+            );
+    }
+}

client/js/components/Preview.js

@@ -8,9 +8,9 @@ export default class Preview extends React.Component{
         for (let i in posts){
             elements.push(
                             <div key={i}>
-                                <h1>{posts[i].title}</h1>
                                 <p>{posts[i].date}</p>
-                                <p>{posts[i].intro}</p>
+                                <h1 dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></h1>
+                                <p dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></p>
                             </div>
                         );
         }
@@ -18,6 +18,12 @@ export default class Preview extends React.Component{
         return elements;
     }
     
+    decodeHtml(html) {
+      var txt = document.createElement("textarea");
+      txt.innerHTML = html;
+      return {__html : txt.value};
+    }
+  
     render(){
         const posts = this.props.posts;
         

client/js/components/Sidebar.js

@@ -1,14 +1,35 @@
 import React from 'react';
 
-//images
+//assest
 import me from '../../assets/images/me.jpg';
+import '../../assets/scss/Sidebar.scss';
 
 export default class Sidebar extends React.Component{
     
+    constructor(){
+        super();
+        
+        this.state = {
+            toggler: ""
+        };
+        
+        this.onToggle = this.onToggle.bind(this);
+    }
+    
+    onToggle(){
+        let temp = this.state.toggler;
+        temp = temp === "open" ? "" : "open";  
+        
+        this.setState({
+            toggler: temp
+        });
+    }
+    
     render(){
         return(
-            <div class="Sidebar">
+            <div class={"Sidebar " + this.state.toggler}>
-                <h2>About me</h2>
+                <a onClick={this.onToggle} class="toggler"><i class="fa fa-2x fa-navicon" aria-hidden="true" /></a>
+                <a href="#" class="link">Test 1234</a>
                 <p>Test 123</p>
                 <p>Test 123</p>
                 <p>Test 123</p>

client/js/pages/Index.js

@@ -9,6 +9,7 @@ import Sidebar from '../components/Sidebar';
 //css
 import '../../assets/css/normalize.css';
 import '../../assets/scss/main.scss';
+import 'font-awesome/css/font-awesome.min.css';
 
 export default class Index extends React.Component{
     componentDidMount(){

metadata.js

@@ -8,6 +8,7 @@
 */
 
 import fs from 'fs';
+import ncp from 'ncp';
 import marked from 'marked';
 import highlight from 'highlight.js';
 
@@ -61,3 +62,11 @@ fs.writeFile('./dist/metadata.json', JSON.stringify(json,null,4), (err) => {
     if (err) throw err;
     console.log("Saved metadata.json");
 })
+
+//copy posts folder to dist
+ncp('./posts', './dist/posts', (err) => {
+ if (err) {
+   return console.error(err);
+ }
+ console.log('copied');
+});

package.json

@@ -4,11 +4,11 @@
   "description": "My personal website built with React and Go",
   "main": "index.js",
   "scripts": {
-    "build": "webpack & babel-node metadata.js",
+    "build": "webpack && babel-node metadata.js",
     "c9": "webpack-dev-server --port $PORT --host $IP --hot --content-base dist --history-api-fallback",
     "dev": "webpack-dev-server --content-base dist --inline --hot --history-api-fallback",
-    "prod-linux": "export NODE_ENV=production && webpack -p && babel-node metadata.js",
+    "prod": "export NODE_ENV=production && webpack -p && babel-node metadata.js",
-    "prod-windows": "set NODE_ENV=production & webpack -p & babel-node metadata.js",
+    "prod-win": "set NODE_ENV=production && webpack -p && babel-node metadata.js",
     "deploy": "goapp deploy",
     "serve": "goapp serve"
   },

readme.md

@@ -2,3 +2,8 @@
 
 - ReactJS
 - Go App Engine
+
+`npm run build` - builds the application using webpack and runs metadata.js
+
+- metadata.js recursivly scans the posts folder for markdown files and then parses each into into a json object
+- the posts folder is then copied into the dist folder