Merge branch 'feature/addCustomCategoryIcons'

src/components/services/group.jsx

@@ -1,6 +1,8 @@
+import Image from "next/future/image";
 import classNames from "classnames";
 
 import List from "components/services/list";
+import { resolveIcon } from "utils/icon-resolver";
 
 export default function ServicesGroup({ services, layout }) {
   return (
@@ -11,7 +13,12 @@ export default function ServicesGroup({ services, layout }) {
         "flex-1 p-1"
       )}
     >
-      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <div className="flex select-none">
+      {services.icon &&
+        <Image src={resolveIcon(services.icon)} width={32} height={32} alt="logo" className="flex-shrink-0 flex items-center justify-center w-10"/>
+      }
+        <h2 className={services.icon ? "text-theme-800 dark:text-theme-300 text-xl font-medium flex-1 flex items-center justify-between rounded-r-md flex-1 px-2 py-2 text-sm text-left" : "text-theme-800 dark:text-theme-300 text-xl font-medium h2-title-noicon"}>{services.name}</h2>
+      </div>
       <List services={services.services} layout={layout} />
     </div>
   );

src/components/services/item.jsx

@@ -7,22 +7,7 @@ import Widget from "./widget";
 
 import Docker from "widgets/docker/component";
 import { SettingsContext } from "utils/contexts/settings";
-
+import { resolveIcon } from "utils/icon-resolver";
-function resolveIcon(icon) {
-  if (icon.startsWith("http")) {
-    return `/api/proxy?url=${encodeURIComponent(icon)}`;
-  }
-
-  if (icon.startsWith("/")) {
-    return icon;
-  }
-
-  if (icon.endsWith(".png")) {
-    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
-  }
-
-  return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
-}
 
 export default function Item({ service }) {
   const hasLink = service.href && service.href !== "#";

src/skeleton/services.yaml

@@ -3,16 +3,21 @@
 # https://github.com/benphelps/homepage/wiki/Services
 
 - My First Group:
-    - My First Service:
+    icon: 'https://cdn-icons-png.flaticon.com/512/252/252035.png'
-        href: http://localhost/
+    services:
-        description: Homepage is awesome
+        - My First Service:
-
+            icon: "https://cdn-icons-png.flaticon.com/512/1835/1835948.png"
+            href: http://localhost/
+            description: Homepage is awesome
 - My Second Group:
-    - My Second Service:
+    services:
-        href: http://localhost/
+        - My Second Service:
-        description: Homepage is the best
+            href: http://localhost/
+            description: Homepage is the best
 
 - My Third Group:
-    - My Third Service:
+    icon: 'https://cdn-icons-png.flaticon.com/512/2382/2382533.png'
-        href: http://localhost/
+    services:
-        description: Homepage is 😎
+        - My Third Service:
+            href: http://localhost/
+            description: Homepage is 😎

src/styles/globals.css

@@ -39,3 +39,8 @@ body {
   background-color: rgb(var(--color-600));
   border-radius: 0.25em;
 }
+
+.h2-title-noicon {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

src/utils/config/api-response.js

@@ -74,6 +74,7 @@ export async function servicesResponse() {
 
     const mergedGroup = {
       name: groupName,
+      icon: configuredGroup.icon,
       services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
     };
 

src/utils/config/service-helpers.js

@@ -20,9 +20,11 @@ export async function servicesFromConfig() {
   }
 
   // map easy to write YAML objects into easy to consume JS arrays
-  const servicesArray = services.map((servicesGroup) => ({
+  const servicesArray = services.map((servicesGroup) => (
+    {
     name: Object.keys(servicesGroup)[0],
-    services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({
+    icon: Object.prototype.hasOwnProperty.call(servicesGroup[Object.keys(servicesGroup)[0]], 'icon') ? servicesGroup[Object.keys(servicesGroup)[0]].icon : '',
+    services: servicesGroup[Object.keys(servicesGroup)[0]].services.map((entries) => ({
       name: Object.keys(entries)[0],
       ...entries[Object.keys(entries)[0]],
     })),
@@ -106,6 +108,7 @@ export async function servicesFromDocker() {
 export function cleanServiceGroups(groups) {
   return groups.map((serviceGroup) => ({
     name: serviceGroup.name,
+    icon: serviceGroup.icon,
     services: serviceGroup.services.map((service) => {
       const cleanedService = { ...service };
 

src/utils/icon-resolver.js

@@ -0,0 +1,15 @@
+export function resolveIcon(icon) {
+    if (icon.startsWith("http")) {
+        return `/api/proxy?url=${encodeURIComponent(icon)}`;
+    }
+
+    if (icon.startsWith("/")) {
+        return icon;
+    }
+
+    if (icon.endsWith(".png")) {
+        return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
+    }
+
+    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
+}