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 {FlexColumn} from '../../../utils/containers';
import {IS_MOBILE} from '../../../utils/globals';
import Media from 'react-media';
import { FlexColumn } from '../../../utils/containers';
import { IS_MOBILE } from '../../../utils/globals';
// 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}/>
<WorkOnYourSolution/>
<PushYourSolution challengeName={props.challengeName}/>
</FlexColumn>
<FlexColumn as='article'>
<SubmitSolutionToGonito/>
<Media query='(max-width: 1224px)'>
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}
/>
<WorkOnYourSolution />
<PushYourSolution challengeName={props.challengeName} />
<SubmitSolutionToGonito />
</FlexColumn>
<FlexColumn as="article">
{/* <SubmitSolutionToGonito /> */}
{/* <Media query='(max-width: 1224px)'>
<SubmissionMetadataSmallDesktop/>
</Media>
<Media query='(min-width: 1225px)'>
<SubmissionMetadataLargeDesktop/>
</Media>
</FlexColumn>
</FlexColumn>
);
</Media> */}
</FlexColumn>
</FlexColumn>
);
};
export default HowTo;

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

@ -1,40 +1,75 @@
import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals';
import {Body, H2, Medium} from '../../../../utils/fonts';
import {FlexColumn, Grid} from '../../../../utils/containers';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn, Grid } from '../../../../utils/containers';
import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell';
const GetChallengeRepo = (props) => {
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'}>
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>
</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
</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).
</Body>
</FlexColumn>
);
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'}>
Get challenge repo
</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">&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;

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

@ -1,33 +1,25 @@
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';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn } from '../../../../utils/containers';
const PushYourSolution = (props) => {
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'}>
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.
</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>
);
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'}>
Push your solution
</H2>
<Body>
Commit and push at least <Medium>*/out.tsv</Medium> files to your repo.
It is also recommended to push your source code files.
</Body>
</FlexColumn>
);
};
export default PushYourSolution;

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

@ -1,34 +1,24 @@
import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals';
import {Body, H2, H3, Medium} from '../../../../utils/fonts';
import {FlexColumn} from '../../../../utils/containers';
import { IS_MOBILE } from '../../../../utils/globals';
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'>
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>.
</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>
);
return (
<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>
<Body>
Submit your solution to Gonito using SUBMIT on the panel on the left.
</Body>
</FlexColumn>
);
};
export default SubmitSolutionToGonito;

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

@ -1,33 +1,43 @@
import React from 'react';
import {IS_MOBILE} from '../../../../utils/globals';
import {Body, H2, H3, Medium} from '../../../../utils/fonts';
import {FlexColumn} from '../../../../utils/containers';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, H3, Medium } from '../../../../utils/fonts';
import { FlexColumn } from '../../../../utils/containers';
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'}>
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>
<Body as='p'>
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>
</FlexColumn>
);
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'}>
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>. You may also create the
output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
</Body>
<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',
'./geval -t dev-0',
]}
/>
</FlexColumn>
</FlexColumn>
);
};
export default WorkOnYourSolution;