import React from "react";
import { graphql, Link } from 'gatsby';
import Helmet from 'react-helmet'

import Layout from '../../components/Layout/Layout.js';
import NoteHeader from '../../components/NoteHeader';

export default class Notes extends React.Component {

  render() {
    return (
      <Layout>
        <Helmet title='Notes'>
          <meta name="description" content="A collection of arbitrary notes" />
        </Helmet>
        <h2>Notes</h2>
        <p>A small collection of notes I periodically update. View <Link to='/blog'>my blog</Link> for a post stream.</p>
        {this.props.data.notesQuery.edges.map(({ node }) => {
          if (node.fields.slug.includes('/notes/')) {
            return <NoteHeader key={node.fields.slug} post={node} />;
          } else return null;
        })}

      </Layout>
    );
  }
}

export const query = graphql`
  query {
    notesQuery: allMarkdownRemark(sort: {fields: [fileAbsolutePath], order: ASC}){
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            description
            date
            tags
          }
          excerpt
          fields {
            slug
          }
        }
      }
    }
  }
`;
