Add credits

Readme.md

@@ -58,7 +58,9 @@ The webcomponent uses a shadow dom and encapsulate the styles. So it will not us
 ### Slots
 Slots provides the possibility to override some part of the webcomponent. The histhub-widget provides a `title` and a `defaut` slot.
 #### Heading (slot)
-You can change the Heading of the widget with the `title` slot. This slot will override the default title. In allmost all examples we use this slot to change the title. If you override a slot your site css rules applies for this element. Example #6 changes the color of the heading
+You can change the Heading of the widget with the `title` slot. This slot will override the default title. In almost all examples we use this slot to change the title. If you override a slot your site css rules applies for this element. Example #6 changes the color of the heading
+#### Credits
+You can change the `credits` in the corresponding slot. Please make sure you mention our work.  In the example 
 #### Default Slot
 If you want to display some additional text beneath the links you can use the default slot. Just put the content inside the histhub-widget element. Example #7 adds additional information under the links
 ### Css Variables

examlpe/index.html

@@ -82,6 +82,10 @@
         </histhub-widget>
         <histhub-widget id="vars" endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
         </histhub-widget>
+        <histhub-widget  endpoint="//api.geolinker.histhub.ch/v1-1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
+            <h3 slot="title">Example 10: Links (similarto) from geolinker dodis: Diedenhofen with credits</h3>
+            <p slot="credits">Example credits</p>
+        </histhub-widget>
     </div>
 </body>
 </html>

src/histhub-widget.js

@@ -35,12 +35,12 @@
                 display: var(--histhub-li-display);
             }
             
-            ul li a {
+            a {
                 color: var(--histhub-a-color);
                 display: var(--histhub-a-display);
-            }
+            } 
             
-            ul li a:hover {
+            a:hover {
                 color: var(--histhub-a-hover-color);
                 text-decoration: var(--histhub-a-hover-text-decoration);
             }
@@ -50,10 +50,14 @@
                 margin: var(--histhub-h3-margin);
                 color: var(--histhub-h3-color);
             }
+            .credits {
+                font-size: 75%;
+            }
             
         </style>
         <slot name="title"><h3>Histhub Links</h3></slot>
         <div id="links">Loading data...</div>
+        <slot name="credits"><p class="credits">Links powered by <a href="//histhub.ch" target="_blank" title="Histhub">histHub</a> - die Vernetzungsinitiative des Consortium Historicum</p></slot>
         <slot></slot>`;
 
   class HisthubWidget extends HTMLElement {
@@ -212,8 +216,7 @@
       if (!this.loading) {
         if (this.links === null || this.links.length === 0 ) {
           // hide if there is no data
-          this._linksSlot.style.display = 'none';
-          this._titleSlot.style.display = 'none';
+          this.shadowRoot.host.style.display = 'none';
         } else {
           // small util to build the links
           const buildLinks = () => this.links.map((link) => {