text: import React from 'react'
  import { graphql } from 'gatsby'
  import Container from '../components/container'
  import GraphQLErrorList from '../components/graphql-error-list'
  import BlogPost from '../components/blog-post'
  import SEO from '../components/seo'
  import Layout from '../containers/layout'
  
  export const query = graphql`
    query BlogPostTemplateQuery($id: String!) {
      post: sanityPost(id: { eq: $id }) {
        _id
        publishedAt
        categories {
          _id
          title
        }
        mainImage {
          crop {
            _key
            _type
            top
            bottom
            left
            right
          }
          hotspot {
            _key
            _type
            x
            y
            height
            width
          }
          asset {
            _id
          }
          alt
        }
        title
        slug {
          current
        }
        _rawBody
        authors {
          _key
          person {
            image {
              crop {
                _key
                _type
                top
                bottom
                left
                right
              }
              hotspot {
                _key
                _type
                x
                y
                height
                width
              }
              asset {
                _id
              }
            }
            name
          }
          roles
        }
      }
    }
  `
  
  const BlogPostTemplate = props => {
    const { data, errors } = props
    const post = data && data.post
    return (
      <Layout>
        {errors && <SEO title="GraphQL Error" />}
        {post && <SEO title={post.title || 'Untitled'} />}
  
        {errors && (
          <Container>
            <GraphQLErrorList errors={errors} />
          </Container>
        )}
        <Container page="post">{post && <BlogPost {...post} />}</Container>
      </Layout>
    )
  }
  
  export default BlogPostTemplate
  