HowTo section modyfication
This commit is contained in:
parent
71dfb9c2db
commit
77b85173b0
@ -1,32 +1,40 @@
|
||||
import React from 'react';
|
||||
import { FlexColumn } from '../../../utils/containers';
|
||||
import { IS_MOBILE } from '../../../utils/globals';
|
||||
import Media from 'react-media';
|
||||
// import Media from 'react-media';
|
||||
import GetChallengeRepo from './sections/GetChallengeRepo';
|
||||
import WorkOnYourSolution from './sections/WorkOnYourSolution';
|
||||
import PushYourSolution from './sections/PushYourSolution';
|
||||
import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop';
|
||||
import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop';
|
||||
// import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop';
|
||||
// import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop';
|
||||
import SubmitSolutionToGonito from './sections/SubmitSolutionToGonito';
|
||||
|
||||
const HowTo = (props) => {
|
||||
return (
|
||||
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
|
||||
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
|
||||
maxWidth={IS_MOBILE() ? '668px' : 'none'}>
|
||||
<FlexColumn maxWidth='680px' alignmentX='flex-start' gap='48px'>
|
||||
<GetChallengeRepo user={props.user ? props.user : 'yourID'} challengeName={props.challengeName}/>
|
||||
<FlexColumn
|
||||
margin={IS_MOBILE() ? null : '64px 0 0 0'}
|
||||
padding={IS_MOBILE() ? '12px 20px' : null}
|
||||
gap={IS_MOBILE() ? '24px' : '48px'}
|
||||
alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
|
||||
maxWidth={IS_MOBILE() ? '668px' : 'none'}
|
||||
>
|
||||
<FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
|
||||
<GetChallengeRepo
|
||||
user={props.user ? props.user : 'yourID'}
|
||||
challengeName={props.challengeName}
|
||||
/>
|
||||
<WorkOnYourSolution />
|
||||
<PushYourSolution challengeName={props.challengeName} />
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article'>
|
||||
<SubmitSolutionToGonito />
|
||||
<Media query='(max-width: 1224px)'>
|
||||
</FlexColumn>
|
||||
<FlexColumn as="article">
|
||||
{/* <SubmitSolutionToGonito /> */}
|
||||
{/* <Media query='(max-width: 1224px)'>
|
||||
<SubmissionMetadataSmallDesktop/>
|
||||
</Media>
|
||||
<Media query='(min-width: 1225px)'>
|
||||
<SubmissionMetadataLargeDesktop/>
|
||||
</Media>
|
||||
</Media> */}
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
|
||||
@ -6,33 +6,68 @@ import CircleNumber from '../../../generic/CircleNumber';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const GetChallengeRepo = (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`;
|
||||
}
|
||||
};
|
||||
|
||||
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'}>
|
||||
<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'}>
|
||||
Get challenge repo
|
||||
</H2>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
You need to create empty repo with name:
|
||||
<Medium as='span'>
|
||||
yourID/challengeName
|
||||
</Medium>
|
||||
<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>
|
||||
<CodeShell codeBlockIndex={1}
|
||||
commands={[`git clone git@git.wmi.amu.edu.pl:${props.user}/${props.challengeName}.git`]}/>
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
Pull gonito challenge repo
|
||||
<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">REPO_KEY_HERE</Medium> to
|
||||
your deploy keys in your git repository settings.
|
||||
</Body>
|
||||
</Grid>
|
||||
<CodeShell codeBlockIndex={2} commands={[`cd ${props.challengeName}`,
|
||||
`git pull git://gonito.net/${props.challengeName}.git`]}/>
|
||||
<Body as='p'>
|
||||
Make sure Gonito.net has access to your repo (e.g. by making it public).
|
||||
<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/${props.challengeName}`,
|
||||
`cd ${props.challengeName}`,
|
||||
pullCodeLineRender(),
|
||||
]}
|
||||
/>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,31 +1,23 @@
|
||||
import React from 'react';
|
||||
import { IS_MOBILE } from '../../../../utils/globals';
|
||||
import { Body, H2, Medium } from '../../../../utils/fonts';
|
||||
import CodeShell from '../../../generic/CodeShell';
|
||||
import { FlexColumn } from '../../../../utils/containers';
|
||||
|
||||
const PushYourSolution = (props) => {
|
||||
const PushYourSolution = () => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
<FlexColumn
|
||||
as="article"
|
||||
gap={IS_MOBILE() ? '16px' : '24px'}
|
||||
width="100%"
|
||||
alignmentX="flex-start"
|
||||
>
|
||||
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Push your solution
|
||||
</H2>
|
||||
<Body>
|
||||
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your
|
||||
source codes along
|
||||
with <Medium>out.tsv</Medium> files.
|
||||
Commit and push at least <Medium>*/out.tsv</Medium> files to your repo.
|
||||
It is also recommended to push your source code files.
|
||||
</Body>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={[`cd ${props.challengeName}`,
|
||||
'git checkout -b my-brilliant-branch # switch to some other branch',
|
||||
'git add foo.py build.sh # add your source codes',
|
||||
/* eslint-disable */
|
||||
`git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
|
||||
<CodeShell codeBlockIndex={4}
|
||||
commands={['git add dev-0/out.tsv test-A/out.tsv # add your output files',
|
||||
/* eslint-disable */
|
||||
`git commit -m 'my brilliant solution'`,
|
||||
'git push origin my-brilliant-branch']}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,33 +1,23 @@
|
||||
import React from 'react';
|
||||
import { IS_MOBILE } from '../../../../utils/globals';
|
||||
import {Body, H2, H3, Medium} from '../../../../utils/fonts';
|
||||
import { H2, Body } from '../../../../utils/fonts';
|
||||
import { FlexColumn } from '../../../../utils/containers';
|
||||
|
||||
const SubmitSolutionToGonito = () => {
|
||||
return (
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
|
||||
<H2 as='h2' margin='0 0 8px 0'>
|
||||
<FlexColumn
|
||||
alignmentX="flex-start"
|
||||
maxWidth="680px"
|
||||
width="100%"
|
||||
gap={IS_MOBILE() ? '16px' : '24px'}
|
||||
>
|
||||
<H2 as="h2" margin="0 0 8px 0">
|
||||
Submit solution to Gonito
|
||||
</H2>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Manual submission
|
||||
</H3>
|
||||
<Body>
|
||||
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
|
||||
form</Medium>.
|
||||
Submit your solution to Gonito using SUBMIT on the panel on the left.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Integration with external repos
|
||||
</H3>
|
||||
<Body>
|
||||
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
|
||||
configure a webhook.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,25 +6,35 @@ import CodeShell from '../../../generic/CodeShell';
|
||||
|
||||
const WorkOnYourSolution = () => {
|
||||
return (
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'>
|
||||
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
<FlexColumn
|
||||
as="article"
|
||||
gap={IS_MOBILE() ? '16px' : '24px'}
|
||||
width="100%"
|
||||
alignmentX="flex-start"
|
||||
>
|
||||
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
|
||||
Work on your solution
|
||||
</H2>
|
||||
<Body as='p'>
|
||||
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
|
||||
is also
|
||||
recommended to
|
||||
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
|
||||
<Body as="p">
|
||||
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>
|
||||
<Body as='p'>
|
||||
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
|
||||
<Body as="p">
|
||||
(This step is optional.) You can evaluate results for the dev set
|
||||
locally by <Medium as="span">geval</Medium>.
|
||||
</Body>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
Install geval
|
||||
</H3>
|
||||
<CodeShell codeBlockIndex={3}
|
||||
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
|
||||
<FlexColumn as="article" gap="24px" alignmentX="flex-start" width="100%">
|
||||
<H3 as="h3">Install geval</H3>
|
||||
<CodeShell
|
||||
codeBlockIndex={3}
|
||||
commands={[
|
||||
'wget https://gonito.net/get/bin/geval',
|
||||
'chmod u+x geval',
|
||||
'./geval --help',
|
||||
'./geval -t dev-0',
|
||||
]}
|
||||
/>
|
||||
</FlexColumn>
|
||||
</FlexColumn>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user