143 lines
4.2 KiB
JavaScript
143 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import { IS_MOBILE } from '../../../utils/globals';
|
|
import { Body, H2, Medium } from '../../../utils/fonts';
|
|
import { FlexColumn, Grid } from '../../../utils/containers';
|
|
import CircleNumber from '../../../components/generic/CircleNumber';
|
|
import CodeShell from '../../../components/generic/CodeShell';
|
|
|
|
const HowToContent = (props) => {
|
|
const pullCodeLineRender = () => {
|
|
if (
|
|
props.challengeName === 'cnlps-caiccaic' ||
|
|
props.challengeName === 'cnlps-ticrc'
|
|
) {
|
|
return `git pull git@github.com:kubapok/${props.challengeName}.git`;
|
|
} else {
|
|
return `git pull git://gonito.net/${props.challengeName}.git`;
|
|
}
|
|
};
|
|
|
|
const repoKeyRender = () => {
|
|
if (props.userFullInfo) {
|
|
return (
|
|
<CodeShell
|
|
codeBlockIndex={0}
|
|
commands={[props.userFullInfo.individualKey]}
|
|
/>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FlexColumn
|
|
as="article"
|
|
width="100%"
|
|
gap={IS_MOBILE() ? '16px' : '24px'}
|
|
alignmentX="flex-start"
|
|
>
|
|
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
|
How to
|
|
</H2>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="1" />
|
|
<Body as="p" margin="auto 0">
|
|
Create a private git repository with the name
|
|
<Medium as="span"> {props.challengeName}</Medium>
|
|
The name of the repository must match!
|
|
</Body>
|
|
</Grid>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="2" />
|
|
<Body as="p" margin="auto 0">
|
|
Add the following ssh key{' '}
|
|
<Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium>{' '}
|
|
to your deploy keys in your git repository settings.
|
|
</Body>
|
|
</Grid>
|
|
{repoKeyRender()}
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="3" />
|
|
<Body as="p" margin="auto 0">
|
|
Clone your repository and pull from the challenge mother repository
|
|
</Body>
|
|
</Grid>
|
|
<CodeShell
|
|
codeBlockIndex={1}
|
|
commands={[
|
|
`git clone your-git-repository/${props.challengeName}`,
|
|
`cd ${props.challengeName}`,
|
|
pullCodeLineRender(),
|
|
]}
|
|
/>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="4" />
|
|
<Body as="p" margin="auto 0">
|
|
You need to generate your solution for the test set as{' '}
|
|
<Medium as="span">test-A/out.tsv</Medium>. You may also create the
|
|
output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
|
|
</Body>
|
|
</Grid>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="5" />
|
|
<Body as="p" margin="auto 0">
|
|
(This step is optional.) You can evaluate results for the dev set
|
|
locally by <Medium as="span">geval</Medium>.
|
|
</Body>
|
|
</Grid>
|
|
<CodeShell
|
|
codeBlockIndex={3}
|
|
commands={[
|
|
'wget https://gonito.net/get/bin/geval',
|
|
'chmod u+x geval',
|
|
'./geval --help',
|
|
'./geval -t dev-0',
|
|
]}
|
|
/>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="6" />
|
|
<Body as="p" margin="auto 0">
|
|
Commit and push at least <Medium>*/out.tsv</Medium> files to your
|
|
repo. It is also recommended to push your source code files.
|
|
</Body>
|
|
</Grid>
|
|
<Grid
|
|
width="100%"
|
|
gridTemplateColumns="auto 1fr"
|
|
gridGap={IS_MOBILE() ? '8px' : '16px'}
|
|
>
|
|
<CircleNumber number="7" />
|
|
<Body as="p" margin="auto 0">
|
|
Submit your solution to Gonito using <Medium>SUBMIT</Medium> on the
|
|
panel on the left.
|
|
</Body>
|
|
</Grid>
|
|
</FlexColumn>
|
|
);
|
|
};
|
|
|
|
export default HowToContent;
|