Web Component List

This is a web component which displacs a list of all webcomponents available in the Web Component Store. It also provides filtering by search term or tags.

• Web Component List
  • Usage
    • Attributes
      • font-url
      • font-name
  • Getting started
    • Prerequisites
    • Source code
    • Dependencies
    • Build
  • Deployment
  • Run with docker
    • Installation
    • Start the docker containers
    • Publish a new version of your webcomponent
    • Stop the docker containers
    • Delete your webcomponents from the store
  • Information
    • Support
    • Contributing
    • Documentation
    • License
    • REUSE

Usage

Include the webcomp script file dist/datasets-list-widget.min.js in your HTML and define the web component like this:

<datasets-list-widget font-url="https://fonts.testingmachine.eu/open-sans/style.css" font-name="Open Sans"></datase-list-widget>

Attributes

font-url

URL to a valid font css file

Type: string

font-name

Name of the font loaded from the font URL

Type: string

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To build the project, the following prerequisites must be met:

• Node 14 / NPM 6

For a ready to use Docker environment with all prerequisites already installed and prepared, you can check out the Docker environment section.

Source code

Get a copy of the repository:

git clone https://github.com/noi-techpark/webcomp-datasets-list.git

Change directory:

cd webcomp-datasets-list/

Dependencies

Download all dependencies:

npm install

Build

Build and start the project:

npm run dev

The application will be served and can be accessed at http://localhost:3000.

Deployment

To create the distributable files, execute the following command:

npm run build

Run with docker

If you want to test the webcomponent on a local instance of the webcomponent store to make sure that it will run correctly also on the real store. You can also access the webcomponent running in a simple separated docker container outside of the store.

If you have already developed your webcomponent and now want to test it on a local instance of the store, just copy .env.example, docker-compose.yml, wcs-manifest.json and infrastructure/docker into your root folder. Adjust your package.json and wcs-manifest.json files as described on the top of this readme. Then follow the instructions below.

For accessing the webcomponent in a separated docker in the browser you will need a server (e.g. webpack dev-server) that is hosting a page which includes the webcomponent tag, as well as the script defining it. This page needs to be hosted on port 8080 as specified in your docker-compose file.

Installation

Install Docker (with Docker Compose) locally on your machine.

Start the docker containers

• Create a .env file:
  cp .env.example .env
• [Optional] Adjust port numbers in .env if they have conflicts with services already running on your machine
• Start the store with:
  docker-compose up -d
• Wait until the containers are running. You can check the current state with:
  docker-compose logs --tail 500 -f
• Access the store in your browser on:
  localhost:8999
• Access webcomponent running in separated docker in your browser on:
  localhost:8998

Publish a new version of your webcomponent

• Increase version number WC_VERSION in your .env file
• Then run: docker-compose up wcstore-cli

Stop the docker containers

• docker-compose stop

Delete your webcomponents from the store

• [sudo] rm -f workspace
• docker-compose rm -f -v postgres

Information

Support

For support, please contact [email protected].

Contributing

If you'd like to contribute, please follow the following instructions:

• Fork the repository.
• Checkout a topic branch from the main branch.
• Make sure the tests are passing.
• Create a pull request against the main branch.

A more detailed description have a look at our Getting Started Guide.

Documentation

More documentation can be found at https://docs.opendatahub.com.

License

The code in this project is licensed under the GNU AFFERO GENERAL PUBLIC LICENSE Version 3 license. See the LICENSE.md file for more information.

REUSE

This project is REUSE compliant, more information about the usage of REUSE in NOI Techpark repositories can be found here.

Since the CI for this project checks for REUSE compliance you might find it useful to use a pre-commit hook checking for REUSE compliance locally. The pre-commit-config file in the repository root is already configured to check for REUSE compliance with help of the pre-commit tool.

Install the tool by running:

pip install pre-commit

Then install the pre-commit hook via the config file by running:

pre-commit install