feat(cards): add multi link support

bastienwirtz · Feb 2, 2025 · 3468b9d · 3468b9d
1 parent 45acac7
commit 3468b9d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 14 deletions.
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
@@ -6,7 +6,8 @@ Here is a collection of neat tips and tricks that Homer users have come up with!
 
 Great source to find service icons
 
-- <https://github.com/walkxcode/dashboard-icons>
+- <https://selfh.st/icons/>
+- <https://github.com/homarr-labs/dashboard-icons>
 
 ## Use Homer as a custom "new tab" page
 

diff --git a/public/assets/config-demo.yml.dist b/public/assets/config-demo.yml.dist
@@ -69,9 +69,17 @@ services:
         url: "https://github.com/bastienwirtz/homer/blob/main/docs/customservices.md"
       - name: "Dashboard icons"
         icon: "fa-solid fa-icons"
-        subtitle: "Dashboard icons"
         tag: "setup"
-        url: "https://github.com/walkxcode/dashboard-icons"
+        url: ""
+        quick:
+          - name: "selfh.st"
+            url: "https://selfh.st/icons/"
+            icon: "fa-solid fa-arrow-up-right-from-square"
+            target: "_blank"
+          - name: "homarr-labs"
+            url: "https://github.com/homarr-labs/dashboard-icons"
+            icon: "fa-solid fa-arrow-up-right-from-square"
+            target: "_blank"
       - name: "Buy me a coffee!"
         subtitle: "Sponsor this project"
         icon: "fa-solid fa-mug-hot"
@@ -116,18 +124,19 @@ services:
     icon: "fa-regular fa-bookmark"
     class: highlight-inverted
     items:
-      - name: "r/selfhosted"
+      - name: "Selfhosted community"
         icon: "fa-brands fa-reddit-alien"
-        subtitle: "selfhosted community on Reddit"
         tag: "community"
-        url: "https://www.reddit.com/r/selfhosted/"
-        target: "_blank"
-      - name: "c/selfhosted"
-        logo: "https://icons.iconarchive.com/icons/simpleicons-team/simple/256/lemmy-icon.png"
-        subtitle: "selfhosted community on Lemmy"
-        tag: "community"
-        url: "https://lemmy.world/c/selfhosted"
-        target: "_blank" 
+        url: ""
+        quick:
+          - name: "r/selfhosted"
+            url: "https://www.reddit.com/r/selfhosted/"
+            icon: "fa-solid fa-arrow-up-right-from-square"
+            target: "_blank"
+          - name: "c/selfhosted"
+            url: "https://lemmy.world/c/selfhosted"
+            icon: "fa-solid fa-arrow-up-right-from-square"
+            target: "_blank"
       - name: "Awesome selfhosted"
         icon: "fa-solid fa-star"
         subtitle: "Another application"

diff --git a/src/assets/themes/classic.scss b/src/assets/themes/classic.scss
@@ -26,7 +26,7 @@
   --text: #eaeaea;
   --text-header: #ffffff;
   --text-title: #fafafa;
-  --text-subtitle: #b6b6b6;
+  --text-subtitle: #b6b6b6; 
   --card-shadow: rgba(0, 0, 0, 0.4);
   --link: #3273dc;
   --link-hover: #144aa2;

diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
@@ -19,6 +19,19 @@
             <div class="media-content">
               <slot name="content">
                 <p class="title">{{ item.name }}</p>
+                <p v-if="item.quick" class="quicklinks">
+                  <a 
+                    v-for="(link, linkIndex) in item.quick" 
+                    :key="linkIndex" 
+                    :style="`background-color:${link.color};`" 
+                    :href="link.url" 
+                    :target="link.target" 
+                    rel="noreferrer"
+                  > 
+                      <span v-if="item.icon"><i style="font-size: 12px" :class="['fa-fw', link.icon]"></i></span> 
+                      {{ link.name }}
+                  </a>
+                </p>
                 <p v-if="item.subtitle" class="subtitle">
                   {{ item.subtitle }}
                 </p>
@@ -61,4 +74,23 @@ export default {
     object-fit: contain;
   }
 }
+
+a[href=""] {
+  pointer-events: none;
+  cursor: default;
+}
+
+.quicklinks {
+  float: right;
+  a {
+    font-size: 0.75rem;
+    padding: 3px 6px;
+    margin-left: 6px;
+    border-radius: 100px;
+    background-color: var(--background);
+    z-index: 9999;
+    pointer-events: all;
+  }
+}
+
 </style>