.gitignore

 node_modules
 toolkit-showcase/dist
 .idea
-yarn-error.log
\ No newline at end of file
+yarn-error.log
+package-lock.json

.gitlab-ci.yml

-image: registry.gitlab.tugraz.at/dbp/web-components/toolkit/main:v1
+image: registry.gitlab.tugraz.at/dbp/web-components/toolkit/main:v2
 
 cache:
   key: ${CI_PROJECT_PATH}
   paths:
     - _yarn_cache
+    - _playwright_cache
+
+variables:
+  PLAYWRIGHT_BROWSERS_PATH: "$CI_PROJECT_DIR/_playwright_cache"
+
+before_script:
+  - yarn config set cache-folder "$CI_PROJECT_DIR/_yarn_cache"
 
 stages:
   - test
@@ -12,72 +19,46 @@ stages:
 test:
   stage: test
   script:
-    - yarn config set cache-folder "$CI_PROJECT_DIR/_yarn_cache"
-    - yarn install
+    - yarn install --frozen-lockfile
     - yarn run test
 
 linting:
   stage: test
-  allow_failure: true
   script:
-    - yarn config set cache-folder "$CI_PROJECT_DIR/_yarn_cache"
-    - yarn install
+    - yarn install --frozen-lockfile
     - yarn run lint
 
 publish:
   stage: deploy
+  environment:
+    name: deploy
+    url: https://www.npmjs.com/search?q=%40dbp-toolkit
   only:
     refs:
-      - deploy
-      - master
+      - main
   script:
     # https://www.npmjs.com/settings/dbp-deploy/tokens
     # NPM_TOKEN needs to be a "Publish" token with 2FA disabled!
     # "Automation" tokens don't work with lerna (even if they would work with "npm publish")
     - echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}' > ~/.npmrc
-    - yarn config set cache-folder "$CI_PROJECT_DIR/_yarn_cache"
-    - yarn install
+    - yarn install --frozen-lockfile
     - yarn run build
     - yarn run publish
 
-.deploy_defaults: &deploy_defaults
+deploy:
+  stage: deploy
   except:
     - schedules
-  stage: deploy
-  script:
-    # Add ssh key
-    - mkdir -p ~/.ssh
-    - echo "${DEPLOY_KEY}" | tr -d '\r' > ~/.ssh/id_rsa
-    - chmod 700 ~/.ssh && chmod 600 ~/.ssh/id_rsa
-    - ssh-keyscan -t rsa "${DEPLOY_HOST}" >> ~/.ssh/known_hosts
-    # Deploy
-    - cd toolkit-showcase
-    - dep deploy "${CI_ENVIRONMENT_NAME}"
-    - echo "Deployed to ${CI_ENVIRONMENT_URL}"
-    # Simple health check
-    - curl --max-time 10 --retry 3 --output /dev/null --silent --show-error --fail --location "${CI_ENVIRONMENT_URL}"
-
-deploy_demo:
   only:
     refs:
+      - main
       - demo
-  environment:
-    name: demo
-    url: https://frontend-demo.tugraz.at/apps/demo
+  inherit:
+    variables: false
   variables:
-    DEPLOY_HOST: mw01-dev.tugraz.at
-    DEPLOY_KEY: "$DEPLOY_SSH_KEY"
-  <<: *deploy_defaults
-
-deploy_development:
-  only:
-    refs:
-      - master
-  environment:
-    name: development
-    url: https://mw-frontend-dev.tugraz.at/apps/demo
-  variables:
-    DEPLOY_HOST: mw01-dev.tugraz.at
-    DEPLOY_KEY: "$DEPLOY_SSH_KEY"
-  <<: *deploy_defaults
-
+    UPSTREAM_PROJECT_PATH: ${CI_PROJECT_PATH}
+    UPSTREAM_COMMIT_BRANCH: ${CI_COMMIT_BRANCH}
+    UPSTREAM_COMMIT_SHA: ${CI_COMMIT_SHA}
+  trigger:
+    project: dbp/deployer
+    strategy: depend

.gitlab-ci/Dockerfile

-FROM debian:buster
+FROM debian:bullseye
 
 ENV LANG C.UTF-8
 ENV DEBIAN_FRONTEND noninteractive
@@ -11,7 +11,7 @@ RUN apt-get update && apt-get install -y \
     curl \
     && rm -rf /var/lib/apt/lists/*
 
-RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - \
+RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - \
     && rm -rf /var/lib/apt/lists/*
 
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
@@ -20,25 +20,20 @@ RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.lis
 RUN apt-get update && apt-get install -y \
     nodejs \
     yarn \
-    chromium \
-    # libgbm1: newer chromium from puppeteer
-    libgbm1 \
-    firefox-esr \
-    composer \
-    php-zip \
     rsync \
     sudo \
     && rm -rf /var/lib/apt/lists/*
 
+# only get dependencies of chromium/firefox
+RUN apt-get update && apt-get install --no-install-recommends -y \
+    chromium \
+    firefox-esr \
+    && apt-get remove -y \
+    chromium \
+    firefox-esr \
+    && rm -rf /var/lib/apt/lists/*
+
 RUN useradd -u 1000 -ms /bin/bash user
 RUN echo 'user ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers
 USER user
 WORKDIR /home/user
-
-# Install deployer globally and add it to PATH
-ENV COMPOSER_HOME="/home/user/.composer"
-RUN mkdir -p "${COMPOSER_HOME}"
-ADD composer.lock "${COMPOSER_HOME}"
-ADD composer.json "${COMPOSER_HOME}"
-RUN composer global install
-ENV PATH "${COMPOSER_HOME}/vendor/bin:${PATH}"
\ No newline at end of file

.gitlab-ci/README.md

-* In case of an incompatible change increase the tag version number in build.sh
-* ./build.sh
-* (first time) sudo docker login registry.gitlab.tugraz.at
-* sudo docker push registry.gitlab.tugraz.at/dbp/webcomponents/toolkit/main:v1
\ No newline at end of file

.gitlab-ci/build.sh

 #!/bin/bash
 
 set -e
-TAG="registry.gitlab.tugraz.at/dbp/web-components/toolkit/main:v1"
+TAG="registry.gitlab.tugraz.at/dbp/web-components/toolkit/main:v2"
 sudo docker build --tag "${TAG}" --file "Dockerfile" .
+sudo docker run --rm \
+    --volume "$(pwd)/..:/home/user/app" --workdir "/home/user/app" \
+    --tty --interactive "${TAG}" bash
 echo "Now run: sudo docker push '$TAG'"

.gitlab-ci/composer.json

-{
-    "require": {
-        "symfony/process": " ^4.4",
-        "symfony/console": " ^4.4",
-        "symfony/yaml": " ^4.4",
-        "deployer/deployer": " ^6.4",
-        "deployer/recipes": " ^6.2"
-    }
-}

.renovaterc.json

+{
+  "extends": [
+    "config:base",
+    "group:allNonMajor",
+    "schedule:weekends",
+    ":automergePatch"
+  ],
+  "ignorePresets": [":prHourlyLimit2"],
+  "rangeStrategy": "update-lockfile",
+  "lockFileMaintenance": {
+    "enabled": true
+  },
+  "composer": {
+    "enabled": false
+  },
+  "poetry": {
+    "enabled": false
+  },
+  "packageRules": [
+    {
+      "matchPackageNames": ["datatables.net", "datatables.net-dt"],
+      "allowedVersions": "<1.13"
+    },
+    {
+      "matchPackageNames": ["datatables.net-buttons", "datatables.net-buttons-dt"],
+      "allowedVersions": "<2.3"
+    },
+    {
+      "matchPackageNames": ["datatables.net-responsive", "datatables.net-responsive-dt"],
+      "allowedVersions": "<2.4"
+    }
+  ]
+}
\ No newline at end of file

README.md

@@ -24,6 +24,28 @@ yarn install
 ## Publishing packages to npmjs.com
 
 There is an automatic publishing process initiated for each package if code is pushed
-to the `master` branch, if the package isn't set to private in its `package.json` and
+to the `main` branch, if the package isn't set to private in its `package.json` and
 the version number in its `package.json` is higher than the version number on npmjs.com.
 
+## Reserved attributes
+
+| Attribute                     | Description                                                                       |
+| ----------------------------- | --------------------------------------------------------------------------------- |
+| `subscribe`                   | Used in all components to subscribe to attributes set by a provider               |
+| `unsubscribe`                 | Reserved for future use                                                           |
+| `auth`                        | Authentication information, set by the authentication component                   |
+| `lang`                        | Currently selected language, set by the language selector                         |
+| `lang-dir`                    | Location of the i18n language file where all required i18n translations are       |
+| `entry-point-url`             | Entry point url for all api requests                                              |
+| `requested-login-status`      | Used by the login buttons to trigger a login in auth components                   |
+| `initial-file-handling-state` | Used by the file-handling component to sync file source/sink at first time open   |
+| `clipboard-files`             | Used by the file-handling component to use the clipboard source and sink          |
+| `analytics-event`             | Used to send analytics events to the Matomo component                             |
+
+## Reserved events
+
+| Event              | Description                                                                        |
+| ------------------ | ---------------------------------------------------------------------------------- |
+| `dbp-subscribe`    | Event to tell a provider that the component wants to subscribe to an attribute     |
+| `dbp-unsubscribe`  | Event to tell a provider that the component wants to unsubscribe from an attribute |
+| `dbp-set-property` | Event to tell a provider that a property should be changed                         |

demo.common.config.js

+export default {
+    basePath: '/dist/',
+    entryPointURL: 'http://127.0.0.1:8000',
+    keyCloakBaseURL: 'https://auth-dev.tugraz.at/auth',
+    keyCloakRealm: 'tugraz-vpu',
+    keyCloakClientId: 'auth-dev-mw-frontend-local',
+}

eslint.common.json

@@ -9,9 +9,8 @@
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
     },
-    "parser": "babel-eslint",
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2020,
         "sourceType": "module"
     },
     "rules": {

karma.common.conf.js

-module.exports = function(config) {
-    config.set({
-      basePath: 'dist',
-      frameworks: ['mocha'],
-      client: {
-        mocha: {
-          ui: 'tdd',
-        },
+module.exports = async function(config) {
+  const { installBrowsersForNpmInstall, registry } = require('playwright-core/lib/server');
+  await installBrowsersForNpmInstall(["firefox", "chromium"]);
+  process.env.FIREFOX_BIN = registry.findExecutable("firefox").executablePath();
+  process.env.CHROMIUM_BIN = registry.findExecutable("chromium").executablePath();
+
+  config.set({
+    basePath: 'dist',
+    frameworks: ['mocha', 'source-map-support'],
+    client: {
+      mocha: {
+        ui: 'tdd',
+        timeout: 2000 * (process.env.CI === undefined ? 1 : 10)
       },
-      files: [
-        {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
-        {pattern: './**/*', included: false, watched: true, served: true},
-      ],
-      autoWatch: true,
-      browsers: [
-        'ChromiumHeadlessNoSandbox',
-        'FirefoxHeadless',
-      ],
-      customLaunchers: {
-        ChromiumHeadlessNoSandbox: {
-          base: 'ChromiumHeadless',
-          flags: ['--no-sandbox']
-        }
-      },
-      singleRun: false,
-      logLevel: config.LOG_ERROR
-    });
+    },
+    files: [
+      {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
+      {pattern: './**/*', included: false, watched: true, served: true, nocache: true},
+    ],
+    autoWatch: true,
+    browsers: [
+      'ChromiumHeadlessNoSandbox',
+      'FirefoxHeadless',
+    ],
+    customLaunchers: {
+      ChromiumHeadlessNoSandbox: {
+        base: 'ChromiumHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false,
+    logLevel: config.LOG_ERROR
+  });
 }
\ No newline at end of file

package.json

 {
   "name": "dbp-toolkit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "index.js",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "toolkit-showcase"
   ],
   "scripts": {
     "test": "lerna run test",
+    "format": "lerna run format",
     "build": "lerna run build",
+    "i18next": "lerna run i18next",
+    "version-patch": "lerna version patch",
+    "version-minor": "lerna version minor",
+    "version": "lerna version",
+    "yarn-install": "for d in ./packages/*/ ; do (cd \"$d\" && yarn install); done;",
+    "rm-dist": "for d in ./packages/*/ ; do (cd \"$d\" && rm dist -Rf); done;",
     "lint": "lerna run lint",
     "publish": "lerna publish from-package --yes"
   },
   "author": "",
   "license": "LGPL-2.1-or-later",
   "devDependencies": {
-    "lerna": "^3.22.1"
-  }
+    "lerna": "^6.0.0"
+  },
+  "dependencies": {}
 }

packages/app-shell/.eslintrc.json

 {
+    "root": true,
     "extends": "./../../eslint.common.json"
-}
\ No newline at end of file
+}

packages/app-shell/.gitignore

@@ -4,4 +4,5 @@ node_modules
 npm-debug.log
 .vscode
 .cert
-package-lock.json
\ No newline at end of file
+package-lock.json
+yarn.lock

packages/app-shell/.npmignore

@@ -3,3 +3,4 @@ node_modules
 npm-debug.log
 package-lock.json
 index.html
+yarn.lock

packages/app-shell/.prettierignore

+node_modules/
+/dist
\ No newline at end of file

packages/app-shell/.prettierrc.json

+{
+    "bracketSpacing": false,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "bracketSameLine": true,
+    "htmlWhitespaceSensitivity": "ignore",
+    "overrides": [
+        {
+            "files": "*.js",
+            "options": {
+                "semi": true
+            }
+        }
+    ]
+}

packages/app-shell/README.md

@@ -12,14 +12,29 @@ npm i @dbp-toolkit/app-shell
 ## Usage
 
 ```html
-<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>
+<dbp-app-shell src="/example.topic.metadata.json"></dbp-app-shell>
+```
+
+Or directly via CDN:
+
+```html
+<script type="module" src="https://unpkg.com/@dbp-toolkit/app-shell@0.2.3/dist/dbp-app-shell.js"></script>
+<dbp-app-shell src="/example.topic.metadata.json"></dbp-app-shell>
 ```
 
+You need Keycloak and other parts to be in place to really make full use of the AppShell.
+Best take a look on examples like [index.html](https://gitlab.tugraz.at/dbp/esign/signature/-/blob/main/examples/dbp-signature/index.html)
+for more explanation.
+
 ## Attributes
 
+- `provider-root` (optional): You need to set the `provider-root` attribute for the app-shell to "terminate" all provider events
+  - If you don't want to set the app-shell as `provider-root` then you need to set the attributes `auth`,
+    `requested-login-status` and `analytics-event` as attribute for the app-shell or in a `dbp-provider` above it 
+  - example `<dbp-app-shell provider-root></dbp-app-shell>`
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<dbp-app-shell lang="de" </dbp-app-shell>`
+    - example `<dbp-app-shell lang="de"></dbp-app-shell>`
 - `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
@@ -28,6 +43,71 @@ npm i @dbp-toolkit/app-shell
     - example `<dbp-app-shell matomo-url="https://my-matomo.tld"></dbp-app-shell>`
 - `matomo-site-id` (optional): set to your site id (required only for tracking)
     - example `<dbp-app-shell matomo-site-id="456789"></dbp-app-shell>`
+- `no-welcome-page` (optional): skips the welcome page and welcome page isn't visible in menu
+    - example `<dbp-app-shell no-welcome-page></dbp-app-shell>`
+
+### Emitted attributes
+
+The component emits `dbp-set-property` events for these attributes:
+
+- `lang` to propagate a language change (possible values `en`, `de`)
+- `requested-login-status` (possible values `logged-in`, `logged-out`)
+
+### Emitted events
+
+#### dbp-lang
+
+The component emits a `dbp-lang` event when the language is changed (for example in the language picker).
+The `details` attribute of the event is the language (possible values `en`, `de`).
+
+### Slots
+
+You use template tags to inject slots into the web component.
+These templates will be converted to div containers when the page is loaded and will not show up before that.
+
+#### Unnamed slot
+
+The unnamed slot will be removed when the application is loaded and can be filled with a loading-spinner.
+
+Example: `<app-shell><dbp-loading-spinner></dbp-loading-spinner></app-shell>`
+
+#### name
+
+The content of this slot will be shown left in the header and can be used to set a name (e.g. the name of the institution).
+
+Example: `<app-shell><template slot="name">TU Graz<br />Graz University of Technology</template></app-shell>`
+
+#### title
+
+The content of this slot will be shown as big h1 headline instead of the `name` in the topic manifest file.
+
+Example: `<app-shell><template slot="title">TU Graz Greenlight</template></app-shell>`
+
+#### logo
+
+The content of this slot will be shown right in the header and can be used to override the logo image.
+
+Example: `<app-shell><template slot="logo"><img alt="logo" src="/path/to/logo.png" /></template></app-shell>`
+
+#### header
+
+The content of this slot will override the whole content of the header.
+You will need to provide your own language selector and auth component.
+
+Example: `<app-shell><template slot="header">My custom header</template></app-shell>`
+
+#### footer-links
+
+The content of this slot will override the whole content of the footer link section, for example to set custom links.
+
+Example: `<app-shell><template slot="footer-links"><a target="_blank" rel="noopener" class="int-link-external" href="https://my-webpage.com">Link text</a></template></app-shell>`
+
+#### footer
+
+The content of this slot will override the whole content of the footer, for example to set custom links
+and also overwrite the `dbp-build-info` tag.
+
+Example: `<app-shell><template slot="footer"><a target="_blank" rel="noopener" class="int-link-external" href="https://my-webpage.com">Link text</a></template></app-shell>`
 
 ## Topic Metadata
 

packages/app-shell/assets/example.metadata.json

 {
-  "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"
-  }
+    "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"
+    }
 }