import { Fragment } from 'react';
import axios from 'axios'
import ReactMarkdown  from 'react-markdown/with-html';
import HeadTag from '../components/HeadTag';

const About = (props) => {

    console.log(props);

    return (
        <Fragment>
            <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>
        </Fragment>
    );
}

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;