text: import React from "react";
  import { graphql } from "gatsby";
  import { css } from "@emotion/core";
  import Layout from "../components/Layout";
  import Link from "../components/Link";
  import Container from "components/Container";
  import Hero from "components/Hero";
  import SEO from "../components/SEO";
  import PostCard from "components/PostCard";
  
  export default ({ data: { site, allMdx } }) => {
    return (
      <Layout site={site} isHome>
        <SEO />
        <Hero />
        <Container
          css={css`
            padding-bottom: 0;
          `}
        >
          {allMdx.edges.map(({ node: post }) => (
            <PostCard post={post} key={post.id} />
          ))}
          <Link
            to="/blog"
            aria-label="Visit blog page"
            className="button-secondary"
          >
            View all articles
          </Link>
          <hr />
        </Container>
      </Layout>
    );
  };
  
  export const pageQuery = graphql`
    query {
      site {
        ...site
        siteMetadata {
          title
        }
      }
      allMdx(
        limit: 5
        sort: { fields: [frontmatter___date], order: DESC }
        filter: {
          frontmatter: { published: { ne: false } }
          fields: { type: { eq: "blog" } }
        }
      ) {
        edges {
          node {
            excerpt(pruneLength: 190)
            id
            fields {
              title
              slug
              date
            }
            parent {
              ... on File {
                sourceInstanceName
              }
            }
            frontmatter {
              title
              date(formatString: "MMMM DD, YYYY")
              description
              banner {
                childImageSharp {
                  sizes(maxWidth: 720) {
                    ...GatsbyImageSharpSizes
                  }
                }
              }
  
              keywords
            }
          }
        }
      }
    }
  `;
  