From 27e7ae354777aadc2b12ac7e608515e79d65a2f9 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Mon, 13 Feb 2023 13:32:40 +0100
Subject: [PATCH] Added linkding widget

---
 src/components/Widgets/Linkding.vue   | 89 +++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |  1 +
 2 files changed, 90 insertions(+)
 create mode 100644 src/components/Widgets/Linkding.vue

diff --git a/src/components/Widgets/Linkding.vue b/src/components/Widgets/Linkding.vue
new file mode 100644
index 00000000..c5c60ef4
--- /dev/null
+++ b/src/components/Widgets/Linkding.vue
@@ -0,0 +1,89 @@
+<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;
+    },
+  },
+  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) {
+      this.links = data.results;
+    },
+  },
+};
+</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>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 0f310a9d..fd6543e7 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/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',