text: import React from 'react';
  import { graphql, Link } from 'gatsby';
  import styled from 'styled-components';
  
  import Layout from '../components/layout';
  import SEO from '../components/seo';
  
  const BlogLink = styled(Link)`
    text-decoration: none;
  `;
  
  const BlogTitle = styled.h3`
    margin-bottom: 20px;
    color: blue;
  `;
  
  export default ({ data }) => {
    console.log(data);
    return (
      <Layout>
        <SEO title="Home" />
        <div>
          <h1>Andrew's' Blog</h1>
        </div>
        <h1>Hi people</h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => {
          console.log('Node:', node);
          return (
            <div key={node.id}>
              <BlogLink to={node.fields.slug}>
                <BlogTitle>
                  {node.frontmatter.title} - {node.frontmatter.date}
                </BlogTitle>
              </BlogLink>
              <p>{node.excerpt}</p>
            </div>
          );
        })}
      </Layout>
    );
  };
  
  export const query = graphql`
    query {
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        totalCount
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              date
              description
              title
            }
            html
            excerpt
          }
        }
      }
    }
  `;
  