59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import Helmet from 'react-helmet'
|
|
import Link from 'gatsby-link'
|
|
import get from 'lodash/get'
|
|
|
|
import Bio from '../components/Bio'
|
|
import { rhythm, scale } from '../utils/typography'
|
|
|
|
class BlogPostTemplate extends React.Component {
|
|
render() {
|
|
const post = this.props.data.markdownRemark
|
|
const siteTitle = get(this.props, 'data.site.siteMetadata.title')
|
|
|
|
return (
|
|
<div>
|
|
<Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
|
|
<h1>{post.frontmatter.title}</h1>
|
|
<p
|
|
style={{
|
|
...scale(-1 / 5),
|
|
display: 'block',
|
|
marginBottom: rhythm(1),
|
|
marginTop: rhythm(-1),
|
|
}}
|
|
>
|
|
{post.frontmatter.date}
|
|
</p>
|
|
<div dangerouslySetInnerHTML={{ __html: post.html }} />
|
|
<hr
|
|
style={{
|
|
marginBottom: rhythm(1),
|
|
}}
|
|
/>
|
|
<Bio />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default BlogPostTemplate
|
|
|
|
export const pageQuery = graphql`
|
|
query BlogPostByPath($path: String!) {
|
|
site {
|
|
siteMetadata {
|
|
title
|
|
author
|
|
}
|
|
}
|
|
markdownRemark(frontmatter: { path: { eq: $path } }) {
|
|
id
|
|
html
|
|
frontmatter {
|
|
title
|
|
date(formatString: "MMMM DD, YYYY")
|
|
}
|
|
}
|
|
}
|
|
`
|