Skip to content

Getting Started

Getting Started#

Note

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.

  1. 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
  2. Install dependencies with npm ci
  3. Define a valid configuration object in config/user-config.js. To get started, you can use config/user-config.sample.js as a reference.
  4. Run the development server with npm run dev, which will start a local server on http://localhost:8080.

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 config/user-config.js.

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

  • in 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 - in 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.

Styling#

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:

// src/style/custom_theme.scss
// ...
$primary: #ff0000; // red
// ...

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:

scss
// src/style/styles.scss
// Modify the titles of datasets in the search results
.dataset-info-box-body .dataset-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}