From 5d3029eb75f3af01e4ed6576a21c253c64423580 Mon Sep 17 00:00:00 2001
From: Matthew Dupuis <mrdupuis23@gmail.com>
Date: Mon, 22 Jul 2024 23:28:47 -0400
Subject: [PATCH] feat: added SecondaryLink service to allow a second link to
 be added to generic cards.

---
 docs/customservices.md                    | 15 +++++++++++
 src/components/services/SecondaryLink.vue | 32 +++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/services/SecondaryLink.vue

diff --git a/docs/customservices.md b/docs/customservices.md
index fb038d1..d4b7369 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -52,6 +52,21 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
   type: "<type>"
 ```
 
+## SecondaryLink
+
+The SecondaryLink service allows generic cards to have a second link added to them in the format of an icon.
+
+The following configuration is available for the SecondaryLink service:
+
+```yaml
+- type: "SecondaryLink"
+  SecondaryLinkUrl: "https://my-second-link" # url for the second link
+  SecondaryLinkTarget: "_blank" # optional html tag target attribute.
+  SecondaryLinkHover: " " # optional text to show when the second link is hovered over.
+  SecondaryLinkIcon: "fas fa-circle-info" # icon to use as the visual indicator of the link
+```
+Like the rest of Homer, FontAwesome icons can be used for the SecondaryLinkIcon.
+
 ## PiHole
 
 Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
diff --git a/src/components/services/SecondaryLink.vue b/src/components/services/SecondaryLink.vue
new file mode 100644
index 0000000..10a6f81
--- /dev/null
+++ b/src/components/services/SecondaryLink.vue
@@ -0,0 +1,32 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="status">
+        <a :href="item.SecondaryLinkUrl" :target="item.SecondaryLinkTarget" :title="item.SecondaryLinkHover" rel="noreferrer">
+          <i
+          class="fa-xl" :class="item.SecondaryLinkIcon"
+        ></i>
+        </a>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "SecondaryLink",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    animate: false,
+  }),
+};
+</script>