text: import "./all.css"
  import React from 'react'
  import PropTypes from 'prop-types'
  import { Link, graphql, StaticQuery } from 'gatsby'
  import PreviewCompatibleImage from './PreviewCompatibleImage'
  
  class BlogRoll extends React.Component {
    render() {
      const { data } = this.props
      const { edges: posts } = data.allMarkdownRemark
  
      return (
        <div className="BlogRoll">
          <h1 className="SecondaryTextColor">
            Recent Posts
          </h1>
          {posts &&
            posts.map(({ node: post }) => (
              <div className="BlogPost border-bottom rounded" key={post.id}>
                <article
                  className={`blog-list-item tile is-child box notification ${
                    post.frontmatter.featuredpost ? 'is-featured' : ''
                  }`}
                >
                  <div className="row">
                    <div className="col align-middle">
                      <header>
                        <h2 className="TertiaryTextColor">
                          {post.frontmatter.title}
                        </h2>
                        {post.frontmatter.featuredimage ? (
                          <div className="featured-thumbnail">
                            <PreviewCompatibleImage
                              imageInfo={{
                                image: post.frontmatter.featuredimage,
                                alt: `featured image thumbnail for post ${post.frontmatter.title}`,
                              }}
                            />
                          </div>
                        ) : null}
                        
                      </header>
                    </div>
                    <div className="col align-middle">
                      <p>
                        {post.excerpt}
                        <br />
                        <br />
                        <Link className="button" to={post.fields.slug}>
                          Keep Reading →
                        </Link>
                      </p>
                    </div>
                  </div>
                  
                  
                </article>
              </div>
            ))}
        </div>
      )
    }
  }
  
  BlogRoll.propTypes = {
    data: PropTypes.shape({
      allMarkdownRemark: PropTypes.shape({
        edges: PropTypes.array,
      }),
    }),
  }
  
  export default () => (
    <StaticQuery
      query={graphql`
      query BlogRollQuery {
        allMarkdownRemark(
          sort: { order: DESC, fields: [frontmatter___date] }
          filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
        ) {
          edges {
            node {
              excerpt(pruneLength: 400)
              id
              fields {
                slug
              }
              frontmatter {
                title
                templateKey
                date(formatString: "MMMM DD, YYYY")
                featuredpost
                
              }
            }
          }
        }
      }
      `}
      render={(data, count) => <BlogRoll data={data} count={count} />}
    />
  )
  