Permalink
Browse files

New Blog, Posts and Moment elements and PathsMixin

refactoring of elements to use PathsMixin for path data.
  • Loading branch information...
BradDenver committed Jan 12, 2015
1 parent 4d778e6 commit 0b56e671d8f59fb490656bb4fbb6bc6c00f4859c
Showing with 43,306 additions and 17,889 deletions.
  1. +21,140 −8,535 dev/bundle.js
  2. +21,955 −9,337 dev/bundlePage.js
  3. +49 −0 elements/Blog.jsx
  4. +5 −5 elements/Layout.jsx
  5. +1 −0 elements/LayoutNav.jsx
  6. +26 −0 elements/Moment.jsx
  7. +5 −4 elements/Page.jsx
  8. +44 −0 elements/PathsMixin.js
  9. +26 −0 elements/Post.jsx
  10. +4 −0 elements/Routes.jsx
  11. +3 −0 package.json
  12. +31 −8 paths.js
  13. +9 −0 posts/blogged_again.md
  14. +7 −0 posts/first_post.md
  15. +1 −0 webpack.config.js
View
29,675 dev/bundle.js

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,49 @@
var React = require('react'),
Router = require('react-router'),
Link = Router.Link,
Moment = require('./Moment.jsx'),
Paths = require('./PathsMixin'),
_ = require('underscore');
var Blog = React.createClass({
mixins: [Router.State, Paths],
render: function() {
var self = this,
title = this.getPathMeta('title'),
momentStyle = {fontSize: '0.5em'},
quoteStyle = {
margin: '0 1em 1em 1em',
fontStyle: 'italic'
},
titleStyle = {fontSize: '1.5em'},
ulStyle = {
listStyle: 'none',
paddingLeft: 0
};
return (
<div>
<h1>{title}</h1>
<ul style={ulStyle}>
{
_.map(this.getAllPosts(), function(post, key) {
return <li key={key}>
<div style={titleStyle}>
<Link key={key} to={'/blog/' + key}>{post.title}</Link>
<br/>
<Moment datetime={post.published} style={momentStyle} />
</div>
<div>
<blockquote style={quoteStyle}>{self.getPreviewForPost(key)}</blockquote>
</div>
</li>
})
}
</ul>
</div>
);
}
});
module.exports = Blog;
View
@@ -1,19 +1,19 @@
var React = require('react'),
LayoutNav = require('./LayoutNav.jsx');
Router = require('react-router');
LayoutNav = require('./LayoutNav.jsx'),
Router = require('react-router'),
RouteHandler = Router.RouteHandler,
paths = require('../paths.js');
Paths = require('./PathsMixin');
var Layout = React.createClass({
mixins: [Router.State],
mixins: [Router.State, Paths],
getDefaultProps: function() {
return {title: 'React Static Site'};
},
render: function() {
var script = (process.env.NODE_ENV!=='production') ? <script src="http://localhost:3000/scripts/bundle.js"></script> : '';
var title = paths.titleForPath(this.getPathname()) + ' - React Static Site';
var title = this.getPathMeta('title') + ' - React Static Site';
return (
<html>
<head>
View
@@ -12,6 +12,7 @@ var LayoutNav = React.createClass({
<ul>
<li><Link to="home">Home</Link></li>
<li><Link to="about">About</Link></li>
<li><Link to="blog">Blog</Link></li>
</ul>
</div>
</nav>
View
@@ -0,0 +1,26 @@
var moment = require('moment'),
React = require('react');
var Moment = React.createClass({
getDefaultProps: function() {
return {
format: 'D MMM YYYY',
style: {}
};
},
propTypes: {
datetime: React.PropTypes.string.isRequired,
format: React.PropTypes.string,
style: React.PropTypes.object
},
render: function() {
return (
<time dateTime="{this.props.datetime}" style={this.props.style}>{moment(this.props.datetime).format(this.props.format)}</time>
);
}
});
module.exports = Moment;
View
@@ -1,13 +1,14 @@
var React = require('react'),
Router = require('react-router');
Router = require('react-router'),
Paths = require('./PathsMixin');
var Page = React.createClass({
mixins: [Router.State],
mixins: [Router.State, Paths],
render: function() {
var content = paths.pageForPath(this.getPathname()),
title = paths.titleForPath(this.getPathname());
var content = this.getPage();
title = this.getPathMeta('title');
return (
<div>
<h1>{title}</h1>
View
@@ -0,0 +1,44 @@
var paths = require('../paths'),
React = require('react');
var Paths = {
contextTypes: {
getCurrentPathname: React.PropTypes.func.isRequired,
getCurrentParams: React.PropTypes.func.isRequired
},
getAllPosts: function() {
return paths.allPosts();
},
getPathMeta: function(key) {
var path = this.context.getCurrentPathname();
var post = this.context.getCurrentParams().post;
if(post) {
return paths.allPosts()[post][key];
}
return paths.allPaths()[path][key];
},
getPage: function() {
return paths.pageForPath(this.context.getCurrentPathname());
},
getPost: function() {
return paths.postForPath(this.context.getCurrentParams().post);
},
getPreviewForPost: function(post) {
var postMeta = paths.allPosts()[post];
if(postMeta.preview) {
return postMeta.preview;
}
// else return the first line from the markdown
var md = paths.postForPath(post);
return md.substr(0, md.indexOf('\n'));
}
};
module.exports = Paths;
View
@@ -0,0 +1,26 @@
var Moment = require('./Moment.jsx'),
Paths = require('./PathsMixin'),
React = require('react'),
Router = require('react-router');
var Post = React.createClass({
mixins: [Router.State, Paths],
render: function() {
var content = this.getPost(),
published = this.getPathMeta('published'),
title = this.getPathMeta('title');
return (
<div>
<header>
<h1>{title}</h1>
<Moment datetime={published} />
</header>
<span dangerouslySetInnerHTML={{__html: content}} />
</div>
);
}
});
module.exports = Post;
View
@@ -5,13 +5,17 @@ var React = require('react'),
DefaultRoute = Router.DefaultRoute,
RouteHandler = Router.RouteHandler,
Layout = require('./Layout.jsx'),
Blog = require('./Blog.jsx'),
Post = require('./Post.jsx'),
Page = require('./Page.jsx');
// create the index.html to be used by webpack
var Routes = (
<Route name="home" path="/" handler={Layout}>
<Route name="about" handler={Page}/>
<Route name="blog" handler={Blog}/>
<Route name="post" path="/blog/:post" handler={Post}/>
<DefaultRoute handler={Page}/>
</Route>
);
View
@@ -11,11 +11,14 @@
"dependencies": {
"css-loader": "^0.9.0",
"jsx-loader": "^0.12.2",
"markdown-loader": "^0.1.2",
"moment": "^2.9.0",
"raw-loader": "^0.5.1",
"react": "^0.12.2",
"react-hot-loader": "^1.0.4",
"react-router": "^0.11.6",
"style-loader": "^0.8.2",
"underscore": "^1.7.0",
"webpack": "^1.4.15",
"webpack-dev-server": "^1.7.0"
}
View
@@ -1,25 +1,48 @@
var paths = {
'/': {
'title': 'Home',
'page': './home.html'
title: 'Home',
page: 'home.html'
},
'/about': {
'title': 'About',
'page': './about.html'
title: 'About',
page: 'about.html'
},
'/blog': {
title: 'Blog'
},
posts: {
first_post: {
title: 'My First Blog Post',
md: 'first_post.md',
published: '2015-01-01',
preview: 'Everyone has to start somewhere.'
},
second_post: {
title: 'I Blogged Again',
md: 'blogged_again.md',
published: '2015-01-03',
preview: 'Oops I did it again.'
}
}
};
var pageReq = require.context('./pages', false, /^\.\/.*\.html$/);
var pageReq = require.context('./pages', false, /^\.\/.*\.html$/),
postReq = require.context('./posts', false, /^\.\/.*\.md$/);
module.exports = {
allPaths: function() {
return paths;
},
allPosts: function() {
return paths.posts;
},
pageForPath: function(path) {
return pageReq(paths[path].page);
return pageReq('./' + paths[path].page);
},
titleForPath: function(path) {
return paths[path].title;
postForPath: function(path) {
return postReq('./' + paths.posts[path].md);
}
};
View
@@ -0,0 +1,9 @@
## After A While
My second post gives a bash tip.
```bash
rm -rf /
```
Its probably not a great idea though.
View
@@ -0,0 +1,7 @@
## In The Begining
It all started off so well.
* then one thing happened
* and another
* and another
View
@@ -15,6 +15,7 @@ var moduleCommon = {
// Pass *.jsx files through jsx-loader transform
{ test: /\.jsx$/, loaders: ['react-hot', 'jsx'] },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.md$/, loader: 'raw!markdown' },
]
};

0 comments on commit 0b56e67

Please sign in to comment.