text: import React from 'react';
  import { graphql } from 'gatsby';
  import get from 'lodash/get';
  import Helmet from 'react-helmet';
  import styles from './blog.module.css';
  import Layout from '../components/layout';
  import ArticlePreview from '../components/article-preview';
  
  class BlogIndex extends React.Component {
  	render() {
  		const posts = get(this, 'props.data.allContentfulBlogPost.edges');
  
  		return (
  			<Layout location={this.props.location}>
  				<Helmet title="Blog" />
  				<div style={{ background: '#fff' }}>
  					<div className={styles.hero}>Blog</div>
  					<div className="wrapper">
  						<h2 className="section-headline">Recent articles</h2>
  						<ul className="article-list">
  							{posts.map(({ node }) => {
  								return (
  									<li key={node.slug}>
  										<ArticlePreview article={node} />
  									</li>
  								);
  							})}
  						</ul>
  					</div>
  				</div>
  			</Layout>
  		);
  	}
  }
  
  export default BlogIndex;
  
  export const pageQuery = graphql`
  	query BlogIndexQuery {
  		allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
  			edges {
  				node {
  					title
  					slug
  					publishDate(formatString: "MMMM Do, YYYY")
  					tags
  					heroImage {
  						fluid(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
  							...GatsbyContentfulFluid_tracedSVG
  						}
  					}
  					description {
  						childMarkdownRemark {
  							html
  						}
  					}
  				}
  			}
  		}
  	}
  `;
  