text: import React from 'react'
  import get from 'lodash/get'
  import Helmet from 'react-helmet'
  import Hero from '../components/hero'
  import ArticlePreview from '../components/article-preview'
  
  import 'bootstrap/dist/css/bootstrap.css'
  
  class RootIndex extends React.Component {
    render() {
      const siteTitle = get(this, 'props.data.site.siteMetadata.title')
      const posts = get(this, 'props.data.allContentfulBlogPost.edges')
      const [author] = get(this, 'props.data.allContentfulPerson.edges')
  
      return (
        <div style={{ background: '#fff' }}>
          <Helmet title={siteTitle} />
          <Hero data={author.node} />
        </div>
      )
    }
  }
  
  export default RootIndex
  
  export const pageQuery = graphql`
    query HomeQuery {
      allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
        edges {
          node {
            title
            slug
            publishDate(formatString: "MMMM Do, YYYY")
            tags
            heroImage {
              sizes(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
                ...GatsbyContentfulSizes_tracedSVG
              }
            }
            description {
              childMarkdownRemark {
                html
              }
            }
          }
        }
      }
      allContentfulPerson(filter: { id: { eq: "c15jwOBqpxqSAOy2eOO4S0m" } }) {
        edges {
          node {
            name
            shortBio {
              shortBio
            }
            title
            heroImage: image {
              sizes(
                maxWidth: 1180
                maxHeight: 480
                resizingBehavior: FILL
                background: "rgb:000000"
              ) {
                ...GatsbyContentfulSizes_tracedSVG
              }
            }
          }
        }
      }
    }
  `
  