gatsby-starter-blog-forestry/wrappers/md.js
2016-02-21 23:45:50 +01:00

58 lines
1.6 KiB
JavaScript

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 { rhythm } from 'utils/typography'
import { config } from 'config'
import '../css/zenburn.css'
class MarkdownWrapper extends React.Component {
render () {
const { route } = this.props
const post = route.page.data
return (
<DocumentTitle title={`${post.title} | ${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} pages={route.pages} />
<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>{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>
)
}
}
MarkdownWrapper.propTypes = {
route: React.PropTypes.object,
}
export default MarkdownWrapper