readme markdown parser update
This commit is contained in:
parent
1c6655f62b
commit
c06d7a4333
17
package-lock.json
generated
17
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"axios": "^0.27.2",
|
||||
"keycloak-js": "^19.0.1",
|
||||
"markdown": "^0.5.0",
|
||||
"marked": "^4.2.12",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -11725,6 +11726,17 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "4.2.12",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
|
||||
"integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
@ -25423,6 +25435,11 @@
|
||||
"nopt": "~2.1.1"
|
||||
}
|
||||
},
|
||||
"marked": {
|
||||
"version": "4.2.12",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
|
||||
"integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw=="
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
|
@ -12,6 +12,7 @@
|
||||
"axios": "^0.27.2",
|
||||
"keycloak-js": "^19.0.1",
|
||||
"markdown": "^0.5.0",
|
||||
"marked": "^4.2.12",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
@ -1,22 +1,33 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn} from '../../utils/containers';
|
||||
import {Body, H2, Medium} from '../../utils/fonts';
|
||||
import {Body, H2} from '../../utils/fonts';
|
||||
import Media from 'react-media';
|
||||
import theme from '../../utils/theme';
|
||||
import getChallengeFullDescription from '../../api/getChallengeFullDescription';
|
||||
import {markdown} from 'markdown';
|
||||
// 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';
|
||||
import { marked } from 'marked';
|
||||
|
||||
const ReadmeStyle = styled(Body)`
|
||||
* {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Kanit', sans-serif;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: inherit;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
margin: 24px 0;
|
||||
|
||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||
font-size: 22px;
|
||||
@ -62,13 +73,19 @@ const Readme = (props) => {
|
||||
}, [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>');
|
||||
let result = marked.parse(response);
|
||||
let regex = /<h3 /g;
|
||||
result = result.replace(regex, '<h4 ');
|
||||
regex = /<\/h3>/g;
|
||||
result = result.replace(regex, '</h4>');
|
||||
regex = /<h2 /g;
|
||||
result = result.replace(regex, '<h3 ');
|
||||
regex = /<\/h2>/g;
|
||||
result = result.replace(regex, '</h3>');
|
||||
regex = /<h1 /g;
|
||||
result = result.replace(regex, '<h2 ');
|
||||
regex = /<\/h1>/g;
|
||||
result = result.replace(regex, '</h2>');
|
||||
return result;
|
||||
};
|
||||
|
||||
@ -82,15 +99,15 @@ const Readme = (props) => {
|
||||
<InfoList iconsSize='24px' metric={props.metric} deadline={props.deadline}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='260px'>
|
||||
<H2 as='h2'>
|
||||
{/* <H2 as='h2'>
|
||||
Description
|
||||
</H2>
|
||||
</H2> */}
|
||||
<ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
|
||||
__html: fullDescription
|
||||
? parseMarkdownResponse(fullDescription) : props.description
|
||||
}}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
|
||||
{/* <FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
|
||||
<H2 as='h2'>
|
||||
Baseline
|
||||
</H2>
|
||||
@ -106,7 +123,7 @@ const Readme = (props) => {
|
||||
</Medium>
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
</FlexColumn> */}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
@ -120,15 +137,15 @@ const Readme = (props) => {
|
||||
</H2>
|
||||
<InfoList iconsSize='32px' metric={props.metric} deadline={props.deadline}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||
<H2 as='h2'>
|
||||
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1200px'>
|
||||
{/* <H2 as='h2'>
|
||||
Description
|
||||
</H2>
|
||||
<ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
|
||||
</H2> */}
|
||||
<ReadmeStyle as={fullDescription ? 'section' : 'p'} dangerouslySetInnerHTML={{
|
||||
__html: fullDescription ? parseMarkdownResponse(fullDescription) : props.description
|
||||
}}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn gap='16px' alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||
{/* <FlexColumn gap='16px' alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||
<H2 as='h2'>
|
||||
Baseline
|
||||
</H2>
|
||||
@ -144,7 +161,7 @@ const Readme = (props) => {
|
||||
</Medium>
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
</FlexColumn> */}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user