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.
Only for build purposes
Sometimes reading files may not work. To fix the issue run Update bucket policy workflow
npm install -g gulp-cli
npm i
Browser will be opened at http://localhost:3000/documentation/index.html
npm start
.jsx
and .scss
files will re-render the docs pageBuilding process produce *.min.js
, *.min.css
files into dist
folder by default.
Params
Flag. When added library will be:
- uglified
- optimized with bundle size
- source maps (help in debugging for developers) won't be added
A relative path to a configuration
Examples
gulp build_lib --mode development --env env/env.production.js
You'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>
<div id="eosc-common-eu-information"></div>
<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>
<div id="eosc-common-eu-information"></div>
<script>
window.eosccommon.renderMainHeader("#eosc-common-eu-information");
</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-
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
pen icon
Propose changes
Create pull request