text: import React from 'react'
  import { graphql } from 'gatsby'
  import Helmet from 'react-helmet'
  import get from 'lodash/get'
  import Img from 'gatsby-image'
  import Layout from '../components/layout'
  
  import heroStyles from '../components/hero.module.css'
  
  class StoryTemplate extends React.Component {
    render() {
      const story = get(this.props, 'data.contentfulStory')
      const siteTitle = get(this.props, 'data.site.siteMetadata.title')
  
      return (
        <Layout location={this.props.location} >
          <div style={{ background: '#fff' }}>
            <Helmet title={`${story.title} | ${siteTitle}`} />
            <div className={heroStyles.hero}>
              <Img className={heroStyles.heroImage} alt={story.title} fluid={story.heroImage.fluid} />
            </div>
            <div className="wrapper">
              <h1 className="section-headline">{story.title}</h1>
              <p
                style={{
                  display: 'block',
                }}
              >
                {story.publishDate}
              </p>
              <div
                dangerouslySetInnerHTML={{
                  __html: story.body.childMarkdownRemark.html,
                }}
              />
            </div>
          </div>
        </Layout>
      )
    }
  }
  
  export default StoryTemplate
  
  export const pageQuery = graphql`
    query StoryBySlug($slug: String!) {
      site {
        siteMetadata {
          title
        }
      }
      contentfulStory(slug: { eq: $slug }) {
        title
        publishDate(formatString: "MMMM Do, YYYY")
        heroImage {
          fluid(maxWidth: 1180, background: "rgb:000000") {
            ...GatsbyContentfulFluid
          }
        }
        body {
          childMarkdownRemark {
            html
          }
        }
      }
    }
  `
  