text: import React from 'react';
  import { graphql } from 'gatsby';
  
  import Bio from '../components/bio';
  import Layout from '../components/layout';
  import SEO from '../components/seo';
  import Post from '../components/post';
  
  class BlogIndex extends React.Component {
    render() {
      const { data } = this.props;
      const siteTitle = data.site.siteMetadata.title;
      const posts = data.allMarkdownRemark.edges;
  
      return (
        <Layout location={this.props.location} title={siteTitle}>
          <SEO title="Blog" />
          <Bio />
          {posts.map(({ node }) => (
            <Post node={node} key={node.fields.slug} />
          ))}
        </Layout>
      );
    }
  }
  
  export default BlogIndex;
  
  export const pageQuery = graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              title
              description
              tags
            }
          }
        }
      }
    }
  `;
  