From 3df1f6b766416fadfc85311e55b29cc2bad7b8a2 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Sat, 27 Aug 2022 13:49:24 +0300
Subject: [PATCH] add support for custom and other remote icons

---
 public/icons                             |  1 +
 src/components/services/item.jsx         | 41 +++++++++++++++---------
 src/skeleton/icons/custom-icons-here.txt |  0
 3 files changed, 27 insertions(+), 15 deletions(-)
 create mode 120000 public/icons
 create mode 100644 src/skeleton/icons/custom-icons-here.txt

diff --git a/public/icons b/public/icons
new file mode 120000
index 00000000..3f72857d
--- /dev/null
+++ b/public/icons
@@ -0,0 +1 @@
+../config/icons
\ No newline at end of file
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 3cc4cdab..c7bc2d2e 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -1,30 +1,41 @@
 import Image from "next/future/image";
-import { useState } from "react";
-import { Disclosure, Transition } from "@headlessui/react";
+import { Disclosure } from "@headlessui/react";
 
 import Status from "./status";
 import Widget from "./widget";
 import Docker from "./widgets/service/docker";
 
+function resolveIcon(icon) {
+  if (icon.startsWith("http")) {
+    return `/api/proxy?url=${encodeURIComponent(icon)}`;
+  } else if (icon.startsWith("/")) {
+    return `/icons${icon}`;
+  } else {
+    if (icon.endsWith(".png")) {
+      return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
+    } else {
+      return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
+    }
+  }
+}
+
 export default function Item({ service }) {
   return (
     <li key={service.name} className="">
       <Disclosure>
         <div className="transition-all h-15 overflow-hidden mb-3 cursor-pointer p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10">
           <div className="flex">
-            <div
-              onClick={() => {
-                window.open(service.href, "_blank").focus();
-              }}
-              className="flex-shrink-0 flex items-center justify-center w-12 "
-            >
-              <Image
-                src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${service.icon}`}
-                width={32}
-                height={32}
-                alt="logo"
-              />
-            </div>
+            {service.icon && (
+              <div
+                onClick={() => {
+                  window.open(service.href, "_blank").focus();
+                }}
+                className="flex-shrink-0 flex items-center justify-center w-12 "
+              >
+                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+              </div>
+            )}
+
             <div
               onClick={() => {
                 window.open(service.href, "_blank").focus();
diff --git a/src/skeleton/icons/custom-icons-here.txt b/src/skeleton/icons/custom-icons-here.txt
new file mode 100644
index 00000000..e69de29b