text: import React from 'react';
  import { Link } from 'gatsby';
  import Header from '../components/Header';
  
  const Layout = ({ data }) => {
    const { edges } = data.allMarkdownRemark;
    return (
      <div>
        <Header />
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            fontFamily: 'avenir'
          }}
        >
          {edges.map(edge => {
            const { frontmatter } = edge.node;
            return (
              <div key={frontmatter.path} style={{ marginBottom: '1rem' }}>
                <Link to={frontmatter.path}>{frontmatter.title}</Link>
              </div>
            );
          })}
          <div>
            <Link to="/tags">Browse by Tag</Link>
          </div>
        </div>
      </div>
    );
  };
  
  export const query = graphql`
    query HomePageQuery {
      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
        edges {
          node {
            frontmatter {
              title
              path
              date
            }
          }
        }
      }
    }
  `;
  
  export default Layout;
  