text: import React from "react"
  import { Link, graphql } from "gatsby"
  
  import Bio from "../components/bio"
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  import Emoji from "../components/emoji"
  import { rhythm, scale } from "../utils/typography"
  
  const BlogPostTemplate = ({ data, pageContext, location }) => {
  	const post = data.markdownRemark
  	const siteTitle = data.site.siteMetadata.title
  	const { previous, next } = pageContext
  
  	return (
  		<Layout location={location} title={siteTitle}>
  			<SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
  			<article>
  				<header>
  					<h1 style={{
  						marginTop: rhythm(1),
  						marginBottom: 0,
  						}}
  					>
  					{post.frontmatter.title}
  					</h1>
  					<p style={{
  						...scale(-1 / 5),
  						display: `block`,
  						marginBottom: rhythm(1),
  					}}>
  						{post.frontmatter.date}
  					</p>
  				</header>
  				<section dangerouslySetInnerHTML={{ __html: post.html }} />
  				<hr style={{
  					marginBottom: rhythm(1),
  				}} />
  				<footer>
  					<Bio />
  				</footer>
  			</article>
  
  			<nav>
  				<ul style={{
  					display: `flex`,
  					flexWrap: `wrap`,
  					justifyContent: `space-between`,
  					listStyle: `none`,
  					padding: 0
  				}}>
  					<li>
  						{previous && (
  							<Link to={previous.fields.slug} rel="prev">
  								← {previous.frontmatter.title}
  							</Link>
  						)}
  					</li>
  					<li>
  						{next && (
  							<Link to={next.fields.slug} rel="next">
  								{next.frontmatter.title} →
  							</Link>
  						)}
  					</li>
  				</ul>
  			</nav>
  		</Layout>
  	)
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
  	query BlogPostBySlug($slug: String!) {
  		site {
  			siteMetadata {
  				title
  			}
  		}
  		markdownRemark(fields: { slug: { eq: $slug } }) {
  			id
  			excerpt(pruneLength: 160)
  			html
  			frontmatter {
  				title
  				date(formatString: "MMMM DD, YYYY")
  				description
  			}
  		}
  	}
  `
  