text: import React from 'react';
  import { Link, useStaticQuery, graphql } from 'gatsby';
  import styled from 'styled-components';
  
  const LISTING_QUERY = graphql`
    query BlogPostListing {
      allMarkdownRemark(
        limit: 10
        sort: { fields: frontmatter___date, order: DESC }
      ) {
        edges {
          node {
            excerpt
            frontmatter {
              title
              slug
              date(formatString: "MMMM DD, YYYY")
            }
          }
        }
      }
    }
  `;
  
  const Post = styled.article`
    box-shadow: 0px 3px 10px rgba(25, 17, 34, 0.05);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    a {
      color: #000;
      text-decoration: none;
    }
    h3 {
      margin-bottom: 0;
      margin-bottom: 0.5rem;
    }
    p {
      font-size: 0.8rem;
      margin-bottom: 0.5rem;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    .read-more {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
      font-size: 0.8rem;
      text-decoration: underline;
      color: #524763;
    }
  `;
  
  const Listing = () => {
    const { allMarkdownRemark } = useStaticQuery(LISTING_QUERY);
  
    const posts = allMarkdownRemark.edges.map(({ node }) => {
      return (
        <Post key={node.id}>
          <h3>
            <Link to={`/posts${node.frontmatter.slug}`}>
              {node.frontmatter.title}
            </Link>
          </h3>
          <small>{node.frontmatter.date}</small>
          <p>{node.excerpt}</p>
          <p>
            <Link className="read-more" to={`/posts${node.frontmatter.slug}`}>
              Read More
            </Link>
          </p>
        </Post>
      );
    });
  
    return <div>{posts}</div>;
  };
  
  export default Listing;
  