Merge branch 'prettier' into 'master'

Add  prettier

See merge request !124

package.json

@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "test": "lerna run test",
+    "format": "lerna run format",
     "build": "lerna run build",
     "i18next": "lerna run i18next",
     "version-patch": "lerna version patch",

packages/app-shell/.eslintrc.json

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

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

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

 {
-  "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"},
-    {"path": "example2.metadata.json"}
-  ],
-  "attributes": []
-}
\ No newline at end of file
+    "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"}, {"path": "example2.metadata.json"}],
+    "attributes": []
+}

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

 {
-  "element": "dbp-activity-example",
-  "module_src": "dbp-activity-example.js",
-  "routing_name": "activity-example2",
-  "name": {
-    "de": "Beispielaktivität 2",
-    "en": "Example Activity 2"
-  },
-  "short_name": {
-    "de": "Beispielaktivität 2",
-    "en": "Example Activity 2"
-  },
-  "description": {
-    "de": "Eine Beschreibung",
-    "en": "A Description"
-  }
+    "element": "dbp-activity-example",
+    "module_src": "dbp-activity-example.js",
+    "routing_name": "activity-example2",
+    "name": {
+        "de": "Beispielaktivität 2",
+        "en": "Example Activity 2"
+    },
+    "short_name": {
+        "de": "Beispielaktivität 2",
+        "en": "Example Activity 2"
+    },
+    "description": {
+        "de": "Eine Beschreibung",
+        "en": "A Description"
+    }
 }

packages/app-shell/i18next-scanner.config.js

 module.exports = {
-    input: [
-        'src/*.js',
-    ],
+    input: ['src/*.js'],
     output: './',
     options: {
         debug: false,
         removeUnusedKeys: true,
         func: {list: ['i18n.t', '_i18n.t']},
-        lngs: ['en','de'],
+        lngs: ['en', 'de'],
         resource: {
             loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
-            savePath: 'src/i18n/{{lng}}/{{ns}}.json'
+            savePath: 'src/i18n/{{lng}}/{{ns}}.json',
         },
     },
-}
+};

packages/app-shell/package.json

 {
-  "name": "@dbp-toolkit/app-shell",
-  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
-  "version": "0.2.7",
-  "main": "src/index.js",
-  "license": "LGPL-2.1-or-later",
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
-    "directory": "packages/app-shell"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.2.0",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "eslint": "^8.0.0",
-    "eslint-plugin-jsdoc": "^37.0.0",
-    "glob": "^7.1.6",
-    "i18next-scanner": "^3.0.0",
-    "karma": "^6.0.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-mocha": "^2.0.1",
-    "mocha": "^9.0.0",
-    "rollup": "^2.33.3",
-    "rollup-plugin-copy": "^3.1.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-emit-ejs": "^3.1.0",
-    "rollup-plugin-serve": "^1.0.1"
-  },
-  "dependencies": {
-    "@dbp-toolkit/auth": "^0.2.2",
-    "@dbp-toolkit/common": "^0.2.2",
-    "@dbp-toolkit/language-select": "^0.2.2",
-    "@dbp-toolkit/matomo": "^0.2.2",
-    "@dbp-toolkit/notification": "^0.2.2",
-    "@dbp-toolkit/person-profile": "^0.2.2",
-    "@open-wc/scoped-elements": "^2.0.0",
-    "i18next": "^21.4.2",
-    "lit": "^2.0.0",
-    "universal-router": "^9.0.1"
-  },
-  "scripts": {
-    "i18next": "i18next-scanner",
-    "build": "npm run build-local",
-    "build-local": "rollup -c",
-    "build-test": "rollup -c --environment BUILD:test",
-    "watch": "npm run watch-local",
-    "watch-local": "rollup -c --watch",
-    "test": "npm run build-test && karma start --singleRun",
-    "lint": "eslint ."
-  }
+    "name": "@dbp-toolkit/app-shell",
+    "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
+    "version": "0.2.7",
+    "main": "src/index.js",
+    "license": "LGPL-2.1-or-later",
+    "repository": {
+        "type": "git",
+        "url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
+        "directory": "packages/app-shell"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org",
+        "access": "public"
+    },
+    "devDependencies": {
+        "@esm-bundle/chai": "^4.2.0",
+        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-json": "^4.1.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
+        "eslint": "^8.0.0",
+        "eslint-plugin-jsdoc": "^37.0.0",
+        "glob": "^7.1.6",
+        "i18next-scanner": "^3.0.0",
+        "karma": "^6.0.0",
+        "karma-chrome-launcher": "^3.0.0",
+        "karma-firefox-launcher": "^2.1.0",
+        "karma-mocha": "^2.0.1",
+        "mocha": "^9.0.0",
+        "prettier": "^2.5.1",
+        "rollup": "^2.33.3",
+        "rollup-plugin-copy": "^3.1.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-emit-ejs": "^3.1.0",
+        "rollup-plugin-serve": "^1.0.1"
+    },
+    "dependencies": {
+        "@dbp-toolkit/auth": "^0.2.2",
+        "@dbp-toolkit/common": "^0.2.2",
+        "@dbp-toolkit/language-select": "^0.2.2",
+        "@dbp-toolkit/matomo": "^0.2.2",
+        "@dbp-toolkit/notification": "^0.2.2",
+        "@dbp-toolkit/person-profile": "^0.2.2",
+        "@open-wc/scoped-elements": "^2.0.0",
+        "i18next": "^21.4.2",
+        "lit": "^2.0.0",
+        "universal-router": "^9.0.1"
+    },
+    "scripts": {
+        "i18next": "i18next-scanner",
+        "format": "yarn run format:eslint && yarn run format:prettier",
+        "format:eslint": "eslint \"**/*.{js,ts}\" --fix",
+        "format:prettier": "prettier \"**/*.{js,json,ts}\" --write",
+        "build": "npm run build-local",
+        "build-local": "rollup -c",
+        "build-test": "rollup -c --environment BUILD:test",
+        "watch": "npm run watch-local",
+        "watch-local": "rollup -c --watch",
+        "test": "npm run build-test && karma start --singleRun",
+        "lint": "eslint ."
+    }
 }

packages/app-shell/rollup.config.js

@@ -7,38 +7,48 @@ import del from 'rollup-plugin-delete';
 import json from '@rollup/plugin-json';
 import {getPackagePath, getDistPath} from '../../rollup.utils.js';
 
-const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
-console.log("build: " + build);
+const build = typeof process.env.BUILD !== 'undefined' ? process.env.BUILD : 'local';
+console.log('build: ' + build);
 
 export default (async () => {
     return {
-        input: (build !='test') ? ['src/dbp-app-shell.js', 'src/dbp-activity-example.js'] : glob.sync('test/**/*.js'),
+        input:
+            build != 'test'
+                ? ['src/dbp-app-shell.js', 'src/dbp-activity-example.js']
+                : glob.sync('test/**/*.js'),
         output: {
             dir: 'dist',
             entryFileNames: '[name].js',
             chunkFileNames: 'shared/[name].[hash].[format].js',
             format: 'esm',
-            sourcemap: true
-          },
+            sourcemap: true,
+        },
         plugins: [
             del({
-                targets: 'dist/*'
-              }),
+                targets: 'dist/*',
+            }),
             resolve(),
             commonjs(),
             json(),
             copy({
                 targets: [
-                    {src: 'assets/silent-check-sso.html', dest:'dist'},
+                    {src: 'assets/silent-check-sso.html', dest: 'dist'},
                     {src: 'assets/index.html', dest: 'dist'},
                     {src: 'assets/*.json', dest: 'dist'},
-                    {src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), dest: 'dist/' + await getDistPath('@dbp-toolkit/common', 'icons')},
+                    {
+                        src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'),
+                        dest: 'dist/' + (await getDistPath('@dbp-toolkit/common', 'icons')),
+                    },
                 ],
             }),
-            (process.env.ROLLUP_WATCH === 'true') ? serve({
-                contentBase: 'dist',
-                historyApiFallback: '/index.html',
-                host: '127.0.0.1', port: 8002}) : false
-        ]
-    }
-})();
\ No newline at end of file
+            process.env.ROLLUP_WATCH === 'true'
+                ? serve({
+                      contentBase: 'dist',
+                      historyApiFallback: '/index.html',
+                      host: '127.0.0.1',
+                      port: 8002,
+                  })
+                : false,
+        ],
+    };
+})();

packages/app-shell/src/auth-menu-button.js

@@ -4,11 +4,10 @@ import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {Icon} from '@dbp-toolkit/common';
-import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
-import {LoginStatus} from "@dbp-toolkit/auth/src/util";
+import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';
+import {LoginStatus} from '@dbp-toolkit/auth/src/util';
 
 export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
-
     constructor() {
         super();
         this._i18n = createInstance();
@@ -28,8 +27,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     static get properties() {
         return {
             ...super.properties,
-            lang: { type: String },
-            auth: { type: Object },
+            lang: {type: String},
+            auth: {type: Object},
         };
     }
 
@@ -55,7 +54,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
      * We need to set the width manually because a percent width is in relation to the viewport
      */
     updateDropdownWidth() {
-        const dropdown = this.shadowRoot.querySelector("div.dropdown-menu");
+        const dropdown = this.shadowRoot.querySelector('div.dropdown-menu');
 
         if (!dropdown) {
             return;
@@ -63,7 +62,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
 
         let viewportOffset = this.getBoundingClientRect();
         let spaceToRIght = window.innerWidth - viewportOffset.left;
-        dropdown.setAttribute("style", `width: ${spaceToRIght - 20}px`);
+        dropdown.setAttribute('style', `width: ${spaceToRIght - 20}px`);
     }
 
     onLoginClicked(e) {
@@ -77,7 +76,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
-            if (propName === "lang") {
+            if (propName === 'lang') {
                 this._i18n.changeLanguage(this.lang);
             }
         });
@@ -102,10 +101,12 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 display: block;
             }
 
-            input::-moz-focus-inner { border: 0; }
+            input::-moz-focus-inner {
+                border: 0;
+            }
 
-            :focus-visible{
-                outline:none !important;
+            :focus-visible {
+                outline: none !important;
                 outline-width: 0 !important;
                 box-shadow: none;
                 -moz-box-shadow: none;
@@ -113,7 +114,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 box-shadow: 0px 0px 4px 2px var(--dbp-accent);
             }
 
-            .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
+            .dropdown.is-active .dropdown-menu,
+            .dropdown.is-hoverable:hover .dropdown-menu {
                 display: block;
             }
 
@@ -147,11 +149,11 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 background-color: var(--dbp-hover-base);
             }
 
-            .menu a.selected { 
-                color: var(--dbp-secondary-text); 
-                background-color: var(--dbp-secondary-base); 
+            .menu a.selected {
+                color: var(--dbp-secondary-text);
+                background-color: var(--dbp-secondary-base);
             }
-            
+
             .dropdown-item {
                 color: var(--dbp-text-muted);
                 display: block;
@@ -224,13 +226,13 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 min-width: 0;
-                margin-right: 0.5em
+                margin-right: 0.5em;
             }
         `;
     }
 
     setChevron(name) {
-        const chevron = this.shadowRoot.querySelector("#menu-chevron-icon");
+        const chevron = this.shadowRoot.querySelector('#menu-chevron-icon');
         if (chevron !== null) {
             chevron.name = name;
         }
@@ -239,7 +241,9 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     onDropdownClick(event) {
         event.stopPropagation();
         event.currentTarget.classList.toggle('is-active');
-        this.setChevron(event.currentTarget.classList.contains('is-active') ? 'chevron-up' : 'chevron-down');
+        this.setChevron(
+            event.currentTarget.classList.contains('is-active') ? 'chevron-up' : 'chevron-down'
+        );
         this.updateDropdownWidth();
     }
 
@@ -253,19 +257,24 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
 
     renderLoggedIn() {
         const i18n = this._i18n;
- 
+
         return html`
             <div class="dropdown" @click="${this.onDropdownClick}">
                 <a href="#">
                     <div class="dropdown-trigger login-button">
                         <div class="name">${this.auth['user-full-name']}</div>
-                        <dbp-icon class="menu-icon" name="chevron-down" id="menu-chevron-icon"></dbp-icon>
+                        <dbp-icon
+                            class="menu-icon"
+                            name="chevron-down"
+                            id="menu-chevron-icon"></dbp-icon>
                     </div>
                 </a>
                 <div class="dropdown-menu" id="dropdown-menu2" role="menu">
                     <div class="dropdown-content" @blur="${this.closeDropdown}">
                         <div class="menu">
-                            <a href="#" @click="${this.onLogoutClicked}" class="dropdown-item">${i18n.t('logout')}</a>
+                            <a href="#" @click="${this.onLogoutClicked}" class="dropdown-item">
+                                ${i18n.t('logout')}
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -307,11 +316,9 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     render() {
-        const loggedIn = (this.auth['login-status'] === 'logged-in');
+        const loggedIn = this.auth['login-status'] === 'logged-in';
         return html`
-            <div class="authbox">
-                ${loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}
-            </div>
+            <div class="authbox">${loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}</div>
         `;
     }
-}
\ No newline at end of file
+}

packages/app-shell/src/build-info.js

 import {html, css} from 'lit';
 import * as commonStyles from '@dbp-toolkit/common/styles';
-import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';
 
 export class BuildInfo extends AdapterLitElement {
-
     constructor() {
         super();
         this.env = '';
@@ -15,10 +14,10 @@ export class BuildInfo extends AdapterLitElement {
     static get properties() {
         return {
             ...super.properties,
-            env: { type: String },
-            buildUrl: { type: String, attribute: "build-url" },
-            buildTime: { type: String, attribute: "build-time" },
-            gitInfo: { type: String, attribute: "git-info" }
+            env: {type: String},
+            buildUrl: {type: String, attribute: 'build-url'},
+            buildTime: {type: String, attribute: 'build-time'},
+            gitInfo: {type: String, attribute: 'git-info'},
         };
     }
 
@@ -32,7 +31,7 @@ export class BuildInfo extends AdapterLitElement {
                 display: inline-block;
             }
         `;
-    } 
+    }
 
     render() {
         const date = new Date(this.buildTime);
@@ -46,4 +45,4 @@ export class BuildInfo extends AdapterLitElement {
             </a>
         `;
     }
-}
\ No newline at end of file
+}

packages/app-shell/src/dbp-activity-example.js

-import {html , LitElement} from 'lit';
+import {html, LitElement} from 'lit';
 import {createInstance} from './i18n.js';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 
 class ActivityExample extends LitElement {
-
     constructor() {
         super();
         this._i18n = createInstance();
@@ -12,14 +11,14 @@ class ActivityExample extends LitElement {
 
     static get properties() {
         return {
-            lang: { type: String },
+            lang: {type: String},
         };
     }
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
-                case "lang":
+                case 'lang':
                     this._i18n.changeLanguage(this.lang);
                     break;
             }
@@ -32,7 +31,14 @@ class ActivityExample extends LitElement {
         const i18n = this._i18n;
         return html`
             <h3>${i18n.t('activity-example.hello-world')}</h3>
-            <ul>${(Array.from(Array(100).keys())).map(i => html`<li>${i18n.t('activity-example.hello-world') + ' ' + i}</li>`)}</ul>
+            <ul>
+                ${Array.from(Array(100).keys()).map(
+                    (i) =>
+                        html`
+                            <li>${i18n.t('activity-example.hello-world') + ' ' + i}</li>
+                        `
+                )}
+            </ul>
         `;
     }
 }

packages/app-shell/src/dbp-app-shell-welcome.js

@@ -5,7 +5,6 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 
 class AppShellWelcome extends ScopedElementsMixin(LitElement) {
-
     constructor() {
         super();
         this._i18n = createInstance();
@@ -16,7 +15,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
 
     static get properties() {
         return {
-            lang: { type: String },
+            lang: {type: String},
         };
     }
 
@@ -26,7 +25,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
-            if (propName === "lang") {
+            if (propName === 'lang') {
                 this._i18n.changeLanguage(this.lang);
             }
         });
@@ -35,14 +34,17 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
     }
 
     static get styles() {
-
         // language=css
         return css`
             ${commonStyles.getThemeCSS()}
             ${commonStyles.getGeneralCSS()}
 
-            p { line-height: 1.8em }
-            .item { padding-top: 0.5em;}
+            p {
+                line-height: 1.8em;
+            }
+            .item {
+                padding-top: 0.5em;
+            }
             .description {
                 padding-left: 2em;
                 font-style: italic;
@@ -54,14 +56,14 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
                 color: var(--dbp-hover-text, var(--dbp-text));
                 background-color: var(--dbp-hover-base);
             }
-            
+
             h2 a {
                 cursor: pointer;
                 text-decoration: none;
             }
 
             h2 a::after {
-                content: "\\00a0\\00a0";
+                content: '\\00a0\\00a0';
                 background-color: var(--dbp-text);
                 -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
                 mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
@@ -74,10 +76,10 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
                 -webkit-mask-size: 100%;
                 mask-size: 100%;
             }
-            
-           h2 a:hover::after {
-               background-color: var(--dbp-hover-text, var(--dbp-text));
-           }
+
+            h2 a:hover::after {
+                background-color: var(--dbp-hover-text, var(--dbp-text));
+            }
         `;
     }
     _onVisibilityChanged() {
@@ -111,39 +113,50 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
         for (let routeName of app.visibleRoutes) {
             let data = app.metadata[routeName];
 
-            if (routeName !== "welcome") {
+            if (routeName !== 'welcome') {
                 itemTemplates.push(html`
                     <div class="item">
-                        <h2><a href="#" @click=${(e) => {switchActivity(e, data);}}>${data.name[this.lang]}</a></h2>
+                        <h2>
+                            <a
+                                href="#"
+                                @click=${(e) => {
+                                    switchActivity(e, data);
+                                }}>
+                                ${data.name[this.lang]}
+                            </a>
+                        </h2>
                         <p class="description">${data.description[this.lang]}</p>
-                    </div>`);
+                    </div>
+                `);
             }
         }
 
         return html`
-            <p>${i18n.t('welcome.headline', {appname: app.topic.name[this.lang]})}
-            ${app.topic.description[this.lang] }</p>
-            <br>
+            <p>
+                ${i18n.t('welcome.headline', {appname: app.topic.name[this.lang]})}
+                ${app.topic.description[this.lang]}
+            </p>
+            <br />
             ${itemTemplates}
         `;
     }
 }
 
 export const appWelcomeMeta = {
-    "element": "dbp-app-shell-welcome",
-    "module_src": "",
-    "routing_name": "welcome",
-    "name": {
-      "de": "Willkommen",
-      "en": "Welcome"
+    element: 'dbp-app-shell-welcome',
+    module_src: '',
+    routing_name: 'welcome',
+    name: {
+        de: 'Willkommen',
+        en: 'Welcome',
     },
-    "short_name": {
-      "de": "Willkommen",
-      "en": "Welcome"
+    short_name: {
+        de: 'Willkommen',
+        en: 'Welcome',
     },
-    "description": {
-      "de": "Willkommen",
-      "en": "Welcome"
+    description: {
+        de: 'Willkommen',
+        en: 'Welcome',
     },
     visible: true,
     required_roles: [],

packages/app-shell/src/dbp-app-shell.js

 import {AppShell} from './app-shell.js';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 
-commonUtils.defineCustomElement('dbp-app-shell', AppShell);
\ No newline at end of file
+commonUtils.defineCustomElement('dbp-app-shell', AppShell);

packages/app-shell/src/i18n/de/translation.json

 {
-  "logo": {
-    "word1": "Wissen",
-    "word2": "Technik",
-    "word3": "Leidenschaft"
-  },
-  "privacy-policy": "Datenschutz",
-  "imprint": "Impressum",
-  "contact": "Kontakt",
-  "page-updated-needs-reload": "Die Applikation wurde aktualisiert. Bitte laden Sie die Seite neu.",
-  "activity-example": {
-    "hello-world": "Hallo Welt"
-  },
-  "welcome": {
-    "headline": "Willkommen bei der Applikation '{{appname}}'."
-  },
-  "login": "Anmelden",
-  "logout": "Abmelden",
-  "page-not-found": "Die gewünschte Seite wurde nicht gefunden",
-  "choose-from-menu": "Bitte wählen Sie eine Aktivität aus dem Menu.",
-  "color-mode": "Farbmodus ändern"
+    "logo": {
+        "word1": "Wissen",
+        "word2": "Technik",
+        "word3": "Leidenschaft"
+    },
+    "privacy-policy": "Datenschutz",
+    "imprint": "Impressum",
+    "contact": "Kontakt",
+    "page-updated-needs-reload": "Die Applikation wurde aktualisiert. Bitte laden Sie die Seite neu.",
+    "activity-example": {
+        "hello-world": "Hallo Welt"
+    },
+    "welcome": {
+        "headline": "Willkommen bei der Applikation '{{appname}}'."
+    },
+    "login": "Anmelden",
+    "logout": "Abmelden",
+    "page-not-found": "Die gewünschte Seite wurde nicht gefunden",
+    "choose-from-menu": "Bitte wählen Sie eine Aktivität aus dem Menu.",
+    "color-mode": "Farbmodus ändern"
 }

packages/app-shell/src/i18n/en/translation.json

 {
-  "logo": {
-    "word1": "Science",
-    "word2": "Passion",
-    "word3": "Technology"
-  },
-  "privacy-policy": "Privacy Policy",
-  "imprint": "Legal Notice",
-  "contact": "Contact",
-  "page-updated-needs-reload": "The application has been updated. Please reload the page.",
-  "activity-example": {
-    "hello-world": "Hello World"
-  },
-  "welcome": {
-    "headline": "Welcome to the '{{appname}}' application."
-  },
-  "login": "Login",
-  "logout": "Logout",
-  "page-not-found": "Requested Page Not Found",
-  "choose-from-menu": "Please choose an activity from the menu.",
-  "color-mode": "Change color mode"
+    "logo": {
+        "word1": "Science",
+        "word2": "Passion",
+        "word3": "Technology"
+    },
+    "privacy-policy": "Privacy Policy",
+    "imprint": "Legal Notice",
+    "contact": "Contact",
+    "page-updated-needs-reload": "The application has been updated. Please reload the page.",
+    "activity-example": {
+        "hello-world": "Hello World"
+    },
+    "welcome": {
+        "headline": "Welcome to the '{{appname}}' application."
+    },
+    "login": "Login",
+    "logout": "Logout",
+    "page-not-found": "Requested Page Not Found",
+    "choose-from-menu": "Please choose an activity from the menu.",
+    "color-mode": "Change color mode"
 }

packages/app-shell/src/index.js

 import {AppShell} from './app-shell.js';
 
-export {AppShell};
\ No newline at end of file
+export {AppShell};

packages/app-shell/src/router.js

@@ -5,7 +5,6 @@ import generateUrls from 'universal-router/generateUrls';
  * A wrapper around UniversalRouter which adds history integration
  */
 export class Router {
-
     /**
      * @param {Array} routes The routes passed to UniversalRouter
      * @param {object} options Options
@@ -42,21 +41,24 @@ export class Router {
     setStateFromCurrentLocation() {
         const oldPathName = location.pathname;
 
-        this.router.resolve({pathname: oldPathName}).then(page => {
-            const newPathname = this.getPathname(page);
-            // In case of a router redirect, set the new location
-            if (newPathname !== oldPathName) {
-                const referrerUrl = location.href;
-                window.history.replaceState({}, '', newPathname);
-                this.dispatchLocationChanged(referrerUrl);
-            } else if (this.isBasePath(oldPathName)) {
-                page = this.getDefaultState();
-            }
-            this.setState(page);
-        }).catch((e) => {
-            // In case we can't resolve the location, just leave things as is.
-            // This happens when a user enters a wrong URL or when testing with karma.
-        });
+        this.router
+            .resolve({pathname: oldPathName})
+            .then((page) => {
+                const newPathname = this.getPathname(page);
+                // In case of a router redirect, set the new location
+                if (newPathname !== oldPathName) {
+                    const referrerUrl = location.href;
+                    window.history.replaceState({}, '', newPathname);
+                    this.dispatchLocationChanged(referrerUrl);
+                } else if (this.isBasePath(oldPathName)) {
+                    page = this.getDefaultState();
+                }
+                this.setState(page);
+            })
+            .catch((e) => {
+                // In case we can't resolve the location, just leave things as is.
+                // This happens when a user enters a wrong URL or when testing with karma.
+            });
     }
 
     isBasePath(pathname) {
@@ -72,8 +74,7 @@ export class Router {
         setTimeout(() => {
             const newPathname = this.getPathname();
             const oldPathname = location.pathname;
-            if (newPathname === oldPathname)
-                return;
+            if (newPathname === oldPathname) return;
 
             const defaultPathname = this.getPathname(this.getDefaultState());
             if (newPathname === defaultPathname && this.isBasePath(oldPathname)) {
@@ -92,16 +93,18 @@ export class Router {
      * @param {string} pathname
      */
     updateFromPathname(pathname) {
-        this.router.resolve({pathname: pathname}).then(page => {
-            if (location.pathname === pathname)
-                return;
-            const referrerUrl = location.href;
-            window.history.pushState({}, '', pathname);
-            this.setState(page);
-            this.dispatchLocationChanged(referrerUrl);
-        }).catch((err) => {
-            throw new Error(`Route not found: ${pathname}: ${err}`);
-        });
+        this.router
+            .resolve({pathname: pathname})
+            .then((page) => {
+                if (location.pathname === pathname) return;
+                const referrerUrl = location.href;
+                window.history.pushState({}, '', pathname);
+                this.setState(page);
+                this.dispatchLocationChanged(referrerUrl);
+            })
+            .catch((err) => {
+                throw new Error(`Route not found: ${pathname}: ${err}`);
+            });
     }
 
     /**
@@ -114,8 +117,7 @@ export class Router {
      */
     getPathname(partialState) {
         const currentState = this.getState();
-        if (partialState === undefined)
-            partialState = {};
+        if (partialState === undefined) partialState = {};
         let combined = {...currentState, ...partialState};
 
         try {
@@ -126,13 +128,15 @@ export class Router {
         }
     }
 
-    dispatchLocationChanged(referrerUrl = "") {
+    dispatchLocationChanged(referrerUrl = '') {
         // fire a locationchanged event
-        window.dispatchEvent(new CustomEvent('locationchanged', {
-            detail: {
-                referrerUrl: referrerUrl,
-            },
-            bubbles: true
-        }));
+        window.dispatchEvent(
+            new CustomEvent('locationchanged', {
+                detail: {
+                    referrerUrl: referrerUrl,
+                },
+                bubbles: true,
+            })
+        );
     }
 }