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

modify and add CodeShell for rest How To section

Browse Source
This commit is contained in:
Wirusik 2022-10-06 19:21:47 +02:00
parent 517413936c
commit 07ed3c86ef
2 changed files with 33 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/elements/CodeShell.js
View File

@ -22,12 +22,22 @@ const CodeShellStyle = styled(FlexColumn)`
`; `;
const CodeShell = (props) => { const CodeShell = (props) => {
const formatCommand = (command) => {
if (command[0] === '\t') {
return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
/* eslint-disable */
} else if (command[0] === '\s') {
return <>&nbsp;{formatCommand(command.slice(1))}</>;
} return command;
};
const renderCommands = () => { const renderCommands = () => {
return ( return (
props.commands.map((command, index) => { props.commands.map((command, index) => {
return ( return (
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li' before> <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
{command} before={!props.disablePrompt}>
{formatCommand(command)}
</Code> </Code>
); );
}) })

106
src/components/sections/HowTo.js
View File

@ -67,32 +67,17 @@ const HowTo = () => {
source codes along source codes along
with <Medium>out.tsv</Medium> files. with <Medium>out.tsv</Medium> files.
</Body> </Body>
{/*<CodeShell>*/} <CodeShell codeBlockIndex={3}
{/* <Code as='p'>*/} commands={['cd challenging-america-geo-prediction',
{/* <CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction*/} 'git checkout -b my-brilliant-branch # switch to some other branch',
{/* </Code>*/} 'git add foo.py build.sh # add your source codes',
{/* <Code as='p'>*/} /* eslint-disable */
{/* <CodeMedium>~$</CodeMedium> git checkout -b my-brilliant-branch # switch to some other branch*/} `git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
{/* </Code>*/} <CodeShell codeBlockIndex={4}
{/* <Code as='p'>*/} commands={['git add dev-0/out.tsv test-A/out.tsv # add your output files',
{/* <CodeMedium>~$</CodeMedium> git add foo.py build.sh # add your source codes*/} /* eslint-disable */
{/* </Code>*/} `git commit -m 'my brilliant solution'`,
{/* <Code as='p'>*/} 'git push origin my-brilliant-branch']}/>
{/* <CodeMedium>~$</CodeMedium> git add gonito.yaml # it's a good practice to add metadata file, see*/}
{/* below*/}
{/* </Code>*/}
{/*</CodeShell>*/}
{/*<CodeShell>*/}
{/* <Code as='p'>*/}
{/* <CodeMedium>~$</CodeMedium> git add dev-0/out.tsv test-A/out.tsv # add your output files*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* <CodeMedium>~$</CodeMedium> git commit -m 'my brilliant solution'*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* <CodeMedium>~$</CodeMedium> git push origin my-brilliant-branch*/}
{/* </Code>*/}
{/*</CodeShell>*/}
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'> <H2 as='h2' margin='0 0 8px 0'>
@ -226,65 +211,16 @@ const HowTo = () => {
that you can also that you can also
add links to external resources using the <Medium>`links`</Medium> section): add links to external resources using the <Medium>`links`</Medium> section):
</Body> </Body>
{/*<CodeShell>*/} <CodeShell codeBlockIndex={5} disablePrompt
{/* <Code as='p'>*/} commands={['description: This my brilliant solution',
{/* description: This my brilliant solution*/} 'tags:', '\t- neutral-network', '\t- left-to-right',
{/* </Code>*/} 'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
{/* <Code as='p'>*/} 'unwanted-params:', '\t- model-file', '\t- vocab-file',
{/* tags:*/} 'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
{/* </Code>*/} 'links:', '\t- title: "Some external link"',
{/* <Code as='p' margin='0 0 0 12px'>*/} '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
{/* - neural-network*/} '\t\s\shttps://example.com/foo-bar-baz-123"',
{/* </Code>*/} '\t- url: "https://example.net/bare-link-without-text']}/>
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - left-to-right*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* params:*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* epochs: 10*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* learning-rate: 0.01*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* unwanted-params:*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - model-file*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - vocab-file*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* param-files:*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - “*.yaml”*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - config/*.yaml*/}
{/* </Code>*/}
{/* <Code as='p'>*/}
{/* links:*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - title: "Some external link"*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* &nbsp;&nbsp;url: "https://example.com/foo-bar-baz-123"*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - title: "Yet another link"*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* &nbsp;&nbsp;url: "https://example.org/xyz"*/}
{/* </Code>*/}
{/* <Code as='p' margin='0 0 0 12px'>*/}
{/* - url: "https://example.net/bare-link-without-text"*/}
{/* </Code>*/}
{/*</CodeShell>*/}
<Body> <Body>
It might seem a little bit complicated, but you could simply use the method which is the most It might seem a little bit complicated, but you could simply use the method which is the most
convenient for you. convenient for you.