text: import React from 'react'
  import { Link, graphql } from 'gatsby'
  
  import Layout from '../components/Layout'
  import SEO from '../components/seo'
  
  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="All posts"
            keywords={[`blog`, `gatsby`, `javascript`, `react`]}
          />
          {posts &&
            <nav className="list">
              {posts.map(({ node }) => {
                const title = node.frontmatter.title || node.fields.slug
                return (
                  <Link className="no-underline inline-block" style={{ boxShadow: `none` }} to={node.fields.slug} key={node.fields.slug}>
                    <h3 className="list__title">
                      {title}
                    </h3>
                    <p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
                  </Link>
                )
              })}
            </nav>
          }
  
        </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 {
              title
            }
          }
        }
      }
    }
  `
  