text: import React from "react";
  import { graphql } from "gatsby";
  import get from "lodash/get";
  import { Helmet } from "react-helmet";
  // import Img from "gatsby-image";
  
  import heroStyles from "../components/hero.module.css";
  import Layout from "../components/layout";
  
  const Travel = props => {
    const siteTitle = get(props, "data.site.siteMetadata.title");
    const post = get(props, "data.contentfulBlogPost");
  
    return (
      <Layout location={props.location}>
        <div style={{ background: "#fff" }}>
          <Helmet title={siteTitle} />
          <div className={heroStyles.hero}>
            {/** 
            <Img
              fluid={post.heroImage.fluid}
              className={heroStyles.heroImage}
              alt={post.title}
            /> 
             */}
          </div>
          <div className="wrapper">
            <h1 className="section-headline">{post.title}</h1>
            <p
              style={{
                display: "block"
              }}
            >
              {post.publishDate}
            </p>
            <div
              dangerouslySetInnerHTML={{
                __html: post.body.childMarkdownRemark.html
              }}
            />
          </div>
        </div>
      </Layout>
    );
  };
  
  export default Travel;
  
  export const pageQuery = graphql`
    query BlogIndexQuery {
      contentfulBlogPost(slug: { eq: "travel" }) {
        slug
        tags
        title
        updatedAt(formatString: "")
        id
        heroImage {
          fluid(resizingBehavior: SCALE) {
            ...GatsbyContentfulFluid_tracedSVG
          }
        }
        description {
          description
          id
        }
        body {
          childMarkdownRemark {
            html
          }
        }
      }
    }
  `;
  