Introduce named slots into AppShell

packages/app-shell/README.md

@@ -52,6 +52,39 @@ The component emits `dbp-set-property` events for these attributes:
 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
+
+#### 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><div slot="name">TU Graz<br />Graz University of Technology</div></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><div slot="logo"><img alt="logo" src="/path/to/logo.png" /></div></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><div slot="header">My custom header</div></app-shell>`
+
+#### footer
+
+The content of this slot will override the whole content of the footer, for example to set custom links.
+
+Example: `<app-shell><div slot="footer"><a target="_blank" rel="noopener" class="int-link-external" href="https://my-webpage.com">Link text</a></div></app-shell>`
+
 ## Topic Metadata
 
 ```json

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

@@ -882,22 +882,24 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
             <div id="main">
                 <dbp-notification id="dbp-notification" lang="${this.lang}"></dbp-notification>
                 <header>
-                    <div class="hd1-left">
-                        <dbp-language-select lang="${this.lang}"></dbp-language-select>
-                    </div>
-                    <div class="hd1-middle">
-                    </div>
-                    <div class="hd1-right">
-                        <dbp-auth-menu-button subscribe="auth" class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
-                    </div>
-                    <div class="hd2-left">
-                        <div class="header">
-                            ${this.shellName}<br>${this.shellSubname}
+                    <slot name="header">
+                        <div class="hd1-left">
+                            <dbp-language-select lang="${this.lang}"></dbp-language-select>
                         </div>
-                    </div>
-                    <div class="hd2-right">
-                        <dbp-tugraz-logo id="main-logo" lang="${this.lang}" class="${classMap({hidden: this.noBrand})}"></dbp-tugraz-logo>
-                    </div>
+                        <div class="hd1-middle">
+                        </div>
+                        <div class="hd1-right">
+                            <dbp-auth-menu-button subscribe="auth" class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
+                        </div>
+                        <div class="hd2-left">
+                            <div class="header">
+                                <slot name="name">${this.shellName}<br>${this.shellSubname}</slot>
+                            </div>
+                        </div>
+                        <div class="hd2-right">
+                            <slot name="logo"><dbp-tugraz-logo id="main-logo" lang="${this.lang}" class="${classMap({hidden: this.noBrand})}"></dbp-tugraz-logo></slot>
+                        </div>
+                    </slot>
                 </header>
                 <div id="headline">
                     <h1 class="title">${this.topicMetaDataText('name')}</h1>
@@ -923,10 +925,12 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
                 </main>
 
                 <footer>
-                    <a target="_blank" rel="noopener" class="int-link-external" href="https://datenschutz.tugraz.at/erklaerung/">${i18n.t('privacy-policy')}</a>
-                    <a target="_blank" rel="noopener" class="int-link-external" href="${imprintUrl}">${i18n.t('imprint')}</a>
-                    <a rel="noopener" class="int-link-external" href="mailto:it-support@tugraz.at">${i18n.t('contact')}</a>
-                    <dbp-build-info class="${prodClassMap}" git-info="${this.gitInfo}" env="${this.env}" build-url="${this.buildUrl}" build-time="${this.buildTime}"></dbp-build-info>
+                    <slot name="footer">
+                        <a target="_blank" rel="noopener" class="int-link-external" href="https://datenschutz.tugraz.at/erklaerung/">${i18n.t('privacy-policy')}</a>
+                        <a target="_blank" rel="noopener" class="int-link-external" href="${imprintUrl}">${i18n.t('imprint')}</a>
+                        <a rel="noopener" class="int-link-external" href="mailto:it-support@tugraz.at">${i18n.t('contact')}</a>
+                        <dbp-build-info class="${prodClassMap}" git-info="${this.gitInfo}" env="${this.env}" build-url="${this.buildUrl}" build-time="${this.buildTime}"></dbp-build-info>
+                    </slot>
                 </footer>
             </div>
             </div>