import React from "react"
import { graphql } from "gatsby"
import PostLink from '../components/postlink/index'
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 snippets"
          keywords={[`blog`, `snippet`, `javascript`, `react`, `furkan`, `üzmez`, `fraknfurt`, `software`, `developer`]}
        />
        <h3>Snippets</h3>
        <hr></hr>
        <section class="cards-wrapper">
        {posts.map(({ node }) => {
          return (
            <PostLink node={node} linkTo="/snippet"/>
          )
        })}
        </section>
      </Layout>
    )
  }
}

export default BlogIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: {fileAbsolutePath: {regex: "/(snippet)/"}}
      ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
            subjects
          }
        }
      }
    }
  }
`
