Recipes

A webcomponent to list recipes and show all details of a recipe. It is possible to display the recipes as cards or as a list and it exists a recipe search functionality. In addition it can be displayed only selected items or the details page of a single one.

Do you want to see it in action? Go to our web component store!

Recipes

Usage

<script src="./odh-recipe.min.js"></script>


<odh-recipe></odh-recipe>

Attributes

content-id-list

List of content Ids separated by a comma. Example: "1,2,3"

Type: String
Default: null

This is the article ID inside the Open Data Hub Tourism API. You can use the following command to retrieve IDs:

GET https://tourism.opendatahub.bz.it/api/ArticleReduced
    ?language=it
    &articletype=rezeptartikel

Make sure to put the correct language. The IDs are sometimes only available in a certain language, and therefore you might get an empty result.

See https://tourism.opendatahub.bz.it/swagger/ui/index#/Article for details.

language

Language of the data

Type: string
Options: ["de", "en", "it"]
Default: "de"

page-size

Number of items that are shown in one page

Type: Number
Default: 20

default-presentation

Default presentation of recipe list

Type: string
Options: ["list", "grid"]
Default: "list"

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:

ToDo: Check the prerequisites
Node 12 / 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-recipe.git

Change directory:

ToDo: cd webcomp-recipe/

Dependencies

Download all dependencies:

npm install

Build

Build and start the project:

npm run start

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

Tests and linting

The tests and the linting can be executed with the following commands:

npm run lint

!! There are currently no tests available.

Deployment

To create the distributable files, execute the following command:

npm run build

After the build the web-component can be tested by opening /dist/demo.html

Docker environment

For the project a Docker environment is already prepared and ready to use with all necessary prerequisites.

These Docker containers are the same as used by the continuous integration servers.

Installation

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

Dependenices

First, install all dependencies:

docker-compose run --rm app /bin/bash -c "npm install"

Start and stop the containers

Before start working you have to start the Docker containers:

docker-compose up --build --detach

After finished working you can stop the Docker containers:

docker-compose stop

Running commands inside the container

When the containers are running, you can execute any command inside the environment. Just replace the dots ... in the following example with the command you wish to execute:

docker-compose run --rm app /bin/bash -c "..."

Some examples are:

docker-compose run --rm app /bin/bash -c "npm run test"

Information

Support

For support, please contact help@opendatahub.bz.it.

Contributing

If you'd like to contribute, please follow the Contributor Guidelines that can be found at https://github.com/noi-techpark/odh-docs/wiki/Contributor-Guidelines%3A-Getting-started.

Documentation

More documentation can be found at https://opendatahub.readthedocs.io/en/latest/index.html.

Boilerplate

The project uses this boilerplate: https://github.com/noi-techpark/webcomp-boilerplate.

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.