text: import React from "react"
  import { Link, graphql } from "gatsby"
  
  import Layout from "../components/layout"
  import Image from "../components/image"
  import SEO from "../components/seo"
  
  const IndexPage = ({ data }) => (
    <Layout>
      <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">Go to page 2</Link>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <Link to={node.fields.slug}>
            <h3>{node.frontmatter.title}</h3>
          </Link>
          <small>{node.frontmatter.date}</small>
          <p>{node.excerpt}</p>
        </div>
      ))}
    </Layout>
  )
  
  export const query = graphql`
    query {
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        edges {
          node {
            frontmatter {
              title
              date(formatString: "YYYY-MM-DD HH:mm")
            }
            fields {
              slug
            }
            excerpt
          }
        }
      }
    }
  `
  
  export default IndexPage
  