🔀 Merge pull request #1106 from m42e/linkding

Added linkding widget

docs/widgets.md

@@ -61,6 +61,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Sabnzbd](#sabnzbd)
   - [Gluetun VPN Info](#gluetun-vpn-info)
   - [Drone CI Build](#drone-ci-builds)
+  - [Linkding](#linkding)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -2046,7 +2047,7 @@ Display the last builds from a [Drone CI](https://www.drone.ci) instance. A self
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
-**`host`** | `string` |  Required | The histname of the Drone CI instance.
+**`host`** | `string` |  Required | The hostname of the Drone CI instance.
 **`apiKey`** | `string` |  Required | The API key (https://<your-drone-instance>/account).
 **`limit`** | `integer` | _Optional_ | Limit the amounts of listed builds.
 **`repo`** | `string` | _Optional_ | Show only builds of the specified repo
@@ -2072,10 +2073,44 @@ Display the last builds from a [Drone CI](https://www.drone.ci) instance. A self
 
 ---
 
+### Linkding
+
+Linkding is a self-hosted bookmarking service, which has a clean interface and is simple to set up. This lists the links, filterable by tags.
+
+#### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`host`** | `string` |  Required | The hostname of the Drone CI instance.
+**`apiKey`** | `string` |  Required | The API key (https://<your-linkding-instance>/settings/integrations).
+**`tags`** | `list of string` | _Optional_ | Filter the links by tag.
+
+#### Example
+
+```yaml
+- type: linkding
+  updateInterval: 30
+  options:
+    host: https://lingding.somedomain.com
+    apiKey: my-very-secret-api-key
+    tags: 
+      - rpg
+      - markdown
+```
+
+#### Info
+
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Linkding](https://github.com/sissbruecker/linkding))
+- **Privacy**: _See [Linkding](https://github.com/sissbruecker/linkding)_
+
+---
+
 ## System Resource Monitoring
 
 ### Glances
-
 The easiest method for displaying system info and resource usage in Dashy is with [Glances](https://nicolargo.github.io/glances/).
 
 Glances is a cross-platform monitoring tool developed by [@nicolargo](https://github.com/nicolargo). It's similar to top/htop but with a [Rest API](https://glances.readthedocs.io/en/latest/api.html) and many [data exporters](https://glances.readthedocs.io/en/latest/gw/index.html) available. Under the hood, it uses [psutil](https://github.com/giampaolo/psutil) for retrieving system info.

src/components/Widgets/Linkding.vue

@@ -0,0 +1,102 @@
+<template>
+<div class="linkding-outer-wrapper">
+  <div class="linkding-wrapper" v-if="links">
+    <ul>
+      <li
+        v-for="link in links"
+        v-bind:key="link.id"
+        class="lingkding-link"
+      >
+        <a :href="link.url" target="_blank">
+          <span class="linktext" v-tooltip="link.description">{{link.title}}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      links: null,
+    };
+  },
+  computed: {
+    endpoint() {
+      if (!this.options.host) this.error('linkgding Host is required');
+      return `${this.options.host}/api/bookmarks`;
+    },
+    apiKey() {
+      if (!this.options.apiKey) this.error('linkgding apiKey is required');
+      return this.options.apiKey;
+    },
+    filtertags() {
+      return this.options.tags;
+    },
+  },
+  methods: {
+    update() {
+      this.startLoading();
+      this.fetchData();
+      this.finishLoading();
+    },
+    fetchData() {
+      const authHeaders = { Authorization: `Token ${this.apiKey}` };
+      this.makeRequest(this.endpoint, authHeaders).then(
+        (response) => { this.processData(response); },
+      );
+    },
+    processData(data) {
+      const self = this;
+      const fltr = function (entry) {
+        if (self.filtertags === null) return true;
+        for (let i = 0; i < self.filtertags.length; i += 1) {
+          if (entry.tag_names.includes(self.filtertags[i])) return true;
+        }
+        return false;
+      };
+      this.links = data.results.filter(
+        entry => fltr(entry),
+      );
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.linkdign-wrapper {
+}
+</style>
+<style scoped lang="scss">
+.linkding-wrapper {
+
+  ul {
+    list-style: none;
+    padding: 0px;
+    color: var(--widget-text-color);
+  li {
+    opacity: var(--dimming-factor);
+    a, a:hover, a:visited, a:active {
+        font-weight: bold;
+      color: var(--widget-text-color);
+    }
+    span.linktext {
+      color: var(--widget-text-color);
+    }
+    padding-top:0.2em;
+    padding-bottom:0.2em;
+    &:before
+    {
+        content: '🔗';
+        margin: 0 0.7em;    /* any design */
+    }
+  }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -84,6 +84,7 @@ const COMPAT = {
   joke: 'Jokes',
   'mullvad-status': 'MullvadStatus',
   mvg: 'Mvg',
+  linkding: 'Linkding',
   'mvg-connection': 'MvgConnection',
   'nd-cpu-history': 'NdCpuHistory',
   'nd-load-history': 'NdLoadHistory',