text: // This is the homepage.
  
  import React from "react"
  import { graphql } from "gatsby"
  import styled from "styled-components"
  
  import ItemThumbnail from '../components/ItemThumbnail/ItemThumbnail';
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  
  const ThumbnailsWrapper = styled.div`
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      grid-gap: 1rem;
      grid-auto-rows: auto auto 500px;
      padding: 20px;
      margin: 1rem auto;
  `
  
  class BlogIndex extends React.Component {
    render() {
      const { data } = this.props
      const siteTitle = data.site.siteMetadata.title
      const items = data.allMarkdownRemark.edges
  
      return (
        <Layout location={this.props.location} title={siteTitle}>
          <SEO title="All items" />
        <ThumbnailsWrapper>
          {items.map(({ node }) => {
            const { title, image, price, description } = node.frontmatter
            return (
              <ItemThumbnail
                key={node.fields.slug}
                link={node.fields.slug}
                heading={title}
                image={image.childImageSharp.fluid}
                price={price}
                description={description}
              />
            )
          })}
        </ThumbnailsWrapper>
          
  
        </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
              price
              description
              image {
                childImageSharp {
                  fluid(maxWidth: 800) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `
  