Use template slots in 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.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">
+    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/favicon.svg" sizes="any">
 
     <!-- PWA manfiest file -->
-    <link rel="manifest" href="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/dbp-signature.manifest.json">
+    <link rel="manifest" href="https://unpkg.com/@dbp-topics/signature@1.0.10/dist/dbp-signature.manifest.json">
 
     <!-- PWA iphone -->
-    <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">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/@dbp-topics/signature@1.0.10/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.10/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.10/dist/local/@dbp-topics/signature/icon-16x16.png">
 
     <!-- Loading spinner -->
     <script type="module">
-        import {Spinner} from 'https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/spinner.js';
+        import {Spinner} from 'https://unpkg.com/@dbp-topics/signature@1.0.10/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.9/dist/dbp-signature.js"></script>
+    <script type="module" src="https://unpkg.com/@dbp-topics/signature@1.0.10/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.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";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/fonts/source-sans-pro/300.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/fonts/source-sans-pro/400.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/fonts/source-sans-pro/600.css";
 
         body {
             font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
@@ -51,10 +51,6 @@
             --dbp-override-success-bg-color: #259207;
         }
 
-        .slot-hidden {
-            display: none;
-        }
-
         #main-logo {
             padding: 0 50px 0 0;
         }
@@ -97,15 +93,15 @@
         initial-file-handling-state
         clipboard-files
         auth requested-login-status analytics-event
-        src="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/dbp-signature.topic.metadata.json"
+        src="https://unpkg.com/@dbp-topics/signature@1.0.10/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>
-    <div slot="name" class="slot-hidden">
-        TU Graz<br />
+    <template slot="name">
+        DBP<br />
         <dbp-translated subscribe="lang">
             <div slot="de">
                 Eine Universität
@@ -114,11 +110,11 @@
                 A University
             </div>
         </dbp-translated>
-    </div>
-    <div slot="logo" class="slot-hidden">
+    </template>
+    <template slot="logo">
         <img src="/logo.png" />
-    </div>
-    <div slot="footer-links" class="slot-hidden">
+    </template>
+    <template slot="footer-links">
         <dbp-translated subscribe="lang">
             <div slot="de" class="footer-links">
                 <a target="_blank" rel="noopener" href="#link">Mein Link</a>
@@ -127,11 +123,11 @@
                 <a target="_blank" rel="noopener" href="#link">My link</a>
             </div>
         </dbp-translated>
-    </div>
+    </template>
 </dbp-signature>
 
 <!-- Error handling for too old browsers -->
-<script src="https://unpkg.com/@dbp-topics/signature@1.0.9/dist/local/@dbp-topics/signature/browser-check.js" defer></script>
+<script src="https://unpkg.com/@dbp-topics/signature@1.0.10/dist/local/@dbp-topics/signature/browser-check.js" defer></script>
 <noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>
 </body>
 </html>