{"size": 1526, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "pastelsky/marginauto", "max_stars_repo_stars_event_min_datetime": "2019-07-01T01:46:58.000Z", "max_stars_repo_stars_event_max_datetime": "2019-07-01T01:46:58.000Z", "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "pastelsky/marginauto", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "pastelsky/marginauto", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.9215686275, "max_line_length": 80, "alphanum_fraction": 0.4508519004}
import React from 'react';
import Link from 'gatsby-link';
import { parse, format } from 'date-fns'
import styles from './index.module.scss'

export default function Index({ data }) {
  const { edges: posts } = data.allMarkdownRemark;
  return (
    <ul className={ styles.postsContainer }>
      { posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (
            <li className={ styles.post } key={ post.id }>
              <h2 className={ styles.postTitle }>
                <Link to={ post.frontmatter.path }>
                  { post.frontmatter.title }
                </Link>
              </h2>
              <h4 className={ styles.postDate }>
                { format(parse(post.frontmatter.date), 'Do MMM YYYY') }
              </h4>
              <p>{ post.excerpt }</p>
              <Link to={ post.frontmatter.path }
                    className={ styles.readMoreLink }>
                Continue reading &hellip;
              </Link>
            </li>
          );
        }) }
    </ul>
  );
}

export const pageQuery = graphql`
    query IndexQuery {
        allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
            edges {
                node {
                    id
                    excerpt(pruneLength: 350)
                    frontmatter {
                        title
                        date
                        path
                    }
                }
            }
        }
    }
`;