Library contains the custom UI components of the EOSC Portal services. Uses the JS scripts, and the SCSS styles for consistent visualization and events triggering through many services.
- Requirements
- Bucket policy update
- Dependencies installation
- Development
- Building
- Prerequisites
- Quickstart
- Library instances URLs
- How to contribute
Only for build purposes
- nodejs >= 14.17.1 LTE
Sometimes reading files may not work. To fix the issue run Update bucket policy workflow
npm install -g gulp-cli
npm i- Install dependencies
- Run site locally with the custom components
Browser will be opened at http://localhost:3000/documentation/index.html
npm start
- Provided changes in
.jsxand.scssfiles will re-render the docs page
Building process produce *.min.js, *.min.css files into dist folder by default
Params
- production
Flag. When added library will be:
- uglified
- optimized with bundle size
- source maps (help in debugging for developers) won't be added
- env
A relative path to a configuration
Examples
gulp build_lib --mode development --env env/env.production.jsYou'll need to know a bit of HTML and JS. For refresher see HTML tutorial or JS tutorial.
Components can be rendered using CSS class, CSS id or HTML tags. HTML tags can be written in snake or camel case.
Simple page with custom components
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<eosc-common-main-header
username="name surname"
login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
logout-url="https://marketplace.eosc-portal.eu/users/logout"
></eosc-common-main-header>
<EoscCommonMainFooter></EoscCommonMainFooter>
<script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.js"></script>
<link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.css" />
</body>
</html>Attaching only specific component from the list
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<eosc-common-main-header
username="name surname"
login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
logout-url="https://marketplace.eosc-portal.eu/users/logout"
></eosc-common-main-header>
<script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/main-header.production.min.js"></script>
<link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/main-header.production.min.css" />
</body>
</html>Using render toolset to dynamically re-render components
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.js"></script>
<link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.css" />
</head>
<body>
<eosc-common-main-header
username="name surname"
login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
logout-url="https://marketplace.eosc-portal.eu/users/logout"
></eosc-common-main-header>
<script>
window.eosccommon.renderMainHeader("eosc-common-main-header");
</script>
<EoscCommonMainFooter></EoscCommonMainFooter>
<script>
window.eosccommon.renderMainHeader("EoscCommonMainFooter");
</script>
</body>
</html>index.min.js and index.mn.css contains all library components. Other scripts and styles will be named as components.
See full components list.
URL base: https://s3.cloud.cyfronet.pl/eosc-portal-common/
Components documentation: https://s3.cloud.cyfronet.pl/eosc-portal-common/docs/index.html
Examples
All components
https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.js
Specific component
https://s3.cloud.cyfronet.pl/eosc-portal-common/main-header.development.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/main-header.production.js
URL base: https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/
Components documentation: https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/docs/index.html
Examples
All components
https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.development.js
Specific component
https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/main-header.production.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/main-header.development.js
URL base: https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-
Components documentation: https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-/docs/index.html
Examples
All components
https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-other-feature-branch-name/index.production.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-feature-1/index.development.js
Specific component
https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-bugfix-2-replace-urls-in-config/main-header.production.css
https://s3.cloud.cyfronet.pl/eosc-portal-common/pr-bugfix-4-fix-rendering/main-header.development.js
- Go to file you want to edit (for example https://github.com/cyfronet-fid/eosc-portal-common/blob/develop/configurations/configuration.production.json)
- Click
pen icon
- Provide changes in edition field
- Click
Propose changes
- See provided changes and confirm them by clicking
Create pull request