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

HowTo section modyfication

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-21 10:33:46 +01:00
parent 71dfb9c2db
commit 77b85173b0
5 changed files with 175 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/specific_challenge/HowTo/HowTo.js
View File

@ -1,35 +1,43 @@
import React from 'react'; import React from 'react';
import {FlexColumn} from '../../../utils/containers'; import { FlexColumn } from '../../../utils/containers';
import {IS_MOBILE} from '../../../utils/globals'; import { IS_MOBILE } from '../../../utils/globals';
import Media from 'react-media'; // import Media from 'react-media';
import GetChallengeRepo from './sections/GetChallengeRepo'; import GetChallengeRepo from './sections/GetChallengeRepo';
import WorkOnYourSolution from './sections/WorkOnYourSolution'; import WorkOnYourSolution from './sections/WorkOnYourSolution';
import PushYourSolution from './sections/PushYourSolution'; import PushYourSolution from './sections/PushYourSolution';
import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop'; // import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop';
import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop'; // import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop';
import SubmitSolutionToGonito from './sections/SubmitSolutionToGonito'; import SubmitSolutionToGonito from './sections/SubmitSolutionToGonito';
const HowTo = (props) => { const HowTo = (props) => {
return ( return (
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null} <FlexColumn
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'} margin={IS_MOBILE() ? null : '64px 0 0 0'}
maxWidth={IS_MOBILE() ? '668px' : 'none'}> padding={IS_MOBILE() ? '12px 20px' : null}
<FlexColumn maxWidth='680px' alignmentX='flex-start' gap='48px'> gap={IS_MOBILE() ? '24px' : '48px'}
<GetChallengeRepo user={props.user ? props.user : 'yourID'} challengeName={props.challengeName}/> alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
<WorkOnYourSolution/> maxWidth={IS_MOBILE() ? '668px' : 'none'}
<PushYourSolution challengeName={props.challengeName}/> >
</FlexColumn> <FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
<FlexColumn as='article'> <GetChallengeRepo
<SubmitSolutionToGonito/> user={props.user ? props.user : 'yourID'}
<Media query='(max-width: 1224px)'> challengeName={props.challengeName}
/>
<WorkOnYourSolution />
<PushYourSolution challengeName={props.challengeName} />
<SubmitSolutionToGonito />
</FlexColumn>
<FlexColumn as="article">
{/* <SubmitSolutionToGonito /> */}
{/* <Media query='(max-width: 1224px)'>
<SubmissionMetadataSmallDesktop/> <SubmissionMetadataSmallDesktop/>
</Media> </Media>
<Media query='(min-width: 1225px)'> <Media query='(min-width: 1225px)'>
<SubmissionMetadataLargeDesktop/> <SubmissionMetadataLargeDesktop/>
</Media> </Media> */}
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
); );
}; };
export default HowTo; export default HowTo;

99
src/components/specific_challenge/HowTo/sections/GetChallengeRepo.js
View File

@ -1,40 +1,75 @@
import React from 'react'; import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals'; import { IS_MOBILE } from '../../../../utils/globals';
import {Body, H2, Medium} from '../../../../utils/fonts'; import { Body, H2, Medium } from '../../../../utils/fonts';
import {FlexColumn, Grid} from '../../../../utils/containers'; import { FlexColumn, Grid } from '../../../../utils/containers';
import CircleNumber from '../../../generic/CircleNumber'; import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell'; import CodeShell from '../../../generic/CodeShell';
const GetChallengeRepo = (props) => { const GetChallengeRepo = (props) => {
return ( const pullCodeLineRender = () => {
<FlexColumn as='article' width='100%' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> if (
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> props.challengeName === 'cnlps-caiccaic' ||
Get challenge repo props.challengeName === 'cnlps-ticrc'
</H2> ) {
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> return `git pull git@github.com:kubapok/${props.challengeName}.git`;
<CircleNumber number='1'/> } else {
<Body as='p' margin='auto 0'> return `git pull git://gonito.net/${props.challengeName}.git`;
You need to create empty repo with name: }
<Medium as='span'> };
yourID/challengeName
</Medium> return (
</Body> <FlexColumn
</Grid> as="article"
<CodeShell codeBlockIndex={1} width="100%"
commands={[`git clone git@git.wmi.amu.edu.pl:${props.user}/${props.challengeName}.git`]}/> gap={IS_MOBILE() ? '16px' : '24px'}
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> alignmentX="flex-start"
<CircleNumber number='2'/> >
<Body as='p' margin='auto 0'> <H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Pull gonito challenge repo Get challenge repo
</Body> </H2>
</Grid> <Grid
<CodeShell codeBlockIndex={2} commands={[`cd ${props.challengeName}`, width="100%"
`git pull git://gonito.net/${props.challengeName}.git`]}/> gridTemplateColumns="auto 1fr"
<Body as='p'> gridGap={IS_MOBILE() ? '8px' : '16px'}
Make sure Gonito.net has access to your repo (e.g. by making it public). >
</Body> <CircleNumber number="1" />
</FlexColumn> <Body as="p" margin="auto 0">
); Create a private git repository with the name
<Medium as="span">&nbsp;{props.challengeName}</Medium>
.&nbsp;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">REPO_KEY_HERE</Medium> to
your deploy keys in your git repository settings.
</Body>
</Grid>
<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>
);
}; };
export default GetChallengeRepo; export default GetChallengeRepo;

48
src/components/specific_challenge/HowTo/sections/PushYourSolution.js
View File

@ -1,33 +1,25 @@
import React from 'react'; import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals'; import { IS_MOBILE } from '../../../../utils/globals';
import {Body, H2, Medium} from '../../../../utils/fonts'; import { Body, H2, Medium } from '../../../../utils/fonts';
import CodeShell from '../../../generic/CodeShell'; import { FlexColumn } from '../../../../utils/containers';
import {FlexColumn} from '../../../../utils/containers';
const PushYourSolution = (props) => { const PushYourSolution = () => {
return ( return (
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'> <FlexColumn
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> as="article"
Push your solution gap={IS_MOBILE() ? '16px' : '24px'}
</H2> width="100%"
<Body> alignmentX="flex-start"
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your >
source codes along <H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
with <Medium>out.tsv</Medium> files. Push your solution
</Body> </H2>
<CodeShell codeBlockIndex={3} <Body>
commands={[`cd ${props.challengeName}`, Commit and push at least <Medium>*/out.tsv</Medium> files to your repo.
'git checkout -b my-brilliant-branch # switch to some other branch', It is also recommended to push your source code files.
'git add foo.py build.sh # add your source codes', </Body>
/* eslint-disable */ </FlexColumn>
`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>
);
}; };
export default PushYourSolution; export default PushYourSolution;

46
src/components/specific_challenge/HowTo/sections/SubmitSolutionToGonito.js
View File

@ -1,34 +1,24 @@
import React from 'react'; import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals'; 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'; import { FlexColumn } from '../../../../utils/containers';
const SubmitSolutionToGonito = () => { const SubmitSolutionToGonito = () => {
return ( return (
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}> <FlexColumn
<H2 as='h2' margin='0 0 8px 0'> alignmentX="flex-start"
Submit solution to Gonito maxWidth="680px"
</H2> width="100%"
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> gap={IS_MOBILE() ? '16px' : '24px'}
<H3 as='h3'> >
Manual submission <H2 as="h2" margin="0 0 8px 0">
</H3> Submit solution to Gonito
<Body> </H2>
In case other methods fail, you can submit your solution manually — go to the <Medium>submit <Body>
form</Medium>. Submit your solution to Gonito using SUBMIT on the panel on the left.
</Body> </Body>
</FlexColumn> </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>
);
}; };
export default SubmitSolutionToGonito; export default SubmitSolutionToGonito;

62
src/components/specific_challenge/HowTo/sections/WorkOnYourSolution.js
View File

@ -1,33 +1,43 @@
import React from 'react'; import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals'; import { IS_MOBILE } from '../../../../utils/globals';
import {Body, H2, H3, Medium} from '../../../../utils/fonts'; import { Body, H2, H3, Medium } from '../../../../utils/fonts';
import {FlexColumn} from '../../../../utils/containers'; import { FlexColumn } from '../../../../utils/containers';
import CodeShell from '../../../generic/CodeShell'; import CodeShell from '../../../generic/CodeShell';
const WorkOnYourSolution = () => { const WorkOnYourSolution = () => {
return ( return (
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%' alignmentX='flex-start'> <FlexColumn
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> as="article"
Work on your solution gap={IS_MOBILE() ? '16px' : '24px'}
</H2> width="100%"
<Body as='p'> alignmentX="flex-start"
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It >
is also <H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
recommended to Work on your solution
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>. </H2>
</Body> <Body as="p">
<Body as='p'> You need to generate your solution for the test set as{' '}
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>. <Medium as="span">test-A/out.tsv</Medium>. You may also create the
</Body> output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> </Body>
<H3 as='h3'> <Body as="p">
Install geval (This step is optional.) You can evaluate results for the dev set
</H3> locally by <Medium as="span">geval</Medium>.
<CodeShell codeBlockIndex={3} </Body>
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/> <FlexColumn as="article" gap="24px" alignmentX="flex-start" width="100%">
</FlexColumn> <H3 as="h3">Install geval</H3>
</FlexColumn> <CodeShell
); codeBlockIndex={3}
commands={[
'wget https://gonito.net/get/bin/geval',
'chmod u+x geval',
'./geval --help',
'./geval -t dev-0',
]}
/>
</FlexColumn>
</FlexColumn>
);
}; };
export default WorkOnYourSolution; export default WorkOnYourSolution;