too many changes - load posts now

client/assets/css/dracula.css

@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}

client/assets/scss/Footer.scss

@@ -1,4 +1,4 @@
-.Footer{
+.Footer {
     height: 5em;
     line-height: 5em;
     background-color: #F1F1F1;

client/assets/scss/Preview.scss

@@ -1,22 +1,16 @@
-.Preview{
+.Preview {
-  flex: 1;
+    .post + .post {
-  -webkit-flex: 1;
-
-  .post + .post{
         margin-top: 2em;
     }
-
+    .date {
-  .date{
         margin: 0;
         opacity: 0.7;
         font-weight: 300;
     }
-
+    .intro {
-  .intro{
         margin-bottom: 0.5em;
     }
-
+    p {
-  p{
         font-weight: 300;
     }
 }

client/assets/scss/Sidebar.scss

@@ -1,43 +1,35 @@
-$transitionDuration: .4s;
+$transitionDuration: 0.4s;
-
+.Sidebar {
-.Sidebar{
     background: #fff;
     width: 300px;
     padding-right: 1em;
     padding-left: 1em;
-
+    img {
-  img{
         width: 100%;
         height: auto;
         border-radius: 0.5em;
     }
-
+    h2 {
-  h2{
         text-align: center;
         margin-bottom: 0.5em;
     }
-
+    a.toggler {
-  a.toggler{
         display: none;
     }
-
     @media (max-width: 768px) {
         position: absolute;
         top: 0;
         right: 0;
         min-height: 100%;
         padding-top: 1em;
-
         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;
@@ -48,26 +40,23 @@ $transitionDuration: .4s;
                 top: 0;
                 right: 100%;
             }
-
+            a.toggler {
-        a.toggler{
                 transform: rotate(450deg);
             }
         }
-
+        a.toggler {
-    a.toggler{
             display: block;
             width: 2em;
             height: 2em;
             position: absolute;
             left: -3em;
-        top: .5em;
+            top: 0.5em;
             cursor: pointer;
             color: white;
             transform: rotate(0deg);
             transition: transform $transitionDuration ease-out;
             -webkit-transition: transform $transitionDuration ease-out;
-
+            &:hover {
-        &:hover{
                 color: #3598db;
             }
         }

client/assets/scss/main.scss

@@ -1,60 +1,74 @@
 @import './utils.scss';
-
+html {
-html{
     font-family: 'Roboto Slab', serif;
 }
-
+body {
-body{
+    max-width: 100%;
+    overflow-x: hidden;
     position: relative;
     -webkit-font-smoothing: subpixel-antialiased;
 }
-
+h1,
-h1, h2, h3, h4, h5, h6{
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin: 0;
     font-weight: 500;
 }
-
+p {
-p{
     font-weight: 300;
 }
-
 *,
-*:before,
+*:after,
-*:after {
+*:before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
-
+a {
-a{
     background-color: transparent;
     color: #3598db;
     text-decoration: none;
-
+    &:hover {
- &:hover{
         color: #3598db;
     }
 }
-
+code,
+pre code{
+  white-space: pre-wrap;
+  position: relative;
+}
 .Layout {
     height: 100%;
     display: flex;
     flex-direction: column;
-
+    .Footer,
-  .Header, .Main, .Footer {
+    .Header,
+    .Main {
         display: flex;
         padding-right: calc(50% - 997px / 2);
         padding-left: calc(50% - 997px / 2);
-    &:before, &:after { content: " "; width: 1em; }
+        &:after,
+        &:before {
+            content: " ";
+            width: 1em;
+        }
     }
 }
-
+.Main {
-.Main{
     padding-top: 1em;
-  flex: 1;
 }
+.Content {
+    flex: 1;
 
-.Header{
+    img{
+      width: 100%;
+      height: auto;
+    }
+}
+.Header {
     width: 100%;
     background: url("../images/header.jpg");
     background-size: cover;
@@ -62,8 +76,7 @@ a{
     border-bottom: solid;
     border-width: 1px;
     border-color: #DADADA;
-
+    h1 {
-  h1{
         text-align: center;
     }
 }

client/assets/scss/utils.scss

@@ -1,8 +1,7 @@
 /* Effect 1: Brackets */
-.link{
+.link {
     position: relative;
-    
+    &:before {
-    &:before{
         content: "";
         position: absolute;
         width: 100%;
@@ -16,8 +15,7 @@
         -webkit-transition: all 0.2s ease-in-out 0s;
         transition: all 0.2s ease-in-out 0s;
     }
-    
+    &:hover:before {
-    &: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="/:page" component={Index}/>
+                <Route path="/:page(/:category)(/:post)" component={Index}/>
             </Route>
         </Router>
     </Provider>

client/js/components/Footer.js

@@ -6,7 +6,9 @@ export default class Footer extends React.Component{
 
   render(){
     return(
-            <div class="Footer">Site created and maintained by Mitchell Gerber</div>
+      <div class="Footer">
+        Site created and maintained by Mitchell Gerber
+      </div>
     );
   }
 }

client/js/components/Post.js

@@ -1,11 +1,20 @@
 import React from 'react';
+import marked from 'marked';
+import highlight from 'highlight.js';
+
+marked.setOptions({
+    header: true,
+    highlight: (code) => {
+        return highlight.highlightAuto(code).value;
+    }
+});
 
 export default class Post extends React.Component{
 
-    
   render(){
     return(
-            <div></div>
+      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content)}}>
+      </div>
     );
   }
 }

client/js/components/Preview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'react-router';
+import {Link} from 'react-router';
 
 import '../../assets/scss/Preview.scss';
 
@@ -10,10 +10,16 @@ export default class Preview extends React.Component{
     for (let i in posts){
       elements.push(
         <div class="post" key={i}>
-                                <div class="date">{posts[i].date}</div>
+          <div class="date">
-                                <div class="intro" dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></div>
+            {posts[i].date}
-                                <div dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></div>
+          </div>
-                                <p><a class="link" href="#">continue reading...</a></p>
+          <h2 class="intro" >{posts[i].title.toString()}</h2>
+          <p>{posts[i].intro.toString()}</p>
+          <p>
+            <Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>
+              continue reading...
+            </Link>
+          </p>
         </div>
       );
     }
@@ -21,12 +27,6 @@ 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

@@ -28,16 +28,38 @@ export default class Sidebar extends React.Component{
   render(){
     return(
       <div class={"Sidebar " + this.state.toggler}>
-                <a onClick={this.onToggle} class="toggler"><i class="fa fa-2x fa-navicon" aria-hidden="true" /></a>
+        <a onClick={this.onToggle} class="toggler">
-                <h2>About Me</h2>
+          <i
+            class="fa fa-2x fa-navicon"
+            aria-hidden="true" />
+        </a>
+        <h2>
+          About Me
+        </h2>
         <img src={me}/>
-                <p>My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.</p>
+        <p>
+          My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
+        </p>
 
-                <h3>Contact Me</h3>
+        <h3>
-                <p><i class="fa fa-envelope" aria-hidden="true"></i><a class="link" href="mailto:mgerb42@gmail.com"> eMail</a></p>
+          Contact Me
-                <p><i class="fa fa-linkedin-square" aria-hidden="true"></i><a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a></p>
+        </h3>
-                <p><i class="fa fa-github" aria-hidden="true"></i><a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a></p>
+        <p>
-                <p><i class="fa fa-wpforms" aria-hidden="true"></i><a href="/resume" class="link"> Resume</a></p>
+          <i class="fa fa-envelope" aria-hidden="true"></i>
+          <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
+        </p>
+        <p>
+          <i class="fa fa-linkedin-square" aria-hidden="true"></i>
+          <a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
+        </p>
+        <p>
+          <i class="fa fa-github" aria-hidden="true"></i>
+          <a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
+        </p>
+        <p>
+          <i class="fa fa-wpforms" aria-hidden="true"> </i>
+          <a href="/resume" class="link"> Resume</a>
+        </p>
       </div>
     );
   }

client/js/pages/Index.js

@@ -5,26 +5,45 @@ import Header from '../components/Header';
 import Preview from '../components/Preview';
 import Footer from '../components/Footer';
 import Sidebar from '../components/Sidebar';
+import Post from '../components/Post';
 
 //css
 import '../../assets/css/normalize.css';
 import '../../assets/scss/main.scss';
 import 'font-awesome/css/font-awesome.min.css';
+import '../../assets/css/dracula.css';
 
-export default class Index extends React.Component{
+export default class Index extends React.Component {
-    componentDidMount(){
+    componentDidMount() {
         this.props.actions.fetchPreview();
+        this.page = this.props.params.page;
+        this.page === 'post' ? this.props.actions.fetchPost(this.props.params.category, this.props.params.post) : "";
     }
 
-    render(){
+
-        return(
+    componentWillReceiveProps(nextProps){
-                <div class="Layout">
+        if(this.props.params !== nextProps.params){
-                    <Header/>
+            const params = nextProps.params;
+            this.page = params.page;
+
+            if(typeof params.post !== 'undefined' && typeof params.category !== 'undefined'){
+              this.props.actions.fetchPost(params.category, params.post);
+            }
+        }
+    }
+
+    render() {
+        return (
+          <div class="Layout" >
+            <Header />
               <div class="Main">
-                        <Preview posts={this.props.redux.preview.posts}/>
+                <div class="Content">
+                  {typeof this.page === 'undefined' ? <Preview posts={this.props.redux.preview.posts} /> : ""}
+                  {this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
+                </div>
                 <Sidebar />
               </div>
-                    <Footer/>
+            <Footer />
           </div>
         );
     }

client/js/redux/actions.js

@@ -1,15 +1,23 @@
 import * as types from "./constants";
+import marked from 'marked';
 
-function initPreview(posts){
+function initPreview(posts) {
-    return{
+    return {
         type: types.INIT_PREVIEW,
         posts
     }
 }
 
+function loadPost(post){
+    return {
+      type: types.LOAD_POST,
+      post
+    }
+}
+
 //using redux-thunk we can modify actions before they get called
 //in this case we can send the http request here rather in the react component
-export function fetchPreview(){
+export function fetchPreview() {
     return (dispatch) => {
         return fetch('/public/metadata.json')
             .then(response => response.json())
@@ -21,3 +29,16 @@ export function fetchPreview(){
             });
     }
 }
+
+export function fetchPost(category, post) {
+    return (dispatch) => {
+        return fetch(`/public/posts/${category}/${post}.md`)
+            .then(response => response.text())
+            .then(response => {
+                dispatch(loadPost(response));
+            })
+            .catch(error => {
+                console.log(error);
+            });
+    }
+}

client/js/redux/constants.js

@@ -1,3 +1,4 @@
 //constants
 export const INIT_PREVIEW = 'INIT_PREVIEW';
 export const FILTER_PREVIEW = 'FILTER_PREVIEW';
+export const LOAD_POST = 'LOAD_POST';

client/js/redux/reducers.js

@@ -1,20 +1,29 @@
 //just using one reducer - use combineReducers from redux to modularize things
-import {combineReducers} from 'redux';
+import {
-import {routerReducer} from 'react-router-redux';
+    combineReducers
+} from 'redux';
+import {
+    routerReducer
+} from 'react-router-redux';
 
 //import typs
 import * as types from './constants';
 
 //defaults -
 const defaultState = {
-    preview: {posts: []},
+    preview: {
-    filteredPreview: {posts: []}
+        posts: []
+    },
+    filteredPreview: {
+        posts: []
+    },
+    post: ""
 };
 
 //default reducer
-function reducer(state = defaultState, action){
+function reducer(state = defaultState, action) {
     //every reducer gets called when an action is called - we check for the type to modify our state accordingly
-    switch (action.type){
+    switch (action.type) {
         case types.INIT_PREVIEW:
             return Object.assign({}, state, {
                 preview: Object.assign({}, state.preview, action.posts)
@@ -22,7 +31,12 @@ function reducer(state = defaultState, action){
         case types.FILTER_PREVIEW:
             return Object.assign({}, state, {
                 filteredPreview: Object.assign({}, state.filteredPreview, action.posts)
+            });
+        case types.LOAD_POST:
+            return Object.assign({}, state, {
+                post: action.post
             })
+
     }
 
     //return present state if no actions get called

metadata.js

@@ -36,13 +36,12 @@ function parse_dir(dir, folder_name){
         } else {
             const file = fs.readFileSync(dir+post, 'utf8');
             const tokens = marked.lexer(file, null);
-            const path = dir + post;
             const temp = {
-                path: path.slice(1, path.length),
+                filename: post.slice(0, post.length - 3),
                 category: folder_name,
                 date: post.slice(0, 10),
-                title: marked('<h2>' + tokens[0].text + '</h2>'),
+                title: tokens[0].text,
-                intro: marked(tokens[1].text)
+                intro: tokens[1].text
             }
             json.posts.push(temp);
         }