text: import React from 'react'
  import { graphql } from 'gatsby'
  import Layout from '../components/Layout'
  import Hero from '../components/Hero'
  import Container from '../components/Container'
  import PageBody from '../components/PageBody'
  import TagList from '../components/TagList'
  import PostLinks from '../components/PostLinks'
  import PostDetails from '../components/PostDetails'
  import SEO from '../components/SEO'
  
  const PostTemplate = ({ data, pageContext }) => {
    const { title, metaDescription, heroImage, body, publishDate, tags } =
      data.contentfulPost
  
    const previous = pageContext.prev
    const next = pageContext.next
    const { basePath } = pageContext
  
    let ogImage
    try {
      ogImage = heroImage.gatsbyImageData.images.fallback.src
    } catch (error) {
      ogImage = null
    }
  
    return (
      <Layout>
        <SEO
          title={title}
          description={
            metaDescription
              ? metaDescription.internal.content
              : body.childMarkdownRemark.excerpt
          }
          image={ogImage}
        />
        <Hero title={title} image={heroImage} height={'50vh'} />
        <Container>
          {tags && <TagList tags={tags} basePath={basePath} />}
          <PostDetails
            date={publishDate}
            timeToRead={body.childMarkdownRemark.timeToRead}
          />
          <PageBody body={body} />
        </Container>
        <PostLinks previous={previous} next={next} basePath={basePath} />
      </Layout>
    )
  }
  
  export const query = graphql`
    query ($slug: String!) {
      contentfulPost(slug: { eq: $slug }) {
        title
        slug
        metaDescription {
          internal {
            content
          }
        }
        publishDate(formatString: "MMMM DD, YYYY")
        publishDateISO: publishDate(formatString: "YYYY-MM-DD")
        tags {
          title
          id
          slug
        }
        heroImage {
          title
          gatsbyImageData(width: 1800, placeholder: BLURRED)
        }
        body {
          childMarkdownRemark {
            timeToRead
            html
            excerpt(pruneLength: 320)
          }
        }
      }
    }
  `
  
  export default PostTemplate
  