This project provide a HTML user portal for view open data datasets. It's based on the piveau ui project from Fraunhofer FOKUS.
You can use this project as npm package. Get it from npmjs.com with command:
npm i peacock-user-ui
or
You can use an out-of-the-box CDN version and just include main files. All files located at:
https://unpkg.com/peacock-user-ui@latest/dist/index.html
or
A pre-configured demo is located at:
https://opendata-guru.github.io/peacock-user-ui/
If you want to contribute to this projekt (report a bug, wish a new feature, improve the documentation, edit the code, ...), just go to the contribution page.
The following table shortly describes the configurable values in peacock-user-ui/static/js/config.js
.
Key | Description | Default value |
---|---|---|
CONFIG_APP_TITLE | Peacock |
|
CONFIG_APP_DATA_URL | Set the API data endpoint. You can use e.g. CKAN endpoints like 'https://www.govdata.de/ckan/api/action/' and 'https://www.govdata.de/ckan/api/action/package_search?q=spending'. Sometimes CORS are misconfigured and you need an data proxy like 'https://opendata.guru/proxy/cors?url=https://www.govdata.de/ckan/api/action/' and 'https://opendata.guru/proxy/cors?url=https://opendata.jena.de/api/3/action/package_search?rows=9999'. It's also possible to use local path to data files, try '/data/ckan-lazy.json' and '/data/ckan.json'. | https://data.europa.eu/api/hub/search/ |
CONFIG_APP_DATA_SERVICE | The Service defines the data format data url uses. Use piveau for EU data portal, ckan for CKAN API portals and ckan-file for local CKAN json files. Use an object/function for custom service. |
piveau |
CONFIG_APP_DATA_CACHE_BUSTING | used for file data services e.g. ckan-file |
true |
CONFIG_APP_GAZETTEER_URL | https://data.europa.eu/api/hub/search/gazetteer/ |
|
CONFIG_APP_UPLOAD_URL | https://www.europeandataportal.eu/data/api/ |
|
CONFIG_APP_MATOMO_URL | empty |
|
CONFIG_APP_AUTH_ENABLE | Enable Auth to display a log in button for admin functionality. |
false |
CONFIG_APP_AUTH_SERVICE | Set the authentification method keycloak or zero (for fake login auth). |
keycloak |
CONFIG_APP_ENABLE_DATASET_CATEGORIES | false | |
CONFIG_APP_ENABLE_DATASET_SIMILARDATASETS | false | |
CONFIG_APP_ENABLE_DATASET_FEEDBACK | false | |
CONFIG_APP_ENABLE_FILTER_GAZETTEER | false | |
CONFIG_APP_ENABLE_FILTER_OPERATOR | false | |
CONFIG_APP_ENABLE_FAVORITES | false | |
CONFIG_APP_ROUTER_BASE | Set the path of the url. Default is an empty string, works for every url like https://some-domain.com or https://sub.domain.com . Set value to /my-path/ for urls like https://some-domain.com/my-path/ . |
empty |
CONFIG_APP_ROUTER_LIB_BASE | Set the path of this library. Use the same value as in CONFIG_APP_ROUTER_BASE or 'https://unpkg.com/peacock-user-ui@latest/dist/' when you using the CDN. |
empty |
CONFIG_APP_ROUTER_REDIRECT_ROOT_TO | If you open the website without path ('/' ) the router will redirect to a new page. Set to a default route name e.g. to 'Datasets' or to a own router name e.g. in CONFIG_APP_ROUTER_ROUTE_1_NAME . |
'Datasets' |
CONFIG_APP_ROUTER_MODE | Use 'history' for common urls like 'domain.com/datasets'. Use 'hash' for gitlab environment and urls like 'domain.com/#/datasets'. | 'history' |
CONFIG_APP_DATASET_DISTRIBUTION_CUSTOM_HTML | Add an additionally custom distribution entry on the dataset page. HTML tags are allowed. | empty |
CONFIG_APP_DATASET_INFO_CUSTOM_HTML | Add a custom info div on the dataset page. HTML tags are allowed. | empty |
Customize the shown language of the website. Default is English.
You can:
Key | Description | Default value |
---|---|---|
CONFIG_APP_LOCALE | Used display language. Use e.g. de for German. |
en |
CONFIG_APP_LOCALE_FALLBACK | Used fallback language if no translations for another language is available. | en |
CONFIG_APP_LANGUAGES | Add own translation. | {} |
CONFIG_APP_LOAD_LANGUAGE_1 | Two-letter language code (ISO 639-1) of additional language. Translation will be loaded automatically, relative to CONFIG_APP_ROUTER_LIB_BASE . Use e.g. de for German. |
'' |
CONFIG_APP_LOAD_LANGUAGE_URL_1 | Overwrite file location of translation file. | '' |
Load one of the predefined language translation:
CONFIG_APP_LOAD_LANGUAGE_1 = 'de';
Use the new language:
CONFIG_APP_LOCALE = 'de';
Append a new string to English and German translation:
CONFIG_APP_LANGUAGES = {
'en': {
'message': {
'mystring': 'My string'
}
},
'de': {
'message': {
'mystring': 'Mein Text'
}
}
};
Use the new string:
CONFIG_APP_TITLE = message.mystring
Append a new language translation:
CONFIG_APP_LANGUAGES = {
'tlh': {
'message': {
'hello': 'nuqneH',
...
}
}
};
Use the new language:
CONFIG_APP_LOCALE = 'tlh'
You can embed own static HTML files. The header and footer will be added automatically.
Key | Description | Default value |
---|---|---|
CONFIG_APP_ROUTER_ROUTE_1_NAME to CONFIG_APP_ROUTER_ROUTE_9_NAME | empty |
|
CONFIG_APP_ROUTER_ROUTE_1_PATH to CONFIG_APP_ROUTER_ROUTE_9_PATH | empty |
|
CONFIG_APP_ROUTER_ROUTE_1_COMPONENT to CONFIG_APP_ROUTER_ROUTE_9_COMPONENT | Leave this value empty to load a file as static page. Or use 'Datasets' to link to Dataset Component. |
empty |
CONFIG_APP_ROUTER_ROUTE_1_FILE to CONFIG_APP_ROUTER_ROUTE_9_FILE | empty |
|
CONFIG_APP_ROUTER_ROUTE_1_REQUIRES_AUTH to CONFIG_APP_ROUTER_ROUTE_9_REQUIRES_AUTH | Set to true if your page is protected, set to false to access without login. |
true |
Use relative URL
s for default pages (e.g. '/datasets'
) or router pages (see above) (e.g. '/imprint'
). Use URL
s starting with https://
to navigate to other locations.
Key | Description | Default value |
---|---|---|
CONFIG_APP_HEADER_LOGO_TEXT | Set your portal name, e.g. 'My Data Portal' . |
empty |
CONFIG_APP_HEADER_LOGO_IMAGE_SRC | empty |
|
CONFIG_APP_HEADER_LOGO_IMAGE_DESCRIPTION | empty |
|
CONFIG_APP_HEADER_NAV_1_URL | '/datasets' |
|
CONFIG_APP_HEADER_NAV_1_TITLE | 'message.header.navigation.data.datasets' |
|
CONFIG_APP_HEADER_NAV_2_URL | '/catalogues' |
|
CONFIG_APP_HEADER_NAV_2_TITLE | 'message.header.navigation.data.catalogues' |
|
CONFIG_APP_HEADER_NAV_3_URL to CONFIG_APP_HEADER_NAV_9_URL | empty |
|
CONFIG_APP_HEADER_NAV_3_TITLE to CONFIG_APP_HEADER_NAV_9_TITLE | empty |
|
CONFIG_APP_ENABLE_DARK_MODE | Show button to switch dark mode and light mode. | false |
CONFIG_APP_HEADER_CUSTOM_HTML | Add a additionally custom header. HTML tags are allowed. | empty |
Key | Description | Default value |
---|---|---|
CONFIG_APP_FOOTER_LOGO_TEXT | Set your footer logo name, e.g. 'Peacock User UI 🦚' . |
empty |
CONFIG_APP_FOOTER_LOGO_IMAGE_SRC | empty |
|
CONFIG_APP_FOOTER_LOGO_IMAGE_DESCRIPTION | empty |
|
CONFIG_APP_FOOTER_LOGO_URL | Set the URI of the link, e.g. 'https://github.com/opendata-guru/peacock-user-ui' . |
'/' |
CONFIG_APP_FOOTER_NAV_1_URL | '/imprint' |
|
CONFIG_APP_FOOTER_NAV_1_TITLE | 'message.navigation.navItems.imprint' |
|
CONFIG_APP_FOOTER_NAV_2_URL | '/privacypolicy' |
|
CONFIG_APP_FOOTER_NAV_2_TITLE | 'message.navigation.navItems.privacyPolicy' |
|
CONFIG_APP_FOOTER_NAV_3_URL to CONFIG_APP_FOOTER_NAV_9_URL | empty |
|
CONFIG_APP_FOOTER_NAV_3_TITLE to CONFIG_APP_FOOTER_NAV_9_TITLE | empty |
|
CONFIG_APP_FOOTER_CUSTOM_HTML | Add a additionally custom footer. HTML tags are allowed. | empty |
The following table and example file shortly describes the configurable values.
The custom-theme.scss file is located at peacock-user-ui/user-config/custom-theme.scss
by default. It contains Bootstrap 4 scss variables and overrides the default Bootstrap values. It must be used to change any general styling rules like spacing, sizes, colors etc. You can also add your own color variables to use them via Bootstrap classes or add other new variables.
The UserImprint.vue and UserPrivacyPolicy.vue files are located at peacock-user-ui/src/components/user/
. They are more or less empty vue components where you should implement your Imprint/PrivacyPolicy pages in if you do not use external pages for those cases (configurable in glue-config.js).
The index.js file is located at peacock-user-ui/config/index.js
by default and is generated by the Vue-Webpack-Bundle. It contains several configurations for the development and production build process.
The file css/app.vendors.css
was renamed to vendors.css
.
Please update the index.html
to reflect the changes.
old:
<link href="https://unpkg.com/peacock-user-ui@latest/dist/css/app.vendors.css" rel=stylesheet>
now:
<link href="https://unpkg.com/peacock-user-ui@latest/dist/css/vendors.css" rel=stylesheet>