text: import React, { Component } from 'react'
  import Footer from '../components/footer'
  import Helmet from 'react-helmet'
  import { graphql } from 'gatsby'
  import { MDXRenderer } from 'gatsby-plugin-mdx'
  import styled, { injectGlobal } from 'react-emotion'
  import { Layout, Link } from '$components'
  import NextPrevious from '../components/NextPrevious'
  import '../components/styles.css'
  import config from '../../config'
  import getSortedNavItems from '../sortNavItems'
  
  injectGlobal`
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  
    html, body {
      font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Roboto",
        "Roboto Light",
        "Oxygen",
        "Ubuntu",
        "Cantarell",
        "Fira Sans",
        "Droid Sans",
        "Helvetica Neue",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
  
      font-size: 16px;
    }
  
    a {
      transition: color 0.15s;
      color: #663399;
    }
  `
  
  const Edit = styled('div')`
    padding: 1rem 1.5rem;
    text-align: right;
  
    a {
      font-size: 14px;
      font-weight: 500;
      line-height: 1em;
      text-decoration: none;
      color: #555;
      border: 1px solid rgb(211, 220, 228);
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s ease-out 0s;
      text-decoration: none;
      color: rgb(36, 42, 49);
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
      height: 30px;
      padding: 5px 16px;
      &:hover {
        background-color: rgb(245, 247, 249);
      }
    }
  `
  
  export default class MDXRuntimeTest extends Component {
    render() {
      const { data } = this.props
      const {
        allMdx,
        mdx,
        site: {
          siteMetadata: { docsLocation, title },
        },
      } = data
      const gitHub = require('../components/images/github.svg')
  
      const nav = getSortedNavItems(allMdx).filter(x => !x.hasChildren)
  
      // meta tags
      const metaTitle = mdx.fields.title
      const metaDescription = mdx.frontmatter.metaDescription
      let canonicalUrl = config.gatsby.siteUrl
      canonicalUrl = config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl
      canonicalUrl = canonicalUrl + mdx.fields.slug
  
      return (
        <Layout {...this.props}>
          <Helmet>
            {metaTitle ? (
              <title>
                {metaTitle} | {title}
              </title>
            ) : null}
            {metaTitle ? <meta name="title" content={metaTitle} /> : null}
            {metaDescription ? <meta name="description" content={metaDescription} /> : null}
            {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
            {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
            {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
            {metaDescription ? <meta property="twitter:description" content={metaDescription} /> : null}
            <link rel="canonical" href={canonicalUrl} />
          </Helmet>
          <div className={'titleWrapper'}>
            <h1 className={'title'}>{mdx.fields.title}</h1>
            <Edit className={'mobileView'}>
              <Link className={'gitBtn'} to={`${docsLocation}/${mdx.parent.relativePath}`}>
                <img src={gitHub} alt={'Github logo'} /> Edit on GitHub
              </Link>
            </Edit>
          </div>
          <div className={'mainWrapper'}>
            <MDXRenderer>{mdx.body}</MDXRenderer>
          </div>
          <div className={'addPaddTopBottom'}>
            <NextPrevious mdx={mdx} nav={nav} />
          </div>
          <Footer />
        </Layout>
      )
    }
  }
  
  export const pageQuery = graphql`
    query($id: String!) {
      site {
        siteMetadata {
          title
          docsLocation
        }
      }
      mdx(fields: { id: { eq: $id } }) {
        fields {
          id
          title
          slug
        }
        body
        tableOfContents
        parent {
          ... on File {
            relativePath
          }
        }
        frontmatter {
          metaTitle
        }
      }
      allMdx {
        edges {
          node {
            fields {
              slug
              title
              filename {
                name
              }
            }
          }
        }
      }
    }
  `
  