import React from 'react'
import {graphql} from 'gatsby'
import styled from 'styled-components'
import FoundTypo from 'src/components/FoundTypo'
import Scripts from 'src/components/scripts'
const version = require('../../../package.json').version

const Content = styled.div`
  max-width: 760px;
  margin: auto;
  padding: 0 30px 120px;
`

const Page = ({data}) => {
  const pageData = data.markdownRemark
  const html = pageData.html.replace(/@VERSION@/g, version)
    .replace(/(npm-)+([a-zA-Z\\.-]*)(\((1|5|7)\))<\/h1>/, 'npm $2</h1>')
    .replace(/([a-zA-Z\\.-]*)(\((1|5|7)\))<\/h1>/, '$1</h1>')

  return (
    <Content className='documentation'>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <FoundTypo />
      <Scripts />
    </Content>
  )
}

export default Page

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      fields {
        slug
      }
    }
  }
`