gatsby-starter-blog-forestry/page-templates/blog-post.js
2016-09-21 10:22:04 -07:00

71 lines
1.6 KiB
JavaScript

import React from 'react'
import DocumentTitle from 'react-document-title'
import { Link } from 'react-router'
import get from 'lodash/get'
import { rhythm, adjustFontSizeToMSValue } from 'utils/typography'
import ReadNext from '../components/ReadNext'
//import { query } from '../components/ReadNext'
import Bio from 'components/Bio'
const query = `
readNext {
path
excerpt(pruneLength: 200)
frontmatter {
title
}
}
`
class BlogPostRoute extends React.Component {
render () {
const post = this.props.data.markdown
const siteTitle = get(this.props, 'data.site.siteMetadata.title')
return (
<DocumentTitle title={`${post.frontmatter.title} | ${siteTitle}`}>
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.bodyHTML }} />
<p
style={{
...adjustFontSizeToMSValue(-1/5),
display: 'block',
marginBottom: rhythm(1),
}}
>
Posted TODO DATE
</p>
<hr
style={{
marginBottom: rhythm(1),
}}
/>
<ReadNext nextPost={post.frontmatter.readNext} />
<Bio />
</div>
</DocumentTitle>
)
}
}
export default BlogPostRoute
export const pageQuery = `
query BlogPostByPath($path: String!) {
site {
siteMetadata {
title
author
}
}
markdown(path: $path) {
id
bodyHTML
frontmatter {
${query}
title
#date(formatString: "MMMM DD, YYYY")
}
}
}
`