import React from "react";
import Navbar from '../components/navbar';
import { graphql } from "gatsby";
import { MDXRenderer } from 'gatsby-plugin-mdx';

export default ({
  data
}) => {
  let {
    frontmatter,
    body
  } = data.mdx;

  return <>
    <Navbar />
    <main>
      <h1>{frontmatter.title}</h1>
      <MDXRenderer>{body}</MDXRenderer>
    </main>
  </>;
};

export const query = graphql`
query NotesIndexQuery($id: String!) {
  mdx(id: {eq: $id}) {
    frontmatter {
      title
    }
    tableOfContents
    body
  }
}`;