text: import React from 'react'
  import Helmet from 'react-helmet'
  import { Link,graphql } from 'gatsby'
  import get from 'lodash/get'
  
  import Layout from '../components/layout'
  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')
      const siteDescription = post.excerpt
      const { previous, next } = this.props.pageContext
  
      return (
        <Layout location={this.props.location}>
          <Helmet
            htmlAttributes={{ lang: 'en' }}
            meta={[{ name: 'description', content: siteDescription }]}
            title={`${post.frontmatter.title} | ${siteTitle}`}
          />
          <h1
            style={{
              ...scale(1.3),
              lineHeight: '1.1',
              fontWeight: 800,
              marginBottom: '1.6rem',
            }}
          >{post.frontmatter.title}</h1>
          <p
            style={{
              ...scale(-1 / 5),
              display: 'block',
              color: '#768d99',
              marginBottom: rhythm(1),
              marginTop: rhythm(-1),
              color: '#768d99',
            }}
          >
            {post.frontmatter.date}
          </p>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
          <hr
            style={{
              marginBottom: rhythm(1),
            }}
          />
          
        {
          (post.frontmatter.authors).map((author, index) => (
            <div key={index}
              style={{
                display: 'flex',
              }}
            >
              <img
                      src={author.pic}
                      alt={`Author profile image`}
                      style={{
                        marginRight: rhythm(1 / 2),
                        marginBottom: 0,
                        width: rhythm(2),
                        height: rhythm(2),
                      }}
                    />
              <p
                style={{
                  marginRight: rhythm(1 / 2),
                }}
              ><strong>{author.id}</strong> is a {author.bio}.
              </p>
            </div>
          ))
        }
          <ul class='other-posts'
            style={{
              marginTop: '2rem',
              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>
        </Layout>
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        excerpt
        html
        frontmatter {
          title
          authors {
            id
            bio
            pic
          }
          date(formatString: "MMMM D, YYYY")
        }
      }
    }
  `
  