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 SubscribeToNewsletter from "../components/subscribe-to-newsletter"
  import { rhythm, scale } from "../utils/typography"
  import BookBanner from "../components/book-banner"
  import "./styles.css"
  
  class BlogPostTemplate extends React.Component {
    render() {
      const readingTime = this.props.data.markdownRemark.fields.readingTime.text
      const post = this.props.data.markdownRemark
      const siteTitle = this.props.data.site.siteMetadata.title
      const { previous, next, published } = this.props.pageContext
      const slug = this.props.data.markdownRemark.fields.slug
  
      return (
        <React.Fragment>
          {/* <BookBanner /> */}
          <Layout location={this.props.location} title={siteTitle}>
            <SEO
              title={post.frontmatter.title}
              description={post.frontmatter.description || post.excerpt}
              url={slug}
              date={post.frontmatter.date}
              isPost
              image={post.frontmatter.featuredImage}
            />
            <article>
              <header>
                <h1
                  style={{
                    marginTop: rhythm(1),
                    marginBottom: 0,
                  }}
                >
                  {published ? "[DRAFT]" : ""}
                  {post.frontmatter.title}
                </h1>
                <p
                  style={{
                    ...scale(-1 / 5),
                    display: `block`,
                    marginBottom: rhythm(1),
                  }}
                >
                  {readingTime} - {post.frontmatter.date}
                </p>
              </header>
              <section dangerouslySetInnerHTML={{ __html: post.html }} />
  
              <SubscribeToNewsletter />
              <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>
        </React.Fragment>
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          author
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          featuredImage {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          date(formatString: "YYYY-MM-DD")
          description
        }
        fields {
          slug
          readingTime {
            text
          }
        }
      }
    }
  `
  