Commit 3f68dfcb authored by Tobinsk's avatar Tobinsk
Browse files

Merge branch '1-build-webcomponent' into 'master'

Resolve "build webcomponent"

Closes #1

See merge request !3
parents 8f19610e f925c2f3
# Geolinker widget
tbd
# Histhub widget
The histhub widget can display sameas resources from histhub linking services. You can integrate it into your site and display links to other providers. __The widget and the apis are in beta status. They may change in the future.__
## Webcomponent
The widget itself is a [webc omponent](https://en.wikipedia.org/wiki/Web_Components). It integrates smoothly into an existing website. You just need to add some markup and load a javascript file.
## Integration
Just have a look at the examp,e folder. There you can find a set of working examples.
```html
<html>
<head>
<!-- load the script in your header -->
<script src="../src/histhub-widget.js"></script>
</head>
</html>
```
```html
<!-- add the component wehre you like to display the links -->
<histhub-widget endpoint="ENDPOINT" resolver="RESOLVER" location="URL TO LOOK FOR"></histhub-widget>
```
## API
### Endpoint
The endpoint defines the restapi, where the widget makes the call to get the links. Currently we provide three endpoints for different resource types.
* Tagcloud https://api.tagcloud.histhub.ch/v1/sameas/
* Geolinker https://api.geolinker.histhub.ch/v1/sameas/
* Geolinker https://api.geolinker.histhub.ch/v1/similarto/
* Orgalinker https://api.orgalinker.histhub.ch/v1/sameas/
Choose one of the endpoint to get links for your resource
### Resolver
The endpoint uses different technologies to generate the links. Those technologies calls resolver. You need to define a resolver to get the links for your preferences.
__Tagcloud and Orgalinker__
For those two services we provide the `resolvermanual` . The links provided by this resolver are done by humans. See examle 1 and example 2
__Geolinker__
The geolinker provides for the `sameas` endpoint the `resolverneo4j` resolver. The links provided by this resolver are done semiautomatical. See example 3
For the `similarto` endpoint the geolinker provides a `elasticsearchresolver`. The data are guessed based on a matching algorithm. See example 4
### Location
The location is an optional parameter. By default the widget uses the current window.location.href to make the request. You can specify the url to look for over the url parameter
......@@ -2,19 +2,32 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Histhub widget </title>
<title>Example of the histhub widget (beta) </title>
<script src="../src/histhub-widget.js"></script>
<style>
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<histhub-widget endpoint="//api.tagcloud.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/T171">
<h3 slot="title">Links from tagcloud</h3>
</histhub-widget>
<histhub-widget endpoint="//api.orgalinker.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/R20">
<h3 slot="title">Links from orgalinker</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G8">
<h3 slot="title">Links from orgalinker</h3>
</histhub-widget>
<div class="container">
<h1>Example of the histhub widget (beta)</h1>
<p>The histhub widget can fetch sameas resources for different resoucrces. It makes a simple http request to one of the backends and gets a list of links from there. It finally renders the links in a list and display them.</p>
<histhub-widget endpoint="//api.tagcloud.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/T171">
<h3 slot="title">Example 1: Links from tagcloud dodis: Aussenpolitik (allg.)</h3>
</histhub-widget>
<histhub-widget endpoint="//api.orgalinker.histhub.ch/v1/sameas/" resolver="resolvermanual" location="https://dodis.ch/R20">
<h3 slot="title">Example 2: Links from orgalinker dodis: Lombard, Odier & Cie</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1/sameas/" resolver="resolverneo4j" location="https://dodis.ch/G82">
<h3 slot="title">Example 3: Links (sameas) from geolinker dodis: Diedenhofen</h3>
</histhub-widget>
<histhub-widget endpoint="//api.geolinker.histhub.ch/v1/similarto/" resolver="resolverelasticsearch" location="https://dodis.ch/G82">
<h3 slot="title">Example 4: Links (similarto) from geolinker dodis: Diedenhofen</h3>
</histhub-widget>
</div>
</body>
</html>
......@@ -2,11 +2,12 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
:host ul {
ul {
margin-left: 1rem;
padding: 0;
}
:host h3 {
::slotted(h3),
h3 {
margin-bottom: 0.5rem;
}
</style>
......@@ -122,10 +123,11 @@
const buildLinks = () => this.links.map((link) => {
let anchor = null;
let href = null;
// check f we get an array or an object
if (typeof link === "object") {
const provider = Object.keys(link)[0];
if (typeof provider !== "string" && provider !== "") {
// often we do not have information about the provider
if (typeof provider === "string" && provider !== "") {
anchor = provider;
} else {
anchor = link[provider];
......@@ -135,6 +137,7 @@
href = link;
anchor = link;
}
// build the list
return `<li><a href="${href}"> ${anchor}</a></li>`;
});
this._linksSlot.innerHTML = `<ul>${buildLinks().join("")}</ul>`;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment