App Shell Component
A web component for building SPAs consisting of one topic with multiple activities. Handles login, language selection, activity switching, menus etc.
You can install this component via npm:
npm i @dbp-toolkit/app-shellUsage
<dbp-app-shell src="/example.topic.metadata.json"></dbp-app-shell>
<script type="module" src="node_modules/@dbp-toolkit/app-shell/dist/dbp-app-shell.js"></script>Attributes
-
lang(optional, default:de): set todeorenfor German or English- example
<dbp-app-shell lang="de"></dbp-app-shell>
- example
-
src: The path to a topic metadata file (json) -
base-path(optional, default:/): An absolute base path for routing -
entry-point-url: Entry point URL to access the API -
keycloak-config: An object with the following keys: url, realm, clientId, silentCheckSsoRedirectUri, scope -
matomo-url(optional): set to your Matomo server (required only for tracking)- example
<dbp-app-shell matomo-url="https://my-matomo.tld"></dbp-app-shell>
- example
-
matomo-site-id(optional): set to your site id (required only for tracking)- example
<dbp-app-shell matomo-site-id="456789"></dbp-app-shell>
- example
Emitted attributes
The component emits dbp-set-property events for these attributes:
-
langto propagate a language change (possible valuesen,de) -
requested-login-status(possible valueslogged-in,logged-out)
Topic Metadata
{
"name": {
"de": "Beispiel",
"en": "Example"
},
"short_name": {
"de": "Beispiel",
"en": "Example"
},
"description": {
"de": "Ich bin eine Beschreibung der Applikation",
"en": "I am a description of this application"
},
"routing_name": "example",
"activities": [
{"path": "example.metadata.json", "visible": true}
],
"attributes": []
}Activity Metadata
{
"element": "dbp-activity-example",
"module_src": "dbp-activity-example.js",
"routing_name": "activity-example",
"name": {
"de": "Beispielaktivität",
"en": "Example Activity"
},
"short_name": {
"de": "Beispielaktivität",
"en": "Example Activity"
},
"description": {
"de": "Eine Beschreibung",
"en": "A Description"
}
}Local development
# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
cd toolkit/packages/app-shell
# install dependencies
yarn install
# constantly build dist/bundle.js and run a local web-server on port 8002
yarn run watch
# run tests
yarn test
# build local packages in dist directory
yarn run buildJump to http://localhost:8002 and you should get a Single Sign On login page.