Merge pull request #1 from gesposito/master
Converted CoffeeScript and CJSX to ES6 and JSX
This commit is contained in:
Kyle Mathews
commit
2e5167eb08
14 changed files with 318 additions and 278 deletions
|
|
@ -1,9 +0,0 @@
|
||||||
exports.loadContext = (callback) ->
|
|
||||||
context = require.context './pages', true
|
|
||||||
if module.hot
|
|
||||||
module.hot.accept(context.id, ->
|
|
||||||
context = require.context './pages', true
|
|
||||||
callback context
|
|
||||||
)
|
|
||||||
|
|
||||||
callback context
|
|
||||||
11
app.js
Normal file
11
app.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
exports.loadContext = function(callback) {
|
||||||
|
var context;
|
||||||
|
context = require.context('./pages', true);
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept(context.id, function() {
|
||||||
|
context = require.context('./pages', true);
|
||||||
|
return callback(context);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return callback(context);
|
||||||
|
};
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
Router = require 'react-router'
|
|
||||||
{Link} = Router
|
|
||||||
prune = require 'underscore.string/prune'
|
|
||||||
includes = require 'underscore.string/include'
|
|
||||||
find = require 'lodash/collection/find'
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
{rhythm, fontSizeToMS} = @props.typography
|
|
||||||
readNext = @props.post.readNext
|
|
||||||
if readNext?
|
|
||||||
nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
|
|
||||||
unless nextPost
|
|
||||||
<noscript />
|
|
||||||
else
|
|
||||||
nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
|
|
||||||
|
|
||||||
# Create prunned version of the body.
|
|
||||||
html = nextPost.data.body
|
|
||||||
body = prune(html.replace(/<[^>]*>/g, ''), 200)
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h6
|
|
||||||
style={{
|
|
||||||
margin: 0
|
|
||||||
fontSize: fontSizeToMS(-1).fontSize
|
|
||||||
lineHeight: fontSizeToMS(-1).lineHeight
|
|
||||||
letterSpacing: -0.5
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
READ THIS NEXT:
|
|
||||||
</h6>
|
|
||||||
<h3
|
|
||||||
style={{
|
|
||||||
marginBottom: rhythm(1/4)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link
|
|
||||||
to={nextPost.path}
|
|
||||||
query={{readNext: true}}
|
|
||||||
>
|
|
||||||
{nextPost.data.title}
|
|
||||||
</Link>
|
|
||||||
</h3>
|
|
||||||
<p>{body}</p>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
56
components/ReadNext.jsx
Normal file
56
components/ReadNext.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router';
|
||||||
|
import { prune, include as includes } from 'underscore.string';
|
||||||
|
import find from 'lodash/collection/find';
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
|
||||||
|
ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
|
||||||
|
readNext = this.props.post.readNext;
|
||||||
|
if (readNext != null) {
|
||||||
|
nextPost = find(this.props.pages, function(page) {
|
||||||
|
return includes(page.path, readNext.slice(1, -1));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!nextPost) {
|
||||||
|
return React.createElement("noscript", null);
|
||||||
|
} else {
|
||||||
|
nextPost = find(this.props.pages, function(page) {
|
||||||
|
return includes(page.path, readNext.slice(1, -1));
|
||||||
|
});
|
||||||
|
// Create pruned version of the body.
|
||||||
|
html = nextPost.data.body;
|
||||||
|
body = prune(html.replace(/<[^>]*>/g, ''), 200);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h6
|
||||||
|
style={{
|
||||||
|
margin: 0,
|
||||||
|
fontSize: fontSizeToMS(-1).fontSize,
|
||||||
|
lineHeight: fontSizeToMS(-1).lineHeight,
|
||||||
|
letterSpacing: -0.5
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
READ THIS NEXT:
|
||||||
|
</h6>
|
||||||
|
<h3
|
||||||
|
style={{
|
||||||
|
marginBottom: rhythm(1/4)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={nextPost.path}
|
||||||
|
query={{readNext: true}}
|
||||||
|
>
|
||||||
|
{nextPost.data.title}
|
||||||
|
</Link>
|
||||||
|
</h3>
|
||||||
|
<p>{body}</p>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
49
html.cjsx
49
html.cjsx
|
|
@ -1,49 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
Typography = require 'typography'
|
|
||||||
DocumentTitle = require 'react-document-title'
|
|
||||||
|
|
||||||
typography = new Typography()
|
|
||||||
{TypographyStyle} = typography
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
getDefaultProps: ->
|
|
||||||
body: ""
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
title = DocumentTitle.rewind()
|
|
||||||
if @props.title then title = @props.title
|
|
||||||
|
|
||||||
if __GH_PAGES__? and __GH_PAGES__
|
|
||||||
urlPrefix = @props.config.ghPagesURLPrefix
|
|
||||||
else
|
|
||||||
urlPrefix = ""
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charSet="utf-8"/>
|
|
||||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
|
|
||||||
<meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
|
|
||||||
<title>{@props.title}</title>
|
|
||||||
<link rel="shortcut icon" href={@props.favicon}/>
|
|
||||||
<TypographyStyle/>
|
|
||||||
<style dangerouslySetInnerHTML={{__html: """
|
|
||||||
body {
|
|
||||||
color: rgb(66,66,66);
|
|
||||||
}
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
|
||||||
color: rgb(44,44,44);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: rgb(42,93,173);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
"""}}/>
|
|
||||||
</head>
|
|
||||||
<body className="landing-page">
|
|
||||||
<div id="react-mount" dangerouslySetInnerHTML={{__html: @props.body}} />
|
|
||||||
<script src={urlPrefix + "/bundle.js"}/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
61
html.jsx
Normal file
61
html.jsx
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Typography from 'typography';
|
||||||
|
import DocumentTitle from 'react-document-title';
|
||||||
|
|
||||||
|
var TypographyStyle = new Typography().TypographyStyle;
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
getDefaultProps: function() {
|
||||||
|
return {
|
||||||
|
body: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var title, urlPrefix;
|
||||||
|
title = DocumentTitle.rewind();
|
||||||
|
if (this.props.title) {
|
||||||
|
title = this.props.title;
|
||||||
|
}
|
||||||
|
if ((typeof __GH_PAGES__ !== "undefined" && __GH_PAGES__ !== null) && __GH_PAGES__) {
|
||||||
|
urlPrefix = this.props.config.ghPagesURLPrefix;
|
||||||
|
} else {
|
||||||
|
urlPrefix = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8"/>
|
||||||
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
|
<meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
|
||||||
|
<title>{this.props.title}</title>
|
||||||
|
<link rel="shortcut icon" href={this.props.favicon}/>
|
||||||
|
<TypographyStyle/>
|
||||||
|
<style dangerouslySetInnerHTML={{__html:
|
||||||
|
`
|
||||||
|
body {
|
||||||
|
color: rgb(66,66,66);
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: rgb(44,44,44);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: rgb(42,93,173);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}}/>
|
||||||
|
</head>
|
||||||
|
<body className="landing-page">
|
||||||
|
<div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
|
||||||
|
<script src={urlPrefix + "/bundle.js"}/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
Router = require 'react-router'
|
|
||||||
{RouteHandler, Link} = Router
|
|
||||||
{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
|
|
||||||
Typography = require 'typography'
|
|
||||||
require '../css/styles.css'
|
|
||||||
{link} = require 'gatsby-helpers'
|
|
||||||
|
|
||||||
typography = Typography()
|
|
||||||
{rhythm, fontSizeToMS} = typography
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
render: ->
|
|
||||||
if @props.state.path is link('/')
|
|
||||||
header = (
|
|
||||||
<h1
|
|
||||||
style={{
|
|
||||||
fontSize: fontSizeToMS(2.5).fontSize
|
|
||||||
lineHeight: fontSizeToMS(2.5).lineHeight
|
|
||||||
marginBottom: rhythm(1.5)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link
|
|
||||||
style={{
|
|
||||||
textDecoration: 'none'
|
|
||||||
color: 'inherit'
|
|
||||||
}}
|
|
||||||
to={link('/')}
|
|
||||||
>
|
|
||||||
{@props.config.blogTitle}
|
|
||||||
</Link>
|
|
||||||
</h1>
|
|
||||||
)
|
|
||||||
else
|
|
||||||
header = (
|
|
||||||
<h3>
|
|
||||||
<Link
|
|
||||||
style={{
|
|
||||||
textDecoration: 'none'
|
|
||||||
color: 'inherit'
|
|
||||||
}}
|
|
||||||
to={link('/')}
|
|
||||||
>
|
|
||||||
{@props.config.blogTitle}
|
|
||||||
</Link>
|
|
||||||
</h3>
|
|
||||||
)
|
|
||||||
|
|
||||||
<Container
|
|
||||||
style={{
|
|
||||||
maxWidth: rhythm(24)
|
|
||||||
padding: "#{rhythm(2)} #{rhythm(1/2)}"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{header}
|
|
||||||
<RouteHandler typography={typography} {...@props}/>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
62
pages/_template.jsx
Normal file
62
pages/_template.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { RouteHandler, Link } from 'react-router';
|
||||||
|
import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
|
||||||
|
import Typography from 'typography';
|
||||||
|
import { link } from 'gatsby-helpers';
|
||||||
|
|
||||||
|
var typography = new Typography();
|
||||||
|
var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
|
||||||
|
|
||||||
|
import '../css/styles.css';
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var header;
|
||||||
|
if (this.props.state.path === link('/')) {
|
||||||
|
header = (
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: fontSizeToMS(2.5).fontSize,
|
||||||
|
lineHeight: fontSizeToMS(2.5).lineHeight,
|
||||||
|
marginBottom: rhythm(1.5)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
style={{
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
to={link('/')}
|
||||||
|
>
|
||||||
|
{this.props.config.blogTitle}
|
||||||
|
</Link>
|
||||||
|
</h1>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
header = (
|
||||||
|
<h3>
|
||||||
|
<Link
|
||||||
|
style={{
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
to={link('/')}
|
||||||
|
>
|
||||||
|
{this.props.config.blogTitle}
|
||||||
|
</Link>
|
||||||
|
</h3>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
style={{
|
||||||
|
maxWidth: rhythm(24),
|
||||||
|
padding: `${rhythm(2)} ${rhythm(1/2)}`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
|
<RouteHandler typography={typography} {...this.props}/>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
Router = require 'react-router'
|
|
||||||
{RouteHandler, Link} = Router
|
|
||||||
sortBy = require 'lodash/collection/sortBy'
|
|
||||||
DocumentTitle = require 'react-document-title'
|
|
||||||
{link} = require 'gatsby-helpers'
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
statics:
|
|
||||||
data: ->
|
|
||||||
yo: true
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
{rhythm} = @props.typography
|
|
||||||
pageLinks = []
|
|
||||||
for page in sortBy(@props.pages, (page) -> page.data?.date).reverse()
|
|
||||||
title = page.data?.title || page.path
|
|
||||||
if page.path isnt link("/") and not page.data?.draft
|
|
||||||
pageLinks.push (
|
|
||||||
<li
|
|
||||||
key={page.path}
|
|
||||||
style={{
|
|
||||||
marginBottom: rhythm(1/4)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link to={page.path}>{title}</Link>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
|
|
||||||
<DocumentTitle title="#{@props.config.blogTitle}">
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
marginBottom: rhythm(2.5)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="./kyle-round-small-pantheon.jpg"
|
|
||||||
style={{
|
|
||||||
float: 'left'
|
|
||||||
marginRight: rhythm(1/4)
|
|
||||||
marginBottom: 0
|
|
||||||
width: rhythm(2)
|
|
||||||
height: rhythm(2)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
Written by <strong>{@props.config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
{pageLinks}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</DocumentTitle>
|
|
||||||
66
pages/index.jsx
Normal file
66
pages/index.jsx
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { RouteHandler, Link } from 'react-router';
|
||||||
|
import sortBy from 'lodash/collection/sortBy';
|
||||||
|
import DocumentTitle from 'react-document-title';
|
||||||
|
import { link } from 'gatsby-helpers';
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
statics: {
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
yo: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
|
||||||
|
rhythm = this.props.typography.rhythm;
|
||||||
|
pageLinks = [];
|
||||||
|
ref = sortBy(this.props.pages, function(page) {
|
||||||
|
var ref;
|
||||||
|
return (ref = page.data) != null ? ref.date : void 0;
|
||||||
|
}).reverse();
|
||||||
|
for (i = 0, len = ref.length; i < len; i++) {
|
||||||
|
page = ref[i];
|
||||||
|
title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
|
||||||
|
if (page.path !== link("/") && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
|
||||||
|
pageLinks.push(
|
||||||
|
<li
|
||||||
|
key={page.path}
|
||||||
|
style={{
|
||||||
|
marginBottom: rhythm(1/4)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link to={page.path}>{title}</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<DocumentTitle title={this.props.config.blogTitle}>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
marginBottom: rhythm(2.5)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="./kyle-round-small-pantheon.jpg"
|
||||||
|
style={{
|
||||||
|
float: 'left',
|
||||||
|
marginRight: rhythm(1/4),
|
||||||
|
marginBottom: 0,
|
||||||
|
width: rhythm(2),
|
||||||
|
height: rhythm(2)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
Written by <strong>{this.props.config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
{pageLinks}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</DocumentTitle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
displayName: "HTMLWrapper"
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
#html = require "../" + @props.page.requirePath
|
|
||||||
console.log @props
|
|
||||||
html = "<div>fix me</div>"
|
|
||||||
<div dangerouslySetInnerHTML={{__html: html}}/>
|
|
||||||
|
|
||||||
11
wrappers/html.jsx
Normal file
11
wrappers/html.jsx
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var html;
|
||||||
|
html = "<div>fix me</div>";
|
||||||
|
return (
|
||||||
|
<div dangerouslySetInnerHTML={{__html: html}}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
React = require 'react'
|
|
||||||
require '../css/zenburn.css'
|
|
||||||
moment = require 'moment'
|
|
||||||
DocumentTitle = require 'react-document-title'
|
|
||||||
{link} = require 'gatsby-helpers'
|
|
||||||
|
|
||||||
ReadNext = require '../components/ReadNext'
|
|
||||||
|
|
||||||
module.exports = React.createClass
|
|
||||||
displayName: "MarkdownWrapper"
|
|
||||||
|
|
||||||
render: ->
|
|
||||||
{rhythm} = @props.typography
|
|
||||||
post = @props.page.data
|
|
||||||
|
|
||||||
<DocumentTitle title="#{post.title} | #{@props.config.blogTitle}">
|
|
||||||
<div className="markdown">
|
|
||||||
<h1>{post.title}</h1>
|
|
||||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
|
||||||
<em
|
|
||||||
style={{
|
|
||||||
display: 'block'
|
|
||||||
marginBottom: rhythm(2)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Posted {moment(post.date).format('MMMM D, YYYY')}
|
|
||||||
</em>
|
|
||||||
<hr
|
|
||||||
style={{
|
|
||||||
marginBottom: rhythm(2)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ReadNext post={post} {...@props}/>
|
|
||||||
<p>
|
|
||||||
<img
|
|
||||||
src={link("/kyle-round-small-pantheon.jpg")}
|
|
||||||
style={{
|
|
||||||
float: 'left'
|
|
||||||
marginRight: rhythm(1/4)
|
|
||||||
marginBottom: 0
|
|
||||||
width: rhythm(2)
|
|
||||||
height: rhythm(2)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<strong>{@props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</DocumentTitle>
|
|
||||||
51
wrappers/md.jsx
Normal file
51
wrappers/md.jsx
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import DocumentTitle from 'react-document-title';
|
||||||
|
import { link } from 'gatsby-helpers';
|
||||||
|
import ReadNext from '../components/ReadNext';
|
||||||
|
|
||||||
|
import '../css/zenburn.css';
|
||||||
|
|
||||||
|
module.exports = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var post, rhythm;
|
||||||
|
rhythm = this.props.typography.rhythm;
|
||||||
|
post = this.props.page.data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DocumentTitle title={`${post.title} | ${this.props.config.blogTitle}`}>
|
||||||
|
<div className="markdown">
|
||||||
|
<h1>{post.title}</h1>
|
||||||
|
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||||
|
<em
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
marginBottom: rhythm(2)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Posted {moment(post.date).format('MMMM D, YYYY')}
|
||||||
|
</em>
|
||||||
|
<hr
|
||||||
|
style={{
|
||||||
|
marginBottom: rhythm(2)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ReadNext post={post} {...this.props}/>
|
||||||
|
<p>
|
||||||
|
<img
|
||||||
|
src={link("/kyle-round-small-pantheon.jpg")}
|
||||||
|
style={{
|
||||||
|
float: 'left',
|
||||||
|
marginRight: rhythm(1/4),
|
||||||
|
marginBottom: 0,
|
||||||
|
width: rhythm(2),
|
||||||
|
height: rhythm(2)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<strong>{this.props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DocumentTitle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue