text: import React from 'react';
  import { graphql } from 'gatsby';
  import { MDXRenderer } from 'gatsby-plugin-mdx';
  import { css } from '@emotion/core';
  import Layout from '../components/Layout';
  import ReadLink from '../components/ReadLink';
  
  export const query = graphql`
    query($slug: String!) {
      mdx(frontmatter: { slug: { eq: $slug } }) {
        frontmatter {
          title
          author
        }
        body
      }
    }
  `;
  
  export default function PostTemplate({ data: { mdx: post } }) {
    return (
      <Layout>
        <h1>{post.frontmatter.title}</h1>
        <p
          css={css`
            font-size: 0.75rem;
          `}
        >
          Posted by {post.frontmatter.author}
        </p>
        <MDXRenderer>{post.body}</MDXRenderer>
        <ReadLink to="/">&larr; back to all posts</ReadLink>
      </Layout>
    );
  }
  