From 78c947766951e14d1f6db290c0ab03ccc8f1ebc3 Mon Sep 17 00:00:00 2001 From: Mindfreak9100 Date: Wed, 28 Sep 2022 16:16:51 -0400 Subject: [PATCH 1/3] Update setting.yaml mapping --- src/skeleton/services.yaml | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/skeleton/services.yaml b/src/skeleton/services.yaml index 9514f67e..a06b9286 100644 --- a/src/skeleton/services.yaml +++ b/src/skeleton/services.yaml @@ -3,16 +3,21 @@ # https://github.com/benphelps/homepage/wiki/Services - My First Group: - - My First Service: - href: http://localhost/ - description: Homepage is awesome - + icon: 'https://cdn-icons-png.flaticon.com/512/252/252035.png' + services: + - 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: - href: http://localhost/ - description: Homepage is the best + services: + - My Second Service: + href: http://localhost/ + description: Homepage is the best - My Third Group: - - My Third Service: - href: http://localhost/ - description: Homepage is 😎 + icon: 'https://cdn-icons-png.flaticon.com/512/2382/2382533.png' + services: + - My Third Service: + href: http://localhost/ + description: Homepage is 😎 From 9916ae33723357d78530ba909e117dff77172b7f Mon Sep 17 00:00:00 2001 From: Mindfreak9100 Date: Wed, 28 Sep 2022 16:17:37 -0400 Subject: [PATCH 2/3] Implement adding icon to categoryTitle --- src/components/services/group.jsx | 8 +++++++- src/pages/api/services/index.js | 3 ++- src/styles/globals.css | 5 +++++ src/utils/service-helpers.js | 7 +++++-- 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx index daae1909..7fc86907 100644 --- a/src/components/services/group.jsx +++ b/src/components/services/group.jsx @@ -1,4 +1,5 @@ import classNames from "classnames"; +import Image from "next/future/image"; import List from "components/services/list"; @@ -11,7 +12,12 @@ export default function ServicesGroup({ services, layout }) { "flex-1 p-1" )} > -

{services.name}

+
+ {services.icon && + logo + } +

{services.name}

+
); diff --git a/src/pages/api/services/index.js b/src/pages/api/services/index.js index 52951fbb..a29b7fb1 100644 --- a/src/pages/api/services/index.js +++ b/src/pages/api/services/index.js @@ -33,11 +33,12 @@ export default async function handler(req, res) { const mergedGroup = { name: groupName, + icon: configuredGroup.icon, services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service), }; mergedGroups.push(mergedGroup); }); - + res.send(mergedGroups); } diff --git a/src/styles/globals.css b/src/styles/globals.css index e11bf477..bb8003ea 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -12,3 +12,8 @@ body { font-family: "Poppins", sans-serif; } + +.h2-title-noicon { + padding-top: 8px; + padding-bottom: 8px; +} \ No newline at end of file diff --git a/src/utils/service-helpers.js b/src/utils/service-helpers.js index 595d5e36..8daf67f1 100644 --- a/src/utils/service-helpers.js +++ b/src/utils/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 }; From f5c7663767656c232967a2fe342f382c1609f27a Mon Sep 17 00:00:00 2001 From: Mindfreak9100 Date: Wed, 28 Sep 2022 16:36:56 -0400 Subject: [PATCH 3/3] Move resolveIcon func to utils for reusability --- src/components/services/group.jsx | 5 +++-- src/components/services/item.jsx | 17 +---------------- src/utils/icon-resolver.js | 15 +++++++++++++++ 3 files changed, 19 insertions(+), 18 deletions(-) create mode 100644 src/utils/icon-resolver.js diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx index 7fc86907..a963181c 100644 --- a/src/components/services/group.jsx +++ b/src/components/services/group.jsx @@ -1,7 +1,8 @@ -import classNames from "classnames"; 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 ( @@ -14,7 +15,7 @@ export default function ServicesGroup({ services, layout }) { >
{services.icon && - logo + logo }

{services.name}

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx index 82f3741c..9d093bef 100644 --- a/src/components/services/item.jsx +++ b/src/components/services/item.jsx @@ -7,22 +7,7 @@ import Widget from "./widget"; import Docker from "./widgets/service/docker"; import { SettingsContext } from "utils/settings-context"; - -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`; -} +import { resolveIcon } from "utils/icon-resolver"; export default function Item({ service }) { const hasLink = service.href && service.href !== "#"; diff --git a/src/utils/icon-resolver.js b/src/utils/icon-resolver.js new file mode 100644 index 00000000..0a7f1211 --- /dev/null +++ b/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`; +} \ No newline at end of file