text: import React from "react"
  import { graphql, StaticQuery } from "gatsby"
  
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  import PostList from "../components/postList"
  // import "../utils/global.scss"
  import "../utils/normalize.css"
  import "../utils/css/screen.css"
  //TODO: switch to staticQuery, get rid of comments, remove unnecessary components, export as draft template
  const BlogIndex = ({ data }, location) => {
    const siteTitle = data.site.siteMetadata.title
    const posts = data.allMarkdownRemark.edges
    let postCounter = 0
  
    return (
      <Layout title={siteTitle}>
        <SEO
          title="All posts"
          keywords={[`blog`, `gatsby`, `javascript`, `react`]}
        />
        {/* <Bio /> */}
        {/* {data.site.siteMetadata.description && (
          <header className="page-head">
            <h2 className="page-head-title">
              {data.site.siteMetadata.description}
            </h2>
          </header>
        )} */}
        <div></></div>
        <div class="post-content-list">
          {posts.map(({ node }) => {
            postCounter++
            return (
              <PostList
                key={node.fields.slug}
                count={postCounter}
                node={node}
                postClass={`post`}
              />
            )
          })}
        </div>
        <div class="content-list-end">End of the list</div>
      </Layout>
    )
  }
  
  const indexQuery = graphql`
    query {
      site {
        siteMetadata {
          title
          description
        }
      }
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              title
              description
              thumbnail {
                childImageSharp {
                  fluid(maxWidth: 1360) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `
  
  export default props => (
    <StaticQuery
      query={indexQuery}
      render={data => (
        <BlogIndex location={props.location} props data={data} {...props} />
      )}
    />
  )