text: import React from "react"
  import Helmet from "react-helmet"
  import Link from "gatsby-link"
  import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
  import ArrowBackIcon from "react-icons/lib/md/arrow-back"
  import Img from "gatsby-image"
  
  import presets from "../utils/presets"
  import typography, { rhythm, scale, options } from "../utils/typography"
  import Container from "../components/container"
  import { CategoryAndTags } from '../components/footer';
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.markdownRemark
      const prev = this.props.pathContext.prev
      const next = this.props.pathContext.next
      const prevNextLinkStyles = {
        "&&": {
          boxShadow: `none`,
          borderBottom: 0,
          fontFamily: options.headerFontFamily.join(`,`),
          fontWeight: `bold`,
          color: presets.brand,
        },
      }
      const prevNextLabelStyles = {
        marginTop: 0,
        marginBottom: 0,
        color: presets.calm,
        fontWeight: `normal`,
        ...scale(0),
        lineHeight: 1,
      }
      const BioLine = ({ children }) => (
        <p
          css={{
            ...scale(-2 / 5),
            fontFamily: typography.options.headerFontFamily.join(`,`),
            lineHeight: 1.3,
            margin: 0,
            color: presets.calm,
            [presets.Mobile]: {
              ...scale(-1 / 5),
              lineHeight: 1.3,
            },
          }}
        >
          {children}
        </p>
      )
      return (
        <div>
          <Container className="post" css={{ paddingBottom: `0 !important` }}>
            <h1
              css={{
                marginTop: 0,
                [presets.Desktop]: {
                  marginBottom: rhythm(5 / 4),
                },
              }}
            >
              {this.props.data.markdownRemark.frontmatter.title}
            </h1>
            <div
              className="post-body"
              dangerouslySetInnerHTML={{
                __html: this.props.data.markdownRemark.html,
              }}
            />
          </Container>
          <Container>
            <CategoryAndTags article={{ category: this.props.data.markdownRemark.frontmatter.category, 
              tags: this.props.data.markdownRemark.frontmatter.tags }} />
          </Container>
          <Container>
            <div
              css={{ [presets.Phablet]: { display: `flex`, width: `100%` } }}
            >
              <div
                css={{
                  [presets.Phablet]: {
                    width: `50%`,
                  },
                }}
              >
                {prev && (
                  <Link to={prev.fields.slug} css={prevNextLinkStyles}>
                    <h4 css={prevNextLabelStyles}>Previous</h4>
                    <span
                      css={{
                        [presets.Tablet]: {
                          marginLeft: `-1rem`,
                        },
                      }}
                    >
                      <ArrowBackIcon style={{ verticalAlign: `sub` }} />
                      {prev.frontmatter.title}
                    </span>
                  </Link>
                )}
              </div>
              <div
                css={{
                  textAlign: `right`,
                  marginTop: rhythm(1),
                  [presets.Phablet]: { marginTop: 0, width: `50%` },
                }}
              >
                {next && (
                  <Link to={next.fields.slug} css={prevNextLinkStyles}>
                    <h4 css={prevNextLabelStyles}>Next</h4>
                    <span
                      css={{
                        [presets.Tablet]: {
                          marginRight: `-1rem`,
                        },
                      }}
                    >
                      {next.frontmatter.title}
                      <ArrowForwardIcon style={{ verticalAlign: `sub` }} />
                    </span>
                  </Link>
                )}
              </div>
            </div>
          </Container>
        </div>
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query TemplateBlogPost($slug: String!) {
      markdownRemark(fields: { slug: { eq: $slug } }) {
        html
        fields {
          slug
        }
        frontmatter {
          title
          date(formatString: "MMMM Do YYYY")
          tags
        }
      }
    }
  `
  