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

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

@ -1,32 +1,40 @@
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'}
maxWidth={IS_MOBILE() ? '668px' : 'none'}
>
<FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
<GetChallengeRepo
user={props.user ? props.user : 'yourID'}
challengeName={props.challengeName}
/>
<WorkOnYourSolution /> <WorkOnYourSolution />
<PushYourSolution challengeName={props.challengeName} /> <PushYourSolution challengeName={props.challengeName} />
</FlexColumn>
<FlexColumn as='article'>
<SubmitSolutionToGonito /> <SubmitSolutionToGonito />
<Media query='(max-width: 1224px)'> </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>
); );

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

@ -6,33 +6,68 @@ import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell'; import CodeShell from '../../../generic/CodeShell';
const GetChallengeRepo = (props) => { 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 ( return (
<FlexColumn as='article' width='100%' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> <FlexColumn
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> 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 Get challenge repo
</H2> </H2>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> <Grid
<CircleNumber number='1'/> width="100%"
<Body as='p' margin='auto 0'> gridTemplateColumns="auto 1fr"
You need to create empty repo with name: gridGap={IS_MOBILE() ? '8px' : '16px'}
<Medium as='span'> >
yourID/challengeName <CircleNumber number="1" />
</Medium> <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> </Body>
</Grid> </Grid>
<CodeShell codeBlockIndex={1} <Grid
commands={[`git clone git@git.wmi.amu.edu.pl:${props.user}/${props.challengeName}.git`]}/> width="100%"
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> gridTemplateColumns="auto 1fr"
<CircleNumber number='2'/> gridGap={IS_MOBILE() ? '8px' : '16px'}
<Body as='p' margin='auto 0'> >
Pull gonito challenge repo <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> </Body>
</Grid> </Grid>
<CodeShell codeBlockIndex={2} commands={[`cd ${props.challengeName}`, <Grid
`git pull git://gonito.net/${props.challengeName}.git`]}/> width="100%"
<Body as='p'> gridTemplateColumns="auto 1fr"
Make sure Gonito.net has access to your repo (e.g. by making it public). 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> </Body>
</Grid>
<CodeShell
codeBlockIndex={1}
commands={[
`git clone your-git/${props.challengeName}`,
`cd ${props.challengeName}`,
pullCodeLineRender(),
]}
/>
</FlexColumn> </FlexColumn>
); );
}; };

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

@ -1,31 +1,23 @@
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"
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 Push your solution
</H2> </H2>
<Body> <Body>
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your Commit and push at least <Medium>*/out.tsv</Medium> files to your repo.
source codes along It is also recommended to push your source code files.
with <Medium>out.tsv</Medium> files.
</Body> </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> </FlexColumn>
); );
}; };

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

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

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

@ -6,25 +6,35 @@ 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"
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 Work on your solution
</H2> </H2>
<Body as='p'> <Body as="p">
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It You need to generate your solution for the test set as{' '}
is also <Medium as="span">test-A/out.tsv</Medium>. You may also create the
recommended to output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
</Body> </Body>
<Body as='p'> <Body as="p">
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>. (This step is optional.) You can evaluate results for the dev set
locally by <Medium as="span">geval</Medium>.
</Body> </Body>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> <FlexColumn as="article" gap="24px" alignmentX="flex-start" width="100%">
<H3 as='h3'> <H3 as="h3">Install geval</H3>
Install geval <CodeShell
</H3> codeBlockIndex={3}
<CodeShell codeBlockIndex={3} commands={[
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/> 'wget https://gonito.net/get/bin/geval',
'chmod u+x geval',
'./geval --help',
'./geval -t dev-0',
]}
/>
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
); );