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 { rhythm, scale } from "../utils/typography"
  import styled from "@emotion/styled"
  
  
  const InfoBlogPost = styled.p`
    ${scale(-1 / 5)};
    display: block;
    margin-bottom: ${rhythm(1)};
    margin-top: ${rhythm(-1)};
  `
  
  const Pagination = styled.ul`
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: ${rhythm(3)};
  `
  
  const Separator = styled.hr`
    margin-bottom: ${rhythm(1)};
  `
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.markdownRemark
      const siteTitle = this.props.data.site.siteMetadata.title
      const { previous, next } = this.props.pageContext
  
      return (
        <Layout location={this.props.location} title={siteTitle}>
          <SEO
            title={post.frontmatter.title}
            description={post.frontmatter.description || post.excerpt}
          />
          <h1>{post.frontmatter.title}</h1>
          <InfoBlogPost>
            {post.frontmatter.date}
          </InfoBlogPost>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
          <Separator />
          <Bio />
          <Pagination>
            <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>
          </Pagination>
        </Layout>
      )
    }
  }
  
  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
          date(formatString: "DD. MM. YYYY")
          description
        }
      }
    }
  `
  