174 lines
6.0 KiB
JavaScript
174 lines
6.0 KiB
JavaScript
import React from 'react';
|
|
import {FlexColumn} from '../../utils/containers';
|
|
import {Body, H2, Medium} from '../../utils/fonts';
|
|
import Media from 'react-media';
|
|
import theme from '../../utils/theme';
|
|
import getChallengeFullDescription from '../../api/getChallengeFullDescription';
|
|
import {markdown} from 'markdown';
|
|
import styled from 'styled-components';
|
|
import InfoList from '../generic/InfoList';
|
|
import Loading from '../generic/Loading';
|
|
import PropsTypes from 'prop-types';
|
|
import MiniChallenge from '../challenges_list/MiniChallenge';
|
|
|
|
const ReadmeStyle = styled(Body)`
|
|
h3 {
|
|
font-family: 'Kanit', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 22px;
|
|
|
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
font-size: 22px;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
|
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: ${({theme}) => theme.colors.dark};
|
|
text-decoration: none;
|
|
|
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Readme = (props) => {
|
|
const [fullDescription, setFullDescription] = React.useState('');
|
|
const [loading, setLoading] = React.useState(true);
|
|
|
|
React.useEffect(() => {
|
|
getChallengeFullDescription(setFullDescription, setLoading, props.challengeName);
|
|
}, [props.challengeName]);
|
|
|
|
const parseMarkdownResponse = (response) => {
|
|
let result = markdown.toHTML(response);
|
|
let regex = /<h1>[^<>]*<\/h1>/g;
|
|
result = result.replace(regex, '');
|
|
regex = /<h2>/g;
|
|
result = result.replace(regex, '<h3>');
|
|
regex = /<\/h2>/g;
|
|
result = result.replace(regex, '</h3>');
|
|
return result;
|
|
};
|
|
|
|
const mobileRender = () => {
|
|
return (
|
|
<FlexColumn as='section' padding='20px' gap='24px'>
|
|
<FlexColumn gap='12px' alignmentX='flex-start'>
|
|
<H2 as='h2'>
|
|
Info
|
|
</H2>
|
|
<InfoList iconsSize='24px' metric={props.metric} deadline={props.deadline}/>
|
|
</FlexColumn>
|
|
<FlexColumn alignmentX='flex-start' maxWidth='260px'>
|
|
<H2 as='h2'>
|
|
Description
|
|
</H2>
|
|
<ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
|
|
__html: fullDescription
|
|
? parseMarkdownResponse(fullDescription) : props.description
|
|
}}/>
|
|
</FlexColumn>
|
|
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
|
|
<H2 as='h2'>
|
|
Baseline
|
|
</H2>
|
|
<FlexColumn gap='12px' alignmentX='flex-start'>
|
|
<Body as='p'>
|
|
In metus ex, venenatis quis risus eget, sodales venenatis nibh. Sed ullamcorper leo non nunc
|
|
euismod, id faucibus justo finibus. Nullam malesuada eros quam, eu lobortis leo feugiat non.
|
|
</Body>
|
|
<Body as='p'>
|
|
See notebook
|
|
<Medium as='a' href='#' display='inline-block' cursor='pointer'>
|
|
here.
|
|
</Medium>
|
|
</Body>
|
|
</FlexColumn>
|
|
</FlexColumn>
|
|
</FlexColumn>
|
|
);
|
|
};
|
|
|
|
const desktopRender = () => {
|
|
return (
|
|
<FlexColumn as='section' padding='20px' gap='64px'>
|
|
<FlexColumn gap='32px'>
|
|
<H2 as='h2'>
|
|
Info
|
|
</H2>
|
|
<InfoList iconsSize='32px' metric={props.metric} deadline={props.deadline}/>
|
|
</FlexColumn>
|
|
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
|
<H2 as='h2'>
|
|
Description
|
|
</H2>
|
|
<ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
|
|
__html: fullDescription ? parseMarkdownResponse(fullDescription) : props.description
|
|
}}/>
|
|
</FlexColumn>
|
|
<FlexColumn gap='16px' alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
|
<H2 as='h2'>
|
|
Baseline
|
|
</H2>
|
|
<FlexColumn gap='12px' alignmentX='flex-start'>
|
|
<Body as='p'>
|
|
In metus ex, venenatis quis risus eget, sodales venenatis nibh. Sed ullamcorper leo non nunc
|
|
euismod, id faucibus justo finibus. Nullam malesuada eros quam, eu lobortis leo feugiat non.
|
|
</Body>
|
|
<Body as='p'>
|
|
See notebook
|
|
<Medium as='a' href='#' display='inline-block' cursor='pointer'>
|
|
here.
|
|
</Medium>
|
|
</Body>
|
|
</FlexColumn>
|
|
</FlexColumn>
|
|
</FlexColumn>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Media query={theme.mobile}>
|
|
{!loading ? mobileRender() : <Loading visible={loading}/>}
|
|
</Media>
|
|
<Media query={theme.desktop}>
|
|
{!loading ? desktopRender() : <Loading visible={loading}/>}
|
|
</Media>
|
|
</>
|
|
);
|
|
};
|
|
|
|
MiniChallenge.propTypes = {
|
|
challengeName: PropsTypes.string,
|
|
description: PropsTypes.string,
|
|
};
|
|
|
|
MiniChallenge.defaultProps = {
|
|
challengeName: '',
|
|
description: '',
|
|
};
|
|
|
|
export default Readme; |