gov-katalogy-vizualni-komponenty
A set of visual components that are used to present public data from RPP catalogs on OVM portals. Components load data online via the RPP GraphQL API. Technically, these are JS components that you just need to place in the page.
List of components:
- navigation "public administration services"
- navigation "about life in the Czech Republic"
- detail of PA service description
- detail of assistance service
- detail information
- detail of the signpost
- detail of the general possibility of appeal
- SDG index
Usage
<!-- optional -->
<link rel="stylesheet" href="https://portal.gov.cz/katalogy/artefakty/dist/ds/latest/build/styles.min.css">
<link rel="stylesheet" href="https://portal.gov.cz/katalogy/artefakty/dist/ds/latest/build/print.min.css">
<script src="https://portal.gov.cz/katalogy/artefakty/dist/widgets/latest/loader.js"></script>
<script>
window.onload = function () {
const govWidget = new GovWidget({
manifestPath: '/gov-manifest.json',
locale: "cs"
});
const govPaServiceNav = new GovPaServiceNav({
el: '#gov-component-holder',
});
govWidget.use(govPaServiceNav);
govWidget.mount();
}
</script>
<div id="gov-component-holder"></div>
Manifest:
-
meta.title- Page title format. -
widgets- Configuration of individual widgets. -
widgets.(ASL|DPS|DPS_NAV|INF|OMO|OZC_NAV|RZC).basePath.(cs|en)- Base path of widget page. -
widgets.(ASL|DPS|DPS_NAV|INF|OMO|OZC_NAV|RZC).url.(cs|en)- URI of widget page for navigation between widgets. -
widgets.(ASL|DPS|DPS_NAV|INF|OMO|OZC_NAV|RZC).mode- Navigation mode. Valuehistoryorhash. -
widgets.(DPS_NAV).providers.ovm|categoryOvm- List ofOvmcodes andCategoryOvmcodes that restrict the selection of services in the navigation menu of the Public administration services. If neither Ovm codes nor CategoryOvm codes are selected, the complete menu is displayed. Otherwise, all services assigned to the specified list of OVM codes or CategoryOvm codes are selected.
{
"meta":{
"title":"%s - gov.cz"
},
"widgets":{
"ASL":{
"basePath":{
"cs":"/asistencni-sluzby",
"en":"/en/asistencni-sluzby"
},
"mode":"history",
"url":{
"cs":"/asistencni-sluzby",
"en":"/en/asistencni-sluzby"
}
},
"DPS":{
"basePath":{
"cs":"/sluzby-vs",
"en":"/en/sluzby-vs"
},
"mode":"history",
"url":{
"cs":"/sluzby-vs",
"en":"/en/sluzby-vs"
}
},
"DPS_NAV":{
"basePath":{
"cs":"/sluzby-verejne-spravy",
"en":"/en/sluzby-verejne-spravy"
},
"mode":"history",
"url":{
"cs":"/sluzby-vs",
"en":"/en/sluzby-vs"
},
"providers": {
"ovm": ["00023833"],
"categoryOvm": ["KO105", "KO221"]
}
},
"INF":{
"basePath":{
"cs":"/informace",
"en":"/en/informace"
},
"mode":"history",
"url":{
"cs":"/informace",
"en":"/en/informace"
}
},
"OMO":{
"basePath":{
"cs":"/obecne-moznosti-odvolani",
"en":"/en/obecne-moznosti-odvolani"
},
"mode":"history",
"url":{
"cs":"/obecne-moznosti-odvolani",
"en":"/en/obecne-moznosti-odvolani"
}
},
"OZC_NAV":{
"basePath":{
"cs":"/o-zivote-v-cr",
"en":"/en/o-zivote-v-cr"
},
"mode":"history",
"url":{
"cs":"/rozcestniky",
"en":"/en/rozcestniky"
}
},
"RZC":{
"basePath":{
"cs":"/rozcestniky",
"en":"/en/rozcestniky"
},
"mode":"history",
"url":{
"cs":"/rozcestniky",
"en":"/en/rozcestniky"
}
}
}
}Requirements
Node.js ^14.0, npm ^6
Set up config file
Copy /src/core/config/config.js.dist to a new file /src/core/config/config.js and edit it.
-
dsDomain- URL path of the design system. -
assetsDomain- URL path of static assets (images, etc.). Same as dsDomain. -
widgetDomain- URL path of widgets. -
graphqlDomain- URL path to the exposed GraphQL backend. -
assetsDir- Relative path to web components. GOV UI components. -
catalogueRestUrl- URL path to the exposed REST API. -
featureMap- Boolean value (true/false) – enable or disable maps. -
eselDomainUrl- URL path to the ESEL website.
Local Development Configuration (e.g., using VS Code)
Usage
export default {
dsDomain: 'https://newpvsstorage.z16.web.core.windows.net/ds',
assetsDomain: 'https://portal.gov.cz/katalogy/artefakty/dist/ds-pvs/latest/',
widgetDomain: 'https://newpvsstorage.z16.web.core.windows.net/',
graphqlDomain: 'https://dev.portal.gov.cz/katalogy/api',
assetsDir: '',
catalogueRestUrl: 'https://dev.portal.gov.cz/katalogy/artefakty/rpp-pub-integrace-be/rest',
featureMap: true,
eselDomainUrl: 'https://esbirka.cz'
};Build Configuration for Production in a Container
The following build is used for production environments in a container. Constants wrapped in {{ }} are expected to be provided by the container environment.
build: {
dsDomain: '{{DS_DOMAIN}}',
assetsDomain: '{{ASSETS_DOMAIN}}',
widgetDomain: '{{WIDGET_DOMAIN}}',
graphqlDomain: '{{GRAPHQL_DOMAIN}}',
catalogueRestUrl: '{{CATALOGUE_REST_URL}}',
featureMap: '{{FEATURE_MAP}}',
eselDomainUrl: '{{ESEL_DOMAIN_URL}}', assetsDir: '',
}Build Configuration for Deployment
To create a build for deployment without a container (e.g., using local NGINX), you need to modify the build section in the file index.js (line 264).
An example is provided in the file as a comment and looks like this:
build: {
dsDomain: 'https://newpvsstorage.z16.web.core.windows.net/ds',
assetsDomain: 'https://newpvsstorage.z16.web.core.windows.net/ds',
widgetDomain: 'https://newpvsstorage.z16.web.core.windows.net/',
graphqlDomain: 'https://dev.portal.gov.cz/katalogy/api',
assetsDir: '',
catalogueRestUrl: 'https://dev.portal.gov.cz/katalogy/artefakty/rpp-pub-integrace-be/rest',
featureMap: true,
eselDomainUrl: 'https://esbirka.cz',
}Commands
npm run serve for developing
npm run build for build a production modules
npm run build:build for build a production version with single file loader
Git
Run this command
git config branch.autosetuprebase always
It will setup your local repository to use rebase instead of merge on git pull. Rebase is better because merge creates ugly and confusing patterns. Merge should be used only between different branches, not within a single branch.
Git flow
In our projects we use enhanced git system name git flow. Every project should be a git flow repo (you can turn classic repo into git-flow enabled one via command git flow init) For more informations about git flow, installation process and usage visit https://danielkummer.github.io/git-flow-cheatsheet/ Our branches names are separated by - (example: feature-new-feature or realease-v1.3.0). There is no "version prefix" (one of git init questions), but we add it manually.
v.1.1