text: import React from 'react'
  import { Link, graphql } from 'gatsby'
  
  import Bio from '../components/Bio'
  import Layout from '../components/Layout'
  import SEO from '../components/seo'
  import { rhythm, scale } from '../utils/typography'
  import TagsList from '../components/TagsList';
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.markdownRemark
      const coverImage = post.frontmatter.coverImage
      const imageSrc = coverImage ? coverImage.childImageSharp.fluid.src : null
      const siteTitle = this.props.data.site.siteMetadata.title
      const { previous, next } = this.props.pageContext
  
      const content = <article className="main-post">
        <SEO
          title={post.frontmatter.title}
          description={post.frontmatter.description}
          image={imageSrc}
        />
        <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>
      </article>
  
      const tagsList = <TagsList tags={this.props.pageContext.tags} />;
  
      return (
        <Layout title={siteTitle} left={content} right={tagsList} />
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          author
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          coverImage {
            childImageSharp {
              fluid(maxWidth: 1200) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          description
        }
      }
    }
  `
  