s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

readme markdown parser update

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-01 16:21:51 +01:00
parent 1c6655f62b
commit c06d7a4333
3 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

53
src/components/specific_challenge/Readme.js
View File

@ -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>
);
};