text: import React from 'react'
  import { graphql, Link } from 'gatsby'
  import MDXRenderer from 'gatsby-mdx/mdx-renderer'
  
  import Bio from '../components/Bio'
  import SEO from '../components/seo'
  import { rhythm } from '../utils/typography'
  import { styled } from 'linaria/react';
  import DefaultTemplate from '../components/DefaultTemplate'
  
  const RendererContainer = styled.div`
  `
  
  const Timestamp = styled.p`
    font-size: 0.87055rem;
    margin-bottom: ${rhythm(1)};
    margin-top: ${rhythm(-0.5)};
  `
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.mdx
      const siteTitle = this.props.data.site.siteMetadata.title
      const { previous, next } = this.props.pageContext
  
      return (
        <DefaultTemplate>
          <SEO title={post.frontmatter.title} description={post.excerpt} />
          <h1>{post.frontmatter.title}</h1>
          <Timestamp>
            {post.frontmatter.date}
          </Timestamp>
  
          <RendererContainer>
            <MDXRenderer>{post.code.body}</MDXRenderer>
          </RendererContainer>
  
          <hr
            style={{
              marginBottom: rhythm(1),
            }}
          />
          <Bio />
  
          <ul
            style={{
              display: `flex`,
              flexWrap: `wrap`,
              justifyContent: `space-between`,
              listStyle: `none`,
              padding: 0,
            }}
          >
            <li>
              {previous && (
                <Link to={`/blog${previous.fields.slug}`} rel="prev">
                  ← {previous.frontmatter.title}
                </Link>
              )}
            </li>
            <li>
              {next && (
                <Link to={`/blog${next.fields.slug}`} rel="next">
                  {next.frontmatter.title} →
                </Link>
              )}
            </li>
          </ul>
        </DefaultTemplate>
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query($slug: String!) {
      site {
        siteMetadata {
          title
          author
        }
      }
      mdx(fields: { slug: { eq: $slug } }) {
        id
        excerpt(pruneLength: 160)
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
        }
        code {
          body
        }
      }
    }
  `
  