Merge pull request #895 from cbos/linkding_support

Add Linkding support

docs/customservices.md

@@ -25,6 +25,7 @@ within Homer:
 - [Immich](#immich)
 - [Jellystat](#jellystat)
 - [Lidarr, Prowlarr, Sonarr, Readarr and Radarr](#lidarr-prowlarr-sonarr-readarr-and-radarr)
+- [Linkding](#linkding)
 - [Matrix](#matrix)
 - [Mealie](#mealie)
 - [Medusa](#medusa)
@@ -279,6 +280,27 @@ If you are using an older version of Radarr or Sonarr which don't support the ne
   legacyApi: true
 ```
 
+## Linkding
+
+This integration makes it possible to query Linkding and list multiple results from Linkding.   
+Linkding has to be configured with CORS enabled. Linkding does not support that, but a reverse proxy in front can fix that.   
+For example if you use Traefik, documentation about that is here: https://doc.traefik.io/traefik/middlewares/http/headers/#cors-headers   
+Examples for various servers can be found at https://enable-cors.org/server.html.   
+
+This integration supports at max 15 results from Linkding. But you can add it multiple times to you dashboard with different queries to retrieve what you need.
+
+```yaml
+      - name: "Linkding"
+        # Url to Linkding instance
+        url: https://ld.ceesbos.nl
+        token: "<add your secret token here>"
+        type: "Linkding"
+        # Maximum number of items returned by Linkding, minimal 1 and max 15
+        limit: 10 
+        # query to do on Linkding. User #tagname to search for tags
+        query: "#ToDo #Homer" 
+```
+
 ## Matrix
 
 This service displays a version string instead of a subtitle. The indicator

src/components/services/Linkding.vue

@@ -0,0 +1,63 @@
+<template>
+  <Generic v-for="bookmark in bookmarks" :key="bookmark.name" :item="bookmark">
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Linkding",
+  components: {
+    Generic,
+  },
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    bookmarks: [],
+  }),
+  computed: {
+    calculatedLimit: function () {
+      const limit = parseInt(this.item.limit) || 5;
+      return Math.min(Math.max(limit, 1), 15);
+    },
+  },
+  created() {
+    this.fetchBookmarks();
+  },
+  methods: {
+    fetchBookmarks: async function () {
+      const headers = {
+        Authorization: `Token ${this.item.token}`,
+        Accept: "application/json",
+      };
+
+      let query = "";
+      if (this.item.query) {
+        query = `&q=${encodeURIComponent(this.item.query)}`;
+      }
+
+      let url = `/api/bookmarks/?limit=${this.calculatedLimit}${query}`;
+
+      this.fetch(url, {
+        headers,
+      })
+        .then((ld_response) => {
+          this.bookmarks = ld_response.results.map((bookmark) => ({
+            name: `${bookmark.title}`,
+            subtitle: `${bookmark.description}`,
+            url: bookmark.url,
+            logo: `${bookmark.favicon_url}`,
+            tag: `${bookmark.tag_names.join(" #")}`,
+          }));
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+  },
+};
+</script>