import React from "react";
import Navbar from "../components/navbar";
import { graphql } from "gatsby";
import style from "./notes.module.css";

export default ({ data }) => {
  console.log(data);
  const posts = data.allMdx.edges;
  return <>
    <Navbar />
    {
      posts.map(({ node }) => {
        return <article>
          <div className={style.noteTitle}>
            <h3><a href={`${node.frontmatter.path}`}>{node.frontmatter.title}</a></h3>
            <time dateTime={node.frontmatter.date}>{node.frontmatter.date}</time>
          </div>
          <p>{node.excerpt}</p>
        </article>;
      })
    }
  </>;
};

export const query = graphql`
query IndexQuery {
  allMdx(sort: {order: ASC, fields: [fileAbsolutePath]}, filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}) {
    edges {
      node {
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date(formatString: "YYYY-MM-DD")
          path
        }
        id
      }
    }
  }
}
`;