diff --git a/demo/README.md b/demo/README.md
index f9100d3e28da20257586ca52a1b9d67ea042542c..ff90a3706c5b0641d1c01ef77207e9b1af7e86e1 100644
--- a/demo/README.md
+++ b/demo/README.md
@@ -13,3 +13,9 @@ yarn run watch-local
```
You can then open <http://127.0.0.1:8085/>.
+
+## Adding demo pages
+
+1) Add demo activity path to `input` list of `rollup.config.js`
+2) Create `assets/*.metadata.json` file like `assets/file-handling.metadata.json`
+3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-demo.topic.metadata.json.ejs`
diff --git a/demo/assets/.htaccess.ejs b/demo/assets/.htaccess.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..f2512eea05f890b3a3137ceedee5ea2830069238
--- /dev/null
+++ b/demo/assets/.htaccess.ejs
@@ -0,0 +1,12 @@
+DirectoryIndex <%= getUrl(name + '.html') %>
+<FilesMatch "^(de|en|)$">
+ FallbackResource <%= getUrl(name + '.html') %>
+</FilesMatch>
+
+Header set Cache-Control "must-revalidate, max-age=60"
+Header set Content-Security-Policy "default-src 'self' 'unsafe-eval' 'unsafe-inline' analytics.tugraz.at <%= keyCloakServer %> <%= entryPointURL %> httpbin.org <%= nextcloudBaseURL %> www.handy-signatur.at <%= pdfAsQualifiedlySigningServer %>; img-src * blob: data:"
+
+# Apache adds a "-gzip" suffix to the etag when it uses gzip but doesn't
+# take that into account when receiving requests.
+# See https://bz.apache.org/bugzilla/show_bug.cgi?id=45023
+RequestHeader edit "If-None-Match" '^"((.*)-(gzip|br))"$' '"$1", "$2"'
\ No newline at end of file
diff --git a/demo/assets/Makefile b/demo/assets/Makefile
new file mode 100644
index 0000000000000000000000000000000000000000..38e5a75ecc8f5a2342e5f671bcb1d232b139df67
--- /dev/null
+++ b/demo/assets/Makefile
@@ -0,0 +1,9 @@
+SOURCE=logo.svg
+
+all: icon-192.png icon-512.png
+
+icon-192.png: $(SOURCE)
+ inkscape $(SOURCE) --export-png $@ -w 192 -h 192
+
+icon-512.png: $(SOURCE)
+ inkscape $(SOURCE) --export-png $@ -w 512 -h 512
diff --git a/demo/assets/common.metadata.json b/demo/assets/common.metadata.json
new file mode 100644
index 0000000000000000000000000000000000000000..1b8147b70b1285f653f565a66b5ad592beeb3487
--- /dev/null
+++ b/demo/assets/common.metadata.json
@@ -0,0 +1,17 @@
+{
+ "element": "dbp-common-demo",
+ "module_src": "dbp-common-demo.js",
+ "routing_name": "common",
+ "name": {
+ "de": "Common",
+ "en": "Common"
+ },
+ "short_name": {
+ "de": "Common",
+ "en": "Common"
+ },
+ "description": {
+ "de": "Gemeinsame Web Components",
+ "en": "Common web components"
+ }
+}
diff --git a/demo/assets/dbp-toolkit-demo.topic.metadata.json.ejs b/demo/assets/dbp-toolkit-demo.topic.metadata.json.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..c0bc259626a783f2deb203dbb3be478fde144f72
--- /dev/null
+++ b/demo/assets/dbp-toolkit-demo.topic.metadata.json.ejs
@@ -0,0 +1,21 @@
+{
+ "name": {
+ "de": "Toolkit Demo",
+ "en": "Toolkit Demo"
+ },
+ "short_name": {
+ "de": "Toolkit Demo",
+ "en": "Toolkit Demo"
+ },
+ "description": {
+ "de": "Mit dieser Applikation die Funktion der DBP Web Components testen",
+ "en": "With this application you can test the function of the DBP web components"
+ },
+ "routing_name": "toolkit-demo",
+ "activities": [
+ {"path": "file-handling.metadata.json"},
+ {"path": "knowledge-base-web-page-element-view.metadata.json"},
+ {"path": "common.metadata.json"}
+ ],
+ "attributes": []
+}
\ No newline at end of file
diff --git a/demo/assets/file-handling.metadata.json b/demo/assets/file-handling.metadata.json
new file mode 100644
index 0000000000000000000000000000000000000000..a63f1d51ae3e6b8005e30940440c284eb840b0c9
--- /dev/null
+++ b/demo/assets/file-handling.metadata.json
@@ -0,0 +1,17 @@
+{
+ "element": "dbp-person-select-demo",
+ "module_src": "dbp-person-select-demo.js",
+ "routing_name": "person-select",
+ "name": {
+ "de": "Personensuche",
+ "en": "Person search"
+ },
+ "short_name": {
+ "de": "Personensuche",
+ "en": "Person search"
+ },
+ "description": {
+ "de": "Erlaubt das Suchen von Personen",
+ "en": "Allows searching for persons"
+ }
+}
diff --git a/demo/assets/icon-192.png b/demo/assets/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f77b0096343b0d139e7a5f58d376808f2bcdf97
Binary files /dev/null and b/demo/assets/icon-192.png differ
diff --git a/demo/assets/icon-512.png b/demo/assets/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e2dd43e47afdd6866e0466ceed46b1b64bc08dd
Binary files /dev/null and b/demo/assets/icon-512.png differ
diff --git a/demo/assets/knowledge-base-web-page-element-view.metadata.json b/demo/assets/knowledge-base-web-page-element-view.metadata.json
new file mode 100644
index 0000000000000000000000000000000000000000..d3abb3afd2f664d4a1552d7030d7ad7bb376a967
--- /dev/null
+++ b/demo/assets/knowledge-base-web-page-element-view.metadata.json
@@ -0,0 +1,17 @@
+{
+ "element": "dbp-knowledge-base-web-page-element-view-demo",
+ "module_src": "dbp-knowledge-base-web-page-element-view-demo.js",
+ "routing_name": "knowledge-base-web-page-element-view",
+ "name": {
+ "de": "dbp-knowledge-base-web-page-element-view",
+ "en": "dbp-knowledge-base-web-page-element-view"
+ },
+ "short_name": {
+ "de": "dbp-knowledge-base-web-page-element-view",
+ "en": "dbp-knowledge-base-web-page-element-view"
+ },
+ "description": {
+ "de": "Erlaubt das Einfügen von Webinhalten",
+ "en": "Allows the inserting of web content"
+ }
+}
diff --git a/demo/assets/logo.svg b/demo/assets/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8954aee0b536acd649f57d47c71f17446158cfeb
--- /dev/null
+++ b/demo/assets/logo.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="int-header-logo-img"
+ width="105.82501pt"
+ height="105.82501pt"
+ version="1.1"
+ viewBox="0 0 141.10003 141.10139"
+ sodipodi:docname="tu-graz-logo-white.svg"
+ inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+ <metadata
+ id="metadata35">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs33" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="2302"
+ inkscape:window-height="1379"
+ id="namedview31"
+ showgrid="false"
+ units="pt"
+ inkscape:zoom="1.4182226"
+ inkscape:cx="162.3796"
+ inkscape:cy="-160.98113"
+ inkscape:window-x="0"
+ inkscape:window-y="54"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="int-header-logo-img" />
+ <g
+ transform="matrix(1.25,0,0,-1.25,0,96.4832)"
+ id="g28">
+ <g
+ transform="scale(0.1)"
+ id="g26">
+ <path
+ d="M 0,103.73 H 207.45 V 311.19 L 0,311.2 Z"
+ style="fill:#e4154b"
+ id="path2"
+ inkscape:connector-curvature="0" />
+ <path
+ d="M 228.19,103.73 H 435.65 V 311.19 H 228.19 Z"
+ style="fill:#e4154b"
+ id="path4"
+ inkscape:connector-curvature="0" />
+ <path
+ d="M 456.41,103.73 H 663.85 V 311.19 H 456.41 Z"
+ style="fill:#e4154b"
+ id="path6"
+ inkscape:connector-curvature="0" />
+ <path
+ d="M 103.72,0 H 311.19 V 207.46 H 103.72 Z"
+ style="fill:#e4154b"
+ id="path8"
+ inkscape:connector-curvature="0" />
+ <path
+ d="M 352.68,207.46 H 560.12 V 414.92 H 352.68 Z"
+ style="fill:#e4154b"
+ id="path10"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 751.04,277.91 h -66.426 v 33.195 h 171.19 V 277.91 H 789.397 V 104.18 h -38.359 v 173.73"
+ style="fill:#fffff4"
+ id="path12"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 1048.3,180.22 c 0,-12.461 -2.25,-23.711 -6.72,-33.75 -4.5,-10.039 -10.61,-18.555 -18.36,-25.567 -7.76,-7.031 -16.9,-12.421 -27.503,-16.21 -10.605,-3.809 -22.109,-5.7036 -34.551,-5.7036 -12.422,0 -23.945,1.8946 -34.551,5.7036 -10.605,3.789 -19.824,9.179 -27.656,16.21 -7.851,7.012 -13.984,15.528 -18.34,25.567 -4.394,10.039 -6.582,21.289 -6.582,33.75 v 130.89 h 38.379 V 181.52 c 0,-5.039 0.801,-10.351 2.442,-15.898 1.64,-5.547 4.336,-10.664 8.125,-15.332 3.789,-4.668 8.789,-8.516 15.039,-11.523 6.211,-3.008 13.926,-4.512 23.144,-4.512 9.199,0 16.914,1.504 23.145,4.512 6.23,3.007 11.25,6.855 15.039,11.523 3.77,4.668 6.48,9.785 8.12,15.332 1.63,5.547 2.45,10.859 2.45,15.898 v 129.59 h 38.38 V 180.22"
+ style="fill:#ffffff"
+ id="path14"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 832.56,75.664 c -7.597,3.2812 -17.46,4.8632 -25.332,4.8632 -22.929,0 -35.605,-14.434 -35.605,-33.184 0,-18.613 12.383,-32.637 33.34,-32.637 5.351,0 9.59,0.5274 12.969,1.3086 v 23.867 h -20.84 v 14.414 h 39.687 V 4.9988 c -10.41,-2.6172 -21.25,-4.707 -31.816,-4.707 -31.797,0 -53.906,14.805 -53.906,45.742 0,31.348 20.566,48.906 53.906,48.906 11.406,0 20.41,-1.4453 28.867,-3.8086 l -1.27,-15.469"
+ style="fill:#fffff8"
+ id="path16"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 856.2,69.375 h 16.758 V 54.043 h 0.293 c 0.84,6.289 8.574,16.914 19.824,16.914 1.836,0 3.828,0 5.782,-0.5273 v -17.715 c -1.68,0.918 -5.059,1.4454 -8.457,1.4454 -15.333,0 -15.333,-17.832 -15.333,-27.52 V 1.8551 H 856.2 v 67.52"
+ style="fill:#fffff8"
+ id="path18"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 913.75,65.84 c 7.324,3.1446 17.187,5.1172 25.215,5.1172 22.09,0 31.23,-8.5351 31.23,-28.457 v -8.6523 c 0,-6.8165 0.156,-11.934 0.293,-16.914 0.137,-5.1172 0.41,-9.8242 0.84,-15.078 h -16.602 c -0.703,3.5352 -0.703,8.0078 -0.839,10.098 h -0.293 c -4.36,-7.4618 -13.81,-11.661 -22.38,-11.661 -12.793,0 -25.332,7.207 -25.332,20.059 0,10.078 5.195,15.976 12.383,19.258 7.187,3.2812 16.464,3.9453 24.355,3.9453 h 10.41 c 0,10.879 -5.195,14.551 -16.328,14.551 -8.008,0 -16.035,-2.8907 -22.363,-7.3438 l -0.586,15.078 z m 22.11,-52.715 c 5.782,0 10.274,2.3633 13.223,6.0352 3.105,3.8086 3.945,8.6523 3.945,13.906 h -8.164 c -8.437,0 -20.957,-1.3086 -20.957,-11.68 0,-5.7617 5.195,-8.2617 11.953,-8.2617"
+ style="fill:#fffff8"
+ id="path20"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 985.69,69.375 h 57.422 V 54.961 l -36.04,-39.473 h 37.31 V 1.855 h -60.235 v 14.297 l 36.715,39.59 H 985.69 v 13.633"
+ style="fill:#fffff8"
+ id="path22"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 1059.6,0 h 69.102 V 69.121 H 1059.6 Z"
+ style="fill:#e4154b"
+ id="path24"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+</svg>
diff --git a/demo/assets/manifest.json b/demo/assets/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..6e1b9c8a1e81cf59793c1b66ae4e738c23959034
--- /dev/null
+++ b/demo/assets/manifest.json
@@ -0,0 +1,21 @@
+{
+ "short_name": "Toolkit Demo",
+ "name": "Toolkit Demo",
+ "start_url": "./dbp-toolkit-demo.html",
+ "icons": [
+ {
+ "src": "local/dbp-toolkit-demo/icon-192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "local/dbp-toolkit-demo/icon-512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "background_color": "#245B78",
+ "display": "standalone",
+ "theme_color": "#E4154B"
+}
+
diff --git a/demo/assets/silent-check-sso.html b/demo/assets/silent-check-sso.html
new file mode 100644
index 0000000000000000000000000000000000000000..94fe2268cbd7ff3f752f2093bb3cddd6d10b6388
--- /dev/null
+++ b/demo/assets/silent-check-sso.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+ <script>
+ parent.postMessage(location.href, location.origin)
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/package.json b/demo/package.json
index 568d95ced8af05933dec9600b88f969aaa249478..16983cd342a97fd3212db58f2d1ee86105c65b46 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -1,5 +1,5 @@
{
- "name": "toolkit-demo",
+ "name": "dbp-toolkit-demo",
"version": "1.0.0",
"main": "src/toolkit-demo.js",
"license": "LGPL-2.1-or-later",
diff --git a/demo/rollup.config.js b/demo/rollup.config.js
index 6bfabfa9a73dc42f323c011f0ec7712a783a7cee..a7b6d248d957ab21b7e2e7d7b69bf9a20efea157 100644
--- a/demo/rollup.config.js
+++ b/demo/rollup.config.js
@@ -125,6 +125,9 @@ function getBuildInfo() {
export default {
input: (build != 'test') ? [
'src/' + pkg.name + '.js',
+ '../packages/person-select/src/dbp-person-select-demo.js',
+ '../packages/knowledge-base-web-page-element-view/src/dbp-knowledge-base-web-page-element-view-demo.js',
+ '../packages/common/dbp-common-demo.js',
] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',