Use slots with own design for the example

examples/dbp-signature/index.html

@@ -5,34 +5,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Favicons -->
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/favicon.ico">
-    <link rel="icon" type="image/svg+xml" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/favicon.svg" sizes="any">
+    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/favicon.svg" sizes="any">
 
     <!-- PWA manfiest file -->
-    <link rel="manifest" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/dbp-signature.manifest.json">
+    <link rel="manifest" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/dbp-signature.manifest.json">
 
     <!-- PWA iphone -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/icon-16x16.png">
 
     <!-- Loading spinner -->
     <script type="module">
-        import {Spinner} from 'https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/spinner.js';
+        import {Spinner} from 'https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/spinner.js';
         customElements.define('dbp-loading-spinner', Spinner);
     </script>
 
     <!-- App bundles-->
-    <script type="module" src="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/dbp-signature.js"></script>
+    <script type="module" src="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/dbp-signature.js"></script>
 
     <!-- Prevent Chrome/Edge from suggesting to translate the page -->
     <meta name="google" content="notranslate">
 
     <!-- Font related CSS -->
     <style>
-        @import "https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/fonts/source-sans-pro/300.css";
-        @import "https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/fonts/source-sans-pro/400.css";
-        @import "https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/fonts/source-sans-pro/600.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/fonts/source-sans-pro/300.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/fonts/source-sans-pro/400.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/fonts/source-sans-pro/600.css";
 
         body {
             font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
@@ -50,6 +50,33 @@
             --dbp-override-warning-text-color: black;
             --dbp-override-success-bg-color: #259207;
         }
+
+        .slot-hidden {
+            display: none;
+        }
+
+        #main-logo {
+            padding: 0 50px 0 0;
+        }
+
+        .footer-links {
+            margin-top: 0.5em;
+        }
+
+        .footer-links a {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 0;
+            margin-left: 1em;
+            transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
+            color: #6c757d;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .footer-links a:hover {
+            color: #fff;
+            background-color: #000;
+        }
     </style>
 
     <!-- Preloading/Preconnecting -->
@@ -70,16 +97,41 @@
         initial-file-handling-state
         clipboard-files
         auth requested-login-status analytics-event
-        src="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/dbp-signature.topic.metadata.json"
+        src="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/dbp-signature.topic.metadata.json"
         base-path="/"
         keycloak-config='{"url": "https://auth-dev.tugraz.at/auth", "realm": "tugraz", "clientId": "auth-dev-mw-frontend-local", "silentCheckSsoRedirectUri": "./silent-check-sso.html"}'
         matomo-url='https://analytics.tugraz.at/'
         matomo-site-id='131'
         env='local'
-><dbp-loading-spinner></dbp-loading-spinner></dbp-signature>
+><dbp-loading-spinner></dbp-loading-spinner>
+    <div slot="name" class="slot-hidden">
+        TU Graz<br />
+        <dbp-translated subscribe="lang">
+            <div slot="de">
+                Eine Universität
+            </div>
+            <div slot="en">
+                A University
+            </div>
+        </dbp-translated>
+    </div>
+    <div slot="logo" class="slot-hidden">
+        <img src="/logo.png" />
+    </div>
+    <div slot="footer-links" class="slot-hidden">
+        <dbp-translated subscribe="lang">
+            <div slot="de" class="footer-links">
+                <a target="_blank" rel="noopener" href="#link">Mein Link</a>
+            </div>
+            <div slot="en" class="footer-links">
+                <a target="_blank" rel="noopener" href="#link">My link</a>
+            </div>
+        </dbp-translated>
+    </div>
+</dbp-signature>
 
 <!-- Error handling for too old browsers -->
-<script src="https://unpkg.com/@dbp-topics/signature@1.0.7/dist/local/@dbp-topics/signature/browser-check.js" defer></script>
+<script src="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/browser-check.js" defer></script>
 <noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>
 </body>
 </html>