From 49ec6d3897607418a85aafd373ee070ecfa1b30b Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Fri, 23 Sep 2022 14:46:21 +0200 Subject: [PATCH] refactor terminal code blocks --- src/components/elements/CodeShell.js | 26 ++- src/components/sections/HowTo.js | 269 +++++++++++++-------------- src/index.js | 8 +- src/utils/fonts.js | 12 ++ src/utils/globals.js | 7 +- 5 files changed, 170 insertions(+), 152 deletions(-) diff --git a/src/components/elements/CodeShell.js b/src/components/elements/CodeShell.js index 13870ec..d1b2b48 100644 --- a/src/components/elements/CodeShell.js +++ b/src/components/elements/CodeShell.js @@ -3,24 +3,42 @@ import {FlexColumn, Svg} from '../../utils/containers'; import styled from 'styled-components'; import theme from '../../utils/theme'; import copyIco from '../../assets/copy_ico.svg'; +import {Code} from '../../utils/fonts'; const CodeShellStyle = styled(FlexColumn)` position: relative; - padding: 40px 32px 32px; - gap: 12px; + padding: 24px 14px 14px; + gap: 8px; background-color: ${({theme}) => theme.colors.dark07}; border: 1px solid ${({theme}) => theme.colors.dark}; border-radius: 4px; width: 100%; align-items: flex-start; + + @media (min-width: ${({theme}) => theme.overMobile}) { + gap: 12px; + padding: 40px 32px 32px; + } `; const CodeShell = (props) => { + const renderCommands = () => { + return ( + props.commands.map((command, index) => { + return ( + + {command} + + ); + }) + ); + }; + return ( - + - {props.children} + {renderCommands()} ); }; diff --git a/src/components/sections/HowTo.js b/src/components/sections/HowTo.js index 50c5dd9..5711467 100644 --- a/src/components/sections/HowTo.js +++ b/src/components/sections/HowTo.js @@ -1,53 +1,45 @@ import React from 'react'; -import {FlexColumn, FlexRow, Svg} from '../../utils/containers'; -import {Body, Code, CodeMedium, H2, H3, Medium} from '../../utils/fonts'; +import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers'; +import {Body, H2, H3, Medium} from '../../utils/fonts'; import CircleNumber from '../elements/CircleNumber'; import CodeShell from '../elements/CodeShell'; import cubeIcon from '../../assets/cube_ico.svg'; import theme from '../../utils/theme'; +import {IS_MOBILE} from '../../utils/globals'; const HowTo = () => { return ( - - -

+ + +

Get challenge repo

- + - + You need to create empty repo with name: yourID/challengeName - - - - ~$ git clone - git@git.wmi.amu.edu.pl:YOURID/challenging-america-geo-prediction.git - - - + + + - + Pull gonito challenge repo - - - - ~$ cd challenging-america-geo-prediction - - - ~$ git pull git://gonito.net/challenging-america-geo-prediction.git - - + + Make sure Gonito.net has access to your repo (e.g. by making it public). - -

+ +

Work on your solution

@@ -62,21 +54,12 @@ const HowTo = () => {

Install geval

- - - ~$ wget https://gonito.net/get/bin/geval - - - ~$ chmod u+x geval - - - ~$ ./geval --help - - + - -

+ +

Push your solution

@@ -84,34 +67,34 @@ const HowTo = () => { source codes along with out.tsv files. - - - ~$ cd challenging-america-geo-prediction - - - ~$ git checkout -b my-brilliant-branch # switch to some other branch - - - ~$ git add foo.py build.sh # add your source codes - - - ~$ git add gonito.yaml # it's a good practice to add metadata file, see - below - - - - - ~$ git add dev-0/out.tsv test-A/out.tsv # add your output files - - - ~$ git commit -m 'my brilliant solution' - - - ~$ git push origin my-brilliant-branch - - + {/**/} + {/* */} + {/* ~$ cd challenging-america-geo-prediction*/} + {/* */} + {/* */} + {/* ~$ git checkout -b my-brilliant-branch # switch to some other branch*/} + {/* */} + {/* */} + {/* ~$ git add foo.py build.sh # add your source codes*/} + {/* */} + {/* */} + {/* ~$ git add gonito.yaml # it's a good practice to add metadata file, see*/} + {/* below*/} + {/* */} + {/**/} + {/**/} + {/* */} + {/* ~$ git add dev-0/out.tsv test-A/out.tsv # add your output files*/} + {/* */} + {/* */} + {/* ~$ git commit -m 'my brilliant solution'*/} + {/* */} + {/* */} + {/* ~$ git push origin my-brilliant-branch*/} + {/* */} + {/**/} - +

Submit solution to Gonito

@@ -124,7 +107,7 @@ const HowTo = () => { form. - +

Integration with external repos

@@ -133,7 +116,7 @@ const HowTo = () => { configure a webhook. - +

Submission metadata

@@ -141,12 +124,12 @@ const HowTo = () => { Gonito can take the metadata (description, tags, parameters) of a submission from a number of sources (in order of precedence): - + - + The YAML files specified in the param-files field of the gonito.yaml file - + @@ -170,12 +153,12 @@ const HowTo = () => { discarded, - + - + Gonito.yaml file committed to the repository, - + @@ -197,12 +180,12 @@ const HowTo = () => { parameters given in params field, - + - + Names of output files (only for parameters) - + @@ -212,18 +195,18 @@ const HowTo = () => { epochs=10 and learning-rare=0.01 will be extracted; - + - + Submission form (when submitting manually) - - + + - + Git commit message - + @@ -243,65 +226,65 @@ const HowTo = () => { that you can also add links to external resources using the `links` section): - - - description: This my brilliant solution - - - tags: - - - - neural-network - - - - left-to-right - - - params: - - - epochs: 10 - - - learning-rate: 0.01 - - - unwanted-params: - - - - model-file - - - - vocab-file - - - param-files: - - - - “*.yaml” - - - - config/*.yaml - - - links: - - - - title: "Some external link" - - -   url: "https://example.com/foo-bar-baz-123" - - - - title: "Yet another link" - - -   url: "https://example.org/xyz" - - - - url: "https://example.net/bare-link-without-text" - - + {/**/} + {/* */} + {/* description: This my brilliant solution*/} + {/* */} + {/* */} + {/* tags:*/} + {/* */} + {/* */} + {/* - neural-network*/} + {/* */} + {/* */} + {/* - left-to-right*/} + {/* */} + {/* */} + {/* params:*/} + {/* */} + {/* */} + {/* epochs: 10*/} + {/* */} + {/* */} + {/* learning-rate: 0.01*/} + {/* */} + {/* */} + {/* unwanted-params:*/} + {/* */} + {/* */} + {/* - model-file*/} + {/* */} + {/* */} + {/* - vocab-file*/} + {/* */} + {/* */} + {/* param-files:*/} + {/* */} + {/* */} + {/* - “*.yaml”*/} + {/* */} + {/* */} + {/* - config/*.yaml*/} + {/* */} + {/* */} + {/* links:*/} + {/* */} + {/* */} + {/* - title: "Some external link"*/} + {/* */} + {/* */} + {/*   url: "https://example.com/foo-bar-baz-123"*/} + {/* */} + {/* */} + {/* - title: "Yet another link"*/} + {/* */} + {/* */} + {/*   url: "https://example.org/xyz"*/} + {/* */} + {/* */} + {/* - url: "https://example.net/bare-link-without-text"*/} + {/* */} + {/**/} It might seem a little bit complicated, but you could simply use the method which is the most convenient for you. diff --git a/src/index.js b/src/index.js index 189e572..fad2077 100644 --- a/src/index.js +++ b/src/index.js @@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import './normalize.css'; import App from './App'; -// import KeyCloakService from './services/KeyCloakService'; -// import HttpService from './services/HttpService'; +import KeyCloakService from './services/KeyCloakService'; +import HttpService from './services/HttpService'; const root = ReactDOM.createRoot(document.getElementById('root')); @@ -14,7 +14,7 @@ const renderApp = () => root.render( ); -// KeyCloakService.initKeycloak(renderApp); -// HttpService.configure(); +KeyCloakService.initKeycloak(renderApp); +HttpService.configure(); renderApp(); \ No newline at end of file diff --git a/src/utils/fonts.js b/src/utils/fonts.js index 2679989..4d6fda7 100644 --- a/src/utils/fonts.js +++ b/src/utils/fonts.js @@ -74,6 +74,18 @@ const Code = styled(Container)` line-height: 18px; font-weight: 300; 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}) { font-size: 16px; line-height: 24px; diff --git a/src/utils/globals.js b/src/utils/globals.js index dbfbf1b..8e5f7d0 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -60,6 +60,10 @@ const RENDER_DEADLINE_TIME = (time) => { return ''; }; +const IS_MOBILE = () => { + return document.body.clientWidth <= 768; +}; + export { ELEMENTS_PER_PAGE, API, @@ -70,5 +74,6 @@ export { MINI_DESCRIPTION_RENDER, RENDER_ICO, CALC_PAGES, - RENDER_DEADLINE_TIME + RENDER_DEADLINE_TIME, + IS_MOBILE }; \ No newline at end of file