This new component has not yet been released to the public, please get in touch with us if you are interested. The release of this an other components is planed.
Getting started is simple. The only requirements are Git and Node.js v18.x installed on your system.
- Fork the piveau ui. To get started with piveau ui, the first step is to fork the vanilla piveau ui repository, which includes the necesssary modules for the web interface.
git clone https://gitlab.com/piveau/hub/piveau-hub-ui.git
- Install dependencies with
- Define a valid configuration object in
config/user-config.js. To get started, you can use
config/user-config.sample.jsas a reference.
- Run the development server with
npm run dev, which will start a local server on
Customization and Configuration#
To customize essential behavior of piveau UI such as API endpoints, you can do so by adjusting the user-config configuration object located in
piveau ui comes with three core components out of the box:
piveau-hub-ui-modules: The core modules for the piveau ui.
piveau-header-footer: The header and footer for the piveau ui.
piveau-cookie-consent: The cookie consent for the piveau ui.
To customize header and footer, you can
src/App.vue, override the header and footer components in the source code with content as desired.
- create your own npm package exposing the header and footer components and install it in the project. You can then override the header and footer components in the source code with the components from your npm package.
To the cookie consent banner, you can
src/App.vue, override the cookie banner component in the source code with content as desired.
- create your own npm package exposing the cookie banner components and install it in the project. You can then override the cookie banner components in the source code with the components from your npm package.
By using variables
piveau ui comes with default themeing. To customize the theme, you can override its base theme in
src/style/custom_theme.scss. piveau ui uses Bootstrap 4 as its design framework and shares its SCSS variables with it.
A common use case is to override the color palette of the theme. For example, to adjust the primary color of theme, you can override the
$primary variable as follows:
By providing custom CSS
For more in-depth customization, you can write CSS in
src/style/styles.scss for complete control over the styling of the web interface.
For example, if you want to change how dataset search results are displayed, you can override the CSS as follows: