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

refactor terminal code blocks

Browse Source
This commit is contained in:
mattyl006 2022-09-23 14:46:21 +02:00
parent 20da77fa73
commit 49ec6d3897
5 changed files with 170 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/elements/CodeShell.js
View File

@ -3,24 +3,42 @@ import {FlexColumn, Svg} from '../../utils/containers';
import styled from 'styled-components'; import styled from 'styled-components';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import copyIco from '../../assets/copy_ico.svg'; import copyIco from '../../assets/copy_ico.svg';
import {Code} from '../../utils/fonts';
const CodeShellStyle = styled(FlexColumn)` const CodeShellStyle = styled(FlexColumn)`
position: relative; position: relative;
padding: 40px 32px 32px; padding: 24px 14px 14px;
gap: 12px; gap: 8px;
background-color: ${({theme}) => theme.colors.dark07}; background-color: ${({theme}) => theme.colors.dark07};
border: 1px solid ${({theme}) => theme.colors.dark}; border: 1px solid ${({theme}) => theme.colors.dark};
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
@media (min-width: ${({theme}) => theme.overMobile}) {
gap: 12px;
padding: 40px 32px 32px;
}
`; `;
const CodeShell = (props) => { const CodeShell = (props) => {
const renderCommands = () => {
return (
props.commands.map((command, index) => {
return (
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li' before>
{command}
</Code>
);
})
);
};
return ( return (
<CodeShellStyle> <CodeShellStyle as='ul'>
<Svg position='absolute' top='12px' right='12px' cursor='pointer' <Svg position='absolute' top='12px' right='12px' cursor='pointer'
backgroundColor={theme.colors.white} src={copyIco}/> backgroundColor={theme.colors.white} src={copyIco}/>
{props.children} {renderCommands()}
</CodeShellStyle> </CodeShellStyle>
); );
}; };

269
src/components/sections/HowTo.js
View File

@ -1,53 +1,45 @@
import React from 'react'; import React from 'react';
import {FlexColumn, FlexRow, Svg} from '../../utils/containers'; import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers';
import {Body, Code, CodeMedium, H2, H3, Medium} from '../../utils/fonts'; import {Body, H2, H3, Medium} from '../../utils/fonts';
import CircleNumber from '../elements/CircleNumber'; import CircleNumber from '../elements/CircleNumber';
import CodeShell from '../elements/CodeShell'; import CodeShell from '../elements/CodeShell';
import cubeIcon from '../../assets/cube_ico.svg'; import cubeIcon from '../../assets/cube_ico.svg';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import {IS_MOBILE} from '../../utils/globals';
const HowTo = () => { const HowTo = () => {
return ( return (
<FlexColumn margin='64px 0 0 0' gap='48px' alignmentX='flex-start' maxWidth='668px'> <FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
<FlexColumn as='article' gap='24px' alignmentX='flex-start'> gap={IS_MOBILE() ? '24px' : '48px'} alignmentX='flex-start' maxWidth='668px'>
<H2 as='h2' margin='0 0 8px 0'> <FlexColumn as='article' 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>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/> <CircleNumber number='1'/>
<Body as='p'> <Body as='p' margin='auto 0'>
You need to create empty repo with name: You need to create empty repo with name:
<Medium> <Medium>
yourID/challengeName yourID/challengeName
</Medium> </Medium>
</Body> </Body>
</FlexRow> </Grid>
<CodeShell> <CodeShell codeBlockIndex={1}
<Code as='p'> commands={['git clone git@git.wmi.amu.edu.pl:YOURID/challenging-america-geo-prediction.git']}/>
<CodeMedium>~$</CodeMedium> git clone <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
git@git.wmi.amu.edu.pl:YOURID/challenging-america-geo-prediction.git
</Code>
</CodeShell>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
<CircleNumber number='2'/> <CircleNumber number='2'/>
<Body as='p'> <Body as='p' margin='auto 0'>
Pull gonito challenge repo Pull gonito challenge repo
</Body> </Body>
</FlexRow> </Grid>
<CodeShell> <CodeShell codeBlockIndex={2} commands={['cd challenging-america-geo-prediction',
<Code as='p'> 'git pull git://gonito.net/challenging-america-geo-prediction.git']}/>
<CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction
</Code>
<Code as='p'>
<CodeMedium>~$</CodeMedium> git pull git://gonito.net/challenging-america-geo-prediction.git
</Code>
</CodeShell>
<Body as='p'> <Body as='p'>
Make sure Gonito.net has access to your repo (e.g. by making it public). Make sure Gonito.net has access to your repo (e.g. by making it public).
</Body> </Body>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap='24px' alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'> <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'>
@ -62,21 +54,12 @@ const HowTo = () => {
<H3 as='h3'> <H3 as='h3'>
Install geval Install geval
</H3> </H3>
<CodeShell> <CodeShell codeBlockIndex={3}
<Code as='p'> commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
<CodeMedium>~$</CodeMedium> wget https://gonito.net/get/bin/geval
</Code>
<Code as='p'>
<CodeMedium>~$</CodeMedium> chmod u+x geval
</Code>
<Code as='p'>
<CodeMedium>~$</CodeMedium> ./geval --help
</Code>
</CodeShell>
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap='24px' alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'> <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Push your solution Push your solution
</H2> </H2>
<Body> <Body>
@ -84,34 +67,34 @@ const HowTo = () => {
source codes along source codes along
with <Medium>out.tsv</Medium> files. with <Medium>out.tsv</Medium> files.
</Body> </Body>
<CodeShell> {/*<CodeShell>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction {/* <CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git checkout -b my-brilliant-branch # switch to some other branch {/* <CodeMedium>~$</CodeMedium> git checkout -b my-brilliant-branch # switch to some other branch*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git add foo.py build.sh # add your source codes {/* <CodeMedium>~$</CodeMedium> git add foo.py build.sh # add your source codes*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git add gonito.yaml # it's a good practice to add metadata file, see {/* <CodeMedium>~$</CodeMedium> git add gonito.yaml # it's a good practice to add metadata file, see*/}
below {/* below*/}
</Code> {/* </Code>*/}
</CodeShell> {/*</CodeShell>*/}
<CodeShell> {/*<CodeShell>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git add dev-0/out.tsv test-A/out.tsv # add your output files {/* <CodeMedium>~$</CodeMedium> git add dev-0/out.tsv test-A/out.tsv # add your output files*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git commit -m 'my brilliant solution' {/* <CodeMedium>~$</CodeMedium> git commit -m 'my brilliant solution'*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
<CodeMedium>~$</CodeMedium> git push origin my-brilliant-branch {/* <CodeMedium>~$</CodeMedium> git push origin my-brilliant-branch*/}
</Code> {/* </Code>*/}
</CodeShell> {/*</CodeShell>*/}
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap='24px' alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'> <H2 as='h2' margin='0 0 8px 0'>
Submit solution to Gonito Submit solution to Gonito
</H2> </H2>
@ -124,7 +107,7 @@ const HowTo = () => {
form</Medium>. form</Medium>.
</Body> </Body>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'> <H3 as='h3'>
Integration with external repos Integration with external repos
</H3> </H3>
@ -133,7 +116,7 @@ const HowTo = () => {
configure a webhook. configure a webhook.
</Body> </Body>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'> <H3 as='h3'>
Submission metadata Submission metadata
</H3> </H3>
@ -141,12 +124,12 @@ const HowTo = () => {
Gonito can take the metadata (description, tags, parameters) of a submission from a number of Gonito can take the metadata (description, tags, parameters) of a submission from a number of
sources (in order of precedence): sources (in order of precedence):
</Body> </Body>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/> <CircleNumber number='1'/>
<Body as='p'> <Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file The YAML files specified in the param-files field of the gonito.yaml file
</Body> </Body>
</FlexRow> </Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/> backgroundColor={theme.colors.green}/>
@ -170,12 +153,12 @@ const HowTo = () => {
discarded, discarded,
</Body> </Body>
</FlexRow> </FlexRow>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/> <CircleNumber number='2'/>
<Body as='p'> <Body as='p' margin='auto 0'>
<Medium>Gonito.yaml</Medium> file committed to the repository, <Medium>Gonito.yaml</Medium> file committed to the repository,
</Body> </Body>
</FlexRow> </Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/> backgroundColor={theme.colors.green}/>
@ -197,12 +180,12 @@ const HowTo = () => {
parameters given in params field, parameters given in params field,
</Body> </Body>
</FlexRow> </FlexRow>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/> <CircleNumber number='3'/>
<Body as='p'> <Body as='p' margin='auto 0'>
Names of output files (only for parameters) Names of output files (only for parameters)
</Body> </Body>
</FlexRow> </Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/> backgroundColor={theme.colors.green}/>
@ -212,18 +195,18 @@ const HowTo = () => {
<Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted; <Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted;
</Body> </Body>
</FlexRow> </FlexRow>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/> <CircleNumber number='4'/>
<Body as='p'> <Body as='p' margin='auto 0'>
Submission form (when submitting manually) Submission form (when submitting manually)
</Body> </Body>
</FlexRow> </Grid>
<FlexRow width='100%' gap='16px' alignmentX='flex-start'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/> <CircleNumber number='5'/>
<Body as='p'> <Body as='p' margin='auto 0'>
Git commit message Git commit message
</Body> </Body>
</FlexRow> </Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/> backgroundColor={theme.colors.green}/>
@ -243,65 +226,65 @@ const HowTo = () => {
that you can also that you can also
add links to external resources using the <Medium>`links`</Medium> section): add links to external resources using the <Medium>`links`</Medium> section):
</Body> </Body>
<CodeShell> {/*<CodeShell>*/}
<Code as='p'> {/* <Code as='p'>*/}
description: This my brilliant solution {/* description: This my brilliant solution*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
tags: {/* tags:*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- neural-network {/* - neural-network*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- left-to-right {/* - left-to-right*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
params: {/* params:*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
epochs: 10 {/* epochs: 10*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
learning-rate: 0.01 {/* learning-rate: 0.01*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
unwanted-params: {/* unwanted-params:*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- model-file {/* - model-file*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- vocab-file {/* - vocab-file*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
param-files: {/* param-files:*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- “*.yaml” {/* - “*.yaml”*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- config/*.yaml {/* - config/*.yaml*/}
</Code> {/* </Code>*/}
<Code as='p'> {/* <Code as='p'>*/}
links: {/* links:*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- title: "Some external link" {/* - title: "Some external link"*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
&nbsp;&nbsp;url: "https://example.com/foo-bar-baz-123" {/* &nbsp;&nbsp;url: "https://example.com/foo-bar-baz-123"*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- title: "Yet another link" {/* - title: "Yet another link"*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
&nbsp;&nbsp;url: "https://example.org/xyz" {/* &nbsp;&nbsp;url: "https://example.org/xyz"*/}
</Code> {/* </Code>*/}
<Code as='p' margin='0 0 0 12px'> {/* <Code as='p' margin='0 0 0 12px'>*/}
- url: "https://example.net/bare-link-without-text" {/* - url: "https://example.net/bare-link-without-text"*/}
</Code> {/* </Code>*/}
</CodeShell> {/*</CodeShell>*/}
<Body> <Body>
It might seem a little bit complicated, but you could simply use the method which is the most It might seem a little bit complicated, but you could simply use the method which is the most
convenient for you. convenient for you.

8
src/index.js
View File

@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import './normalize.css'; import './normalize.css';
import App from './App'; import App from './App';
// import KeyCloakService from './services/KeyCloakService'; import KeyCloakService from './services/KeyCloakService';
// import HttpService from './services/HttpService'; import HttpService from './services/HttpService';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
@ -14,7 +14,7 @@ const renderApp = () => root.render(
</React.StrictMode> </React.StrictMode>
); );
// KeyCloakService.initKeycloak(renderApp); KeyCloakService.initKeycloak(renderApp);
// HttpService.configure(); HttpService.configure();
renderApp(); renderApp();

12
src/utils/fonts.js
View File

@ -74,6 +74,18 @@ const Code = styled(Container)`
line-height: 18px; line-height: 18px;
font-weight: 300; font-weight: 300;
color: ${({theme}) => theme.colors.white}; color: ${({theme}) => theme.colors.white};
&:before {
display: ${({before}) => before ? 'inline-block' : 'none'};
content: '~$';
color: ${({theme}) => theme.colors.green};
font-weight: 400;
margin: 0 4px 0 0;
@media (min-width: ${({theme}) => theme.overMobile}) {
font-weight: 500;
}
}
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;

7
src/utils/globals.js
View File

@ -60,6 +60,10 @@ const RENDER_DEADLINE_TIME = (time) => {
return ''; return '';
}; };
const IS_MOBILE = () => {
return document.body.clientWidth <= 768;
};
export { export {
ELEMENTS_PER_PAGE, ELEMENTS_PER_PAGE,
API, API,
@ -70,5 +74,6 @@ export {
MINI_DESCRIPTION_RENDER, MINI_DESCRIPTION_RENDER,
RENDER_ICO, RENDER_ICO,
CALC_PAGES, CALC_PAGES,
RENDER_DEADLINE_TIME RENDER_DEADLINE_TIME,
IS_MOBILE
}; };