text: 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'
  
  import {DiscussionEmbed} from 'disqus-react';
  
  class BlogPostTemplate extends React.Component {
      render() {
          const post = this.props.data.markdownRemark
          const siteTitle = get(this.props, 'data.site.siteMetadata.title')
          const {previous, next} = this.props.pathContext;
  
          let siteMeta = get(this.props, 'data.site.siteMetadata');
  
          let disqusProps = {
              shortname: siteMeta.disqus.shortName,
              config: {
                  identifier: post.id, // identify of the post
                  title     : post.frontmatter.title, // title of the post
              },
          };
  
          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/>
                  <ul
                      style={{
                          display       : 'flex',
                          flexWrap      : 'wrap',
                          justifyContent: 'space-between',
                          listStyle     : 'none',
                          padding       : 0,
                      }}
                  >
                      <li>
                          {
                              previous &&
                              <Link to={previous.fields.slug} rel="prev">
                                  ← {previous.frontmatter.title}
                              </Link>
                          }
                      </li>
                      <li>
                          {
                              next &&
                              <Link to={next.fields.slug} rel="next">
                                  {next.frontmatter.title} →
                              </Link>
                          }
                      </li>
                  </ul>
                  <DiscussionEmbed {...disqusProps}/>
              </div>
          )
      }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          author
          disqus {
              shortName
          }
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  `
  