import axios from 'axios'
import ReactMarkdown from 'react-markdown/with-html'
import HeadTag from '../components/HeadTag'

const About = (props) => {
  return (
    <>
      <HeadTag
        title='À-propos - FunctionProject'
        description='À-propos de FunctionProject.'
      />

      <div className='container'>
        <div className='row justify-content-center'>
          <div className='col-24 text-center'>
            <h1 style={{ marginBottom: 0, paddingTop: '20px' }}>À-propos</h1>
            <p style={{ marginTop: '5px', borderBottom: '1px solid var(--important)', paddingBottom: '30px' }}>(README.md du <a target='_blank' rel='noopener noreferrer' href='https://github.com/Divlo/FunctionProject'>GitHub</a>)</p>
          </div>
        </div>

        <div style={{ marginBottom: '30px' }} className='row'>
          <div className='col-24'>
            <ReactMarkdown
              source={props.data}
              escapeHtml={false}
              linkTarget='_blank'
              transformLinkUri={(uri) => {
                if (uri.startsWith('./')) {
                  return `https://github.com/Divlo/FunctionProject/blob/master/${uri.slice(2)}`
                }
                return uri
              }}
            />
          </div>
        </div>
      </div>
    </>
  )
}

export async function getServerSideProps (_context) {
  const { data } = await axios.get('https://raw.githubusercontent.com/Divlo/FunctionProject/master/README.md')
  return {
    props: { data }
  }
}

export default About