From 43081696084b092c29f55cddae6d02b385e7b32d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Mon, 17 Aug 2026 17:55:27 +0200 Subject: [PATCH] feat: brand icons for widgets, fix stale accent color Two separate issues, both real bugs: - Dark mode was showing light blue instead of green: config.yml still had a leftover --pn-accent: #38bdf8 override from before the design redesign, which won via the runtime theme injector regardless of what app/globals.css defaulted to. Removed the override and pushed the dark-mode default from a soft mint (#5ee08c) to an actual neon green (#39ff88) - closer to what "neon" means and closer to the real phosphor-green a cardiac monitor trace uses, which fits the pulse metaphor better than the pastel version did. - No per-service brand icons anywhere. Added an optional `icon` field to docker/bookmark widgets (a key into lib/brand-icons.ts) rather than guessing from containerName, since a heuristic would silently misfire for anyone's own container naming. database widgets derive their icon automatically from `engine` (postgres/redis) since that's already required and unambiguous. Icon path data comes from the CC0 simple-icons package via scripts/extract-brand-icons.py, extracted and committed as plain TS data (lib/brand-icons.ts) rather than imported live - keeps it self-hosted (no unpkg.com/CDN calls at runtime, matching the fonts) and pinned regardless of dependency updates. Rendered monochrome (currentColor, not each brand's own hex) to stay consistent with the single-accent design rather than a dozen competing colors - only the shape carries the identity. Wired real icons into config.yml for every service that has one: traefik, coolify, gitea (+ gitea_runner), immich (+ immich_ml), n8n, passbolt, umami, headscale, plus postgresql/redis on every database widget. code and mailpit have no brand match in the curated set, so they render without one rather than a wrong/generic substitute. Verified in the actual rendered page: compiled CSS confirms --pn-accent is #39ff88 (dark) / #339a5a (light) with no trace of the old #38bdf8, and all 18 expected icon instances (10 docker + 8 database widgets) are present. --- README.md | 16 ++++++-- app/globals.css | 4 +- components/widgets/BrandIcon.tsx | 13 ++++++ components/widgets/bookmark/Widget.tsx | 6 ++- components/widgets/database/Widget.tsx | 11 ++++- components/widgets/docker/Widget.tsx | 28 +++++++------ config/config.yml | 12 +++++- lib/brand-icons.ts | 17 ++++++++ lib/config/schema.ts | 2 + package.json | 1 + pnpm-lock.yaml | 9 +++++ scripts/extract-brand-icons.py | 56 ++++++++++++++++++++++++++ 12 files changed, 152 insertions(+), 23 deletions(-) create mode 100644 components/widgets/BrandIcon.tsx create mode 100644 lib/brand-icons.ts create mode 100644 scripts/extract-brand-icons.py diff --git a/README.md b/README.md index e4c4a3e..0fa1140 100644 --- a/README.md +++ b/README.md @@ -54,8 +54,8 @@ settings: theme: mode: dark # dark | light | auto - variables: - --pn-accent: "#38bdf8" + # variables: # override any --pn-* token from app/globals.css + # --pn-accent: "#ff6b6b" # customCssPath: custom.css # relative to config/, served at /api/theme/custom-css discovery: @@ -87,9 +87,9 @@ reload; never exposed to the client. See `config/.env.example`. | `type` | Required fields | Notes | |------------|-------------------------------------|-------| -| `bookmark` | `name`, `href` | Static link card. Optional `description`. | +| `bookmark` | `name`, `href` | Static link card. Optional `description`, `icon` (see below). | | `search` | - | Client-side search box. Optional `engines` (`duckduckgo`/`google`/`bing`, default `[duckduckgo]`), `defaultEngine`. | -| `docker` | `name`, `containerName` | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `showStats` (default `true`), `interval` (default `5s`). | +| `docker` | `name`, `containerName` | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `icon` (see below), `showStats` (default `true`), `interval` (default `5s`). | | `database` | `name`, `containerName`, `engine` | Thin skin over the same Docker collector - `engine` is `postgres` or `redis`, used for icon/label only. `interval` default `10s`. | | `system` | - | Host CPU/mem/disk/network via `systeminformation`. Optional `name` (default `System`), `interval` (default `5s`). | | `http` | `name`, `url` | HTTP health check with latency and consecutive-failure tracking. Optional `method` (default `GET`), `timeout` (default `5s`), `interval` (default `30s`), `expect.status` (default `200`). | @@ -97,6 +97,14 @@ reload; never exposed to the client. See `config/.env.example`. `interval`/`timeout` values are duration strings: `500ms`, `5s`, `1m`, `1h`. +`icon` on `docker`/`bookmark` widgets is a key into `lib/brand-icons.ts` (currently +`traefik`, `coolify`, `gitea`, `docker`, `immich`, `n8n`, `passbolt`, `umami`, +`postgresql`, `redis`, `headscale`), rendered monochrome so it doesn't compete +with the accent color. `database` widgets pick their icon automatically from +`engine`. Regenerate/extend the icon set with `python3 scripts/extract-brand-icons.py` +after adding an entry to that script's `ICONS` map (path data comes from the +CC0-licensed `simple-icons` package, bundled at build time - no runtime CDN calls). + ### Auto-discovery With `discovery.docker.enabled: true`, PulseNode scans running containers diff --git a/app/globals.css b/app/globals.css index c5ce9d5..c482064 100644 --- a/app/globals.css +++ b/app/globals.css @@ -7,8 +7,8 @@ --pn-fg: #f2f4f5; --pn-fg-muted: color-mix(in srgb, var(--pn-fg) 55%, transparent); --pn-border: color-mix(in srgb, var(--pn-fg) 14%, transparent); - --pn-accent: #5ee08c; - --pn-status-up: #5ee08c; + --pn-accent: #39ff88; + --pn-status-up: #39ff88; --pn-status-down: #ff5f6d; --pn-status-degraded: #ffb84c; --pn-shadow-sm: 0 0 0 1px var(--pn-border); diff --git a/components/widgets/BrandIcon.tsx b/components/widgets/BrandIcon.tsx new file mode 100644 index 0000000..24230fe --- /dev/null +++ b/components/widgets/BrandIcon.tsx @@ -0,0 +1,13 @@ +import { BRAND_ICON_PATHS } from "@/lib/brand-icons"; + +export function BrandIcon({ slug, size = 18 }: { slug?: string; size?: number }) { + if (!slug) return null; + const path = BRAND_ICON_PATHS[slug]; + if (!path) return null; + + return ( + + + + ); +} diff --git a/components/widgets/bookmark/Widget.tsx b/components/widgets/bookmark/Widget.tsx index 2e700eb..fe9775f 100644 --- a/components/widgets/bookmark/Widget.tsx +++ b/components/widgets/bookmark/Widget.tsx @@ -1,6 +1,7 @@ import { ArrowUpRight } from "@phosphor-icons/react/ssr"; import type { Widget } from "@/lib/config/schema"; import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard"; +import { BrandIcon } from "@/components/widgets/BrandIcon"; type BookmarkWidget = Extract; @@ -14,8 +15,9 @@ export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) { style={{ gridColumn: "span 3" }} >
- {widget.name} - + + {widget.name} +
{widget.description && {widget.description}} diff --git a/components/widgets/database/Widget.tsx b/components/widgets/database/Widget.tsx index b30e369..83f95ef 100644 --- a/components/widgets/database/Widget.tsx +++ b/components/widgets/database/Widget.tsx @@ -4,6 +4,7 @@ import type { Widget } from "@/lib/config/schema"; import { useWidgetSubscription } from "@/lib/ws/client"; import { StatusDot } from "@/components/widgets/StatusDot"; import { WidgetCard } from "@/components/widgets/WidgetCard"; +import { BrandIcon } from "@/components/widgets/BrandIcon"; import { formatUptime } from "@/lib/format"; type DatabaseWidget = Extract; @@ -13,6 +14,11 @@ const ENGINE_LABEL: Record = { redis: "Redis", }; +const ENGINE_ICON: Record = { + postgres: "postgresql", + redis: "redis", +}; + export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) { const result = useWidgetSubscription(widgetId); const data = result?.type === "database" ? result.data : null; @@ -21,7 +27,10 @@ export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; w return (
- {widget.name} +
+ + {widget.name} +
{ENGINE_LABEL[widget.engine]} diff --git a/components/widgets/docker/Widget.tsx b/components/widgets/docker/Widget.tsx index bbb5ae8..7d02f1b 100644 --- a/components/widgets/docker/Widget.tsx +++ b/components/widgets/docker/Widget.tsx @@ -6,6 +6,7 @@ import { StatusDot } from "@/components/widgets/StatusDot"; import { SkeletonLines } from "@/components/widgets/Skeleton"; import { WidgetCard } from "@/components/widgets/WidgetCard"; import { MetricBar } from "@/components/widgets/MetricBar"; +import { BrandIcon } from "@/components/widgets/BrandIcon"; import { formatBytes, formatUptime } from "@/lib/format"; type DockerWidget = Extract; @@ -19,18 +20,21 @@ export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widge return (
- {widget.href ? ( - - {widget.name} - - ) : ( - {widget.name} - )} +
+ + {widget.href ? ( + + {widget.name} + + ) : ( + {widget.name} + )} +
{errorMessage && {errorMessage}} diff --git a/config/config.yml b/config/config.yml index f13db85..b6921f6 100644 --- a/config/config.yml +++ b/config/config.yml @@ -3,8 +3,6 @@ settings: theme: mode: dark - variables: - --pn-accent: "#38bdf8" # Manual widgets below always take precedence over an auto-discovered one for # the same container - this is on as a safety net for anything added to @@ -21,6 +19,7 @@ groups: - type: docker name: Traefik containerName: traefik + icon: traefik interval: 10s # No href: the dashboard is disabled (--api.dashboard=false). # Swap for a `traefik` widget (router/entrypoint/middleware view) @@ -29,6 +28,7 @@ groups: - type: docker name: Coolify containerName: coolify + icon: coolify href: https://${TRAEFIK_HOST_COOLIFY} interval: 10s @@ -37,12 +37,14 @@ groups: - type: docker name: Gitea containerName: gitea + icon: gitea href: https://${TRAEFIK_HOST_GITEA} interval: 10s - type: docker name: Gitea Runner containerName: gitea_runner + icon: gitea showStats: true interval: 15s @@ -57,35 +59,41 @@ groups: - type: docker name: Immich containerName: immich + icon: immich href: https://${TRAEFIK_HOST_IMMICH} interval: 10s - type: docker name: Immich ML containerName: immich_ml + icon: immich interval: 15s - type: docker name: n8n containerName: n8n + icon: n8n href: https://${TRAEFIK_HOST_N8N} interval: 10s - type: docker name: Passbolt containerName: passbolt + icon: passbolt href: https://${TRAEFIK_HOST_PASSBOLT} interval: 10s - type: docker name: Umami containerName: umami + icon: umami href: https://${TRAEFIK_HOST_UMAMI} interval: 10s - type: docker name: Headscale containerName: headscale + icon: headscale href: https://${TRAEFIK_HOST_HEADSCALE} interval: 10s diff --git a/lib/brand-icons.ts b/lib/brand-icons.ts new file mode 100644 index 0000000..b4db127 --- /dev/null +++ b/lib/brand-icons.ts @@ -0,0 +1,17 @@ +// Path data extracted from the `simple-icons` package (CC0) at build time - +// see scripts/extract-brand-icons.py. Rendered monochrome (currentColor) to +// stay consistent with the single-accent design rather than a dozen +// competing brand colors; the shape alone is enough to be recognizable. +export const BRAND_ICON_PATHS: Record = { + "traefik": "M12 1.19c1.088 0 2.056.768 2.056 1.714 0 .947-.921 1.715-2.056 1.715-.13 0-.3-.022-.509-.064a.685.685 0 0 0-.475.076l-7.37 4.195a.344.344 0 0 0 .001.597l7.99 4.49c.208.116.461.116.669 0l8.034-4.468a.343.343 0 0 0 .003-.598l-2.507-1.424a.683.683 0 0 0-.67-.003l-2.647 1.468a.234.234 0 0 0-.119.18l-.001.025c0 .946-.921 1.714-2.056 1.714s-2.056-.768-2.056-1.714c0-.947.921-1.715 2.056-1.715.042 0 .09.002.145.007l.087.008.096.013a.685.685 0 0 0 .425-.08l3.913-2.173c.3-.166.662-.171.965-.017l.04.023 5.465 3.104c.686.39.693 1.368.03 1.773l-.037.021-3.656 2.033a.343.343 0 0 0 .007.604l3.62 1.906c.72.378.736 1.402.03 1.804l-10.995 6.272a1.03 1.03 0 0 1-1.019 0L.526 16.43a1.03 1.03 0 0 1 .034-1.806l3.66-1.911a.343.343 0 0 0 .01-.603L.524 10.029a1.03 1.03 0 0 1-.041-1.77l.036-.021L9.618 3.06a.688.688 0 0 0 .308-.369l.011-.036c.32-.952 1.046-1.466 2.063-1.466Zm5.076 12.63-4.492 2.586-.041.022c-.306.158-.671.152-.973-.018l-4.478-2.527a.682.682 0 0 0-.65-.01L3.86 15.224a.343.343 0 0 0-.012.602l7.887 4.515c.21.12.467.121.677 0l7.956-4.547a.343.343 0 0 0-.01-.602l-2.623-1.384a.683.683 0 0 0-.659.012z", + "coolify": "M4.364 4.364V0h17.454v4.364zm0 13.09H0V4.365h4.364zm0 0h17.454v4.364H4.364ZM6.545 6.546v-1.7H22.3V2.182H24v4.363zm0 0v10.4h-1.7v-10.4ZM3.882 17.936v1.7h-1.7v-1.7ZM24 24H6.545v-1.7H22.3v-2.664H24Z", + "gitea": "M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z", + "docker": "M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z", + "immich": "M11.9863.2695c-2.409 0-5.207 1.091-5.207 3.8946v.1523c1.3428.597 2.9347 1.6629 4.4121 2.9707 1.5713 1.3912 2.8374 2.8821 3.6524 4.2871 1.3997-2.5034 2.3358-5.4784 2.3476-7.373V4.164c0-2.8035-2.796-3.8946-5.205-3.8946m7.5117 4.4903c-.3778-.0081-.7747.0502-1.1914.1855-.0366.0118-.086.0278-.1445.0469-.1525 1.4611-.6756 3.304-1.4629 5.1133-.8373 1.9243-1.8627 3.5898-2.9472 4.7988 2.8132.558 5.9307.5273 7.7363-.0469.0126-.004.0246-.0065.0351-.0097 2.6665-.8666 2.84-3.8636 2.0957-6.1543-.6279-1.9332-2.081-3.89-4.121-3.9336m-14.996.039C2.4618 4.8424 1.0088 6.7973.3809 8.7305c-.7442 2.291-.5708 5.288 2.0957 6.1543l.1445.0468c.982-1.0926 2.4873-2.2761 4.1875-3.2773 1.8088-1.0646 3.619-1.808 5.207-2.1484-1.9483-2.1049-4.4884-3.9132-6.287-4.5098l-.0352-.0117c-.4167-.1354-.8136-.1936-1.1914-.1856m4.6718 6.7578c-2.6038 1.2025-5.1088 3.0598-6.2324 4.586l-.0215.0293c-1.6478 2.2683-.0272 4.7953 1.9219 6.211 1.9487 1.4159 4.8518 2.1765 6.5-.0919.0228-.0309.0536-.071.0898-.121-.7356-1.2717-1.396-3.0718-1.8222-4.9981-.4534-2.0492-.6023-4-.4356-5.6153m1.0723 3.338c.3387 2.8478 1.3315 5.8037 2.4355 7.3437l.0215.0293c1.6478 2.2683 4.551 1.5078 6.5.0918 1.9487-1.416 3.5697-3.943 1.9219-6.211-.0228-.0309-.0517-.073-.0879-.123-1.4367.3066-3.3522.3794-5.3164.1894-2.089-.2017-3.9895-.6623-5.4746-1.3203", + "n8n": "M21.4737 5.6842c-1.1772 0-2.1663.8051-2.4468 1.8947h-2.8955c-1.235 0-2.289.893-2.492 2.111l-.1038.623a1.263 1.263 0 0 1-1.246 1.0555H11.289c-.2805-1.0896-1.2696-1.8947-2.4468-1.8947s-2.1663.8051-2.4467 1.8947H4.973c-.2805-1.0896-1.2696-1.8947-2.4468-1.8947C1.1311 9.4737 0 10.6047 0 12s1.131 2.5263 2.5263 2.5263c1.1772 0 2.1663-.8051 2.4468-1.8947h1.4223c.2804 1.0896 1.2696 1.8947 2.4467 1.8947 1.1772 0 2.1663-.8051 2.4468-1.8947h1.0008a1.263 1.263 0 0 1 1.2459 1.0555l.1038.623c.203 1.218 1.257 2.111 2.492 2.111h.3692c.2804 1.0895 1.2696 1.8947 2.4468 1.8947 1.3952 0 2.5263-1.131 2.5263-2.5263s-1.131-2.5263-2.5263-2.5263c-1.1772 0-2.1664.805-2.4468 1.8947h-.3692a1.263 1.263 0 0 1-1.246-1.0555l-.1037-.623A2.52 2.52 0 0 0 13.9607 12a2.52 2.52 0 0 0 .821-1.4794l.1038-.623a1.263 1.263 0 0 1 1.2459-1.0555h2.8955c.2805 1.0896 1.2696 1.8947 2.4468 1.8947 1.3952 0 2.5263-1.131 2.5263-2.5263s-1.131-2.5263-2.5263-2.5263m0 1.2632a1.263 1.263 0 0 1 1.2631 1.2631 1.263 1.263 0 0 1-1.2631 1.2632 1.263 1.263 0 0 1-1.2632-1.2632 1.263 1.263 0 0 1 1.2632-1.2631M2.5263 10.7368A1.263 1.263 0 0 1 3.7895 12a1.263 1.263 0 0 1-1.2632 1.2632A1.263 1.263 0 0 1 1.2632 12a1.263 1.263 0 0 1 1.2631-1.2632m6.3158 0A1.263 1.263 0 0 1 10.1053 12a1.263 1.263 0 0 1-1.2632 1.2632A1.263 1.263 0 0 1 7.579 12a1.263 1.263 0 0 1 1.2632-1.2632m10.1053 3.7895a1.263 1.263 0 0 1 1.2631 1.2632 1.263 1.263 0 0 1-1.2631 1.2631 1.263 1.263 0 0 1-1.2632-1.2631 1.263 1.263 0 0 1 1.2632-1.2632", + "passbolt": "M1.393 9.736a2.691 2.691 0 0 1 1.145-.274h.001c1.391 0 2.538 1.153 2.483 2.525a2.51 2.51 0 0 1-2.51 2.524c-.438 0-.847-.11-1.202-.302A2.519 2.519 0 0 1 0 11.987c0-.988.572-1.84 1.393-2.25zm12.14-8.562 9.77 9.193h.001c.928.907.928 2.387 0 3.266l-9.74 9.193c-.875.795-2.211.795-3.058 0l-6.167-5.79c1.638-.577 2.894-1.949 3.358-3.65h3.682v1.782c0 .411.326.768.764.768h2.1c.41 0 .764-.329.764-.768v-1.783h.955c.41 0 .764-.328.764-.768v-1.263a.764.764 0 0 0-.764-.767H7.667a5.444 5.444 0 0 0-3.33-3.623l6.14-5.79c.874-.795 2.21-.795 3.057 0z", + "umami": "M2.203 8.611H.857a.845.845 0 0 0-.841.841v.858a13.31 13.31 0 0 0-.016.6c0 6.627 5.373 12 12 12 6.527 0 11.837-5.212 11.996-11.701 0-.025.004-.05.004-.075V9.452a.845.845 0 0 0-.841-.841h-1.346c-1.159-4.329-5.112-7.521-9.805-7.521-4.692 0-8.645 3.192-9.805 7.521Zm18.444 0H3.37c1.127-3.702 4.57-6.399 8.638-6.399 4.069 0 7.512 2.697 8.639 6.399Z", + "postgresql": "M23.5594 14.7228a.5269.5269 0 0 0-.0563-.1191c-.139-.2632-.4768-.3418-1.0074-.2321-1.6533.3411-2.2935.1312-2.5256-.0191 1.342-2.0482 2.445-4.522 3.0411-6.8297.2714-1.0507.7982-3.5237.1222-4.7316a1.5641 1.5641 0 0 0-.1509-.235C21.6931.9086 19.8007.0248 17.5099.0005c-1.4947-.0158-2.7705.3461-3.1161.4794a9.449 9.449 0 0 0-.5159-.0816 8.044 8.044 0 0 0-1.3114-.1278c-1.1822-.0184-2.2038.2642-3.0498.8406-.8573-.3211-4.7888-1.645-7.2219.0788C.9359 2.1526.3086 3.8733.4302 6.3043c.0409.818.5069 3.334 1.2423 5.7436.4598 1.5065.9387 2.7019 1.4334 3.582.553.9942 1.1259 1.5933 1.7143 1.7895.4474.1491 1.1327.1441 1.8581-.7279.8012-.9635 1.5903-1.8258 1.9446-2.2069.4351.2355.9064.3625 1.39.3772a.0569.0569 0 0 0 .0004.0041 11.0312 11.0312 0 0 0-.2472.3054c-.3389.4302-.4094.5197-1.5002.7443-.3102.064-1.1344.2339-1.1464.8115-.0025.1224.0329.2309.0919.3268.2269.4231.9216.6097 1.015.6331 1.3345.3335 2.5044.092 3.3714-.6787-.017 2.231.0775 4.4174.3454 5.0874.2212.5529.7618 1.9045 2.4692 1.9043.2505 0 .5263-.0291.8296-.0941 1.7819-.3821 2.5557-1.1696 2.855-2.9059.1503-.8707.4016-2.8753.5388-4.1012.0169-.0703.0357-.1207.057-.1362.0007-.0005.0697-.0471.4272.0307a.3673.3673 0 0 0 .0443.0068l.2539.0223.0149.001c.8468.0384 1.9114-.1426 2.5312-.4308.6438-.2988 1.8057-1.0323 1.5951-1.6698zM2.371 11.8765c-.7435-2.4358-1.1779-4.8851-1.2123-5.5719-.1086-2.1714.4171-3.6829 1.5623-4.4927 1.8367-1.2986 4.8398-.5408 6.108-.13-.0032.0032-.0066.0061-.0098.0094-2.0238 2.044-1.9758 5.536-1.9708 5.7495-.0002.0823.0066.1989.0162.3593.0348.5873.0996 1.6804-.0735 2.9184-.1609 1.1504.1937 2.2764.9728 3.0892.0806.0841.1648.1631.2518.2374-.3468.3714-1.1004 1.1926-1.9025 2.1576-.5677.6825-.9597.5517-1.0886.5087-.3919-.1307-.813-.5871-1.2381-1.3223-.4796-.839-.9635-2.0317-1.4155-3.5126zm6.0072 5.0871c-.1711-.0428-.3271-.1132-.4322-.1772.0889-.0394.2374-.0902.4833-.1409 1.2833-.2641 1.4815-.4506 1.9143-1.0002.0992-.126.2116-.2687.3673-.4426a.3549.3549 0 0 0 .0737-.1298c.1708-.1513.2724-.1099.4369-.0417.156.0646.3078.26.3695.4752.0291.1016.0619.2945-.0452.4444-.9043 1.2658-2.2216 1.2494-3.1676 1.0128zm2.094-3.988-.0525.141c-.133.3566-.2567.6881-.3334 1.003-.6674-.0021-1.3168-.2872-1.8105-.8024-.6279-.6551-.9131-1.5664-.7825-2.5004.1828-1.3079.1153-2.4468.079-3.0586-.005-.0857-.0095-.1607-.0122-.2199.2957-.2621 1.6659-.9962 2.6429-.7724.4459.1022.7176.4057.8305.928.5846 2.7038.0774 3.8307-.3302 4.7363-.084.1866-.1633.3629-.2311.5454zm7.3637 4.5725c-.0169.1768-.0358.376-.0618.5959l-.146.4383a.3547.3547 0 0 0-.0182.1077c-.0059.4747-.054.6489-.115.8693-.0634.2292-.1353.4891-.1794 1.0575-.11 1.4143-.8782 2.2267-2.4172 2.5565-1.5155.3251-1.7843-.4968-2.0212-1.2217a6.5824 6.5824 0 0 0-.0769-.2266c-.2154-.5858-.1911-1.4119-.1574-2.5551.0165-.5612-.0249-1.9013-.3302-2.6462.0044-.2932.0106-.5909.019-.8918a.3529.3529 0 0 0-.0153-.1126 1.4927 1.4927 0 0 0-.0439-.208c-.1226-.4283-.4213-.7866-.7797-.9351-.1424-.059-.4038-.1672-.7178-.0869.067-.276.1831-.5875.309-.9249l.0529-.142c.0595-.16.134-.3257.213-.5012.4265-.9476 1.0106-2.2453.3766-5.1772-.2374-1.0981-1.0304-1.6343-2.2324-1.5098-.7207.0746-1.3799.3654-1.7088.5321a5.6716 5.6716 0 0 0-.1958.1041c.0918-1.1064.4386-3.1741 1.7357-4.4823a4.0306 4.0306 0 0 1 .3033-.276.3532.3532 0 0 0 .1447-.0644c.7524-.5706 1.6945-.8506 2.802-.8325.4091.0067.8017.0339 1.1742.081 1.939.3544 3.2439 1.4468 4.0359 2.3827.8143.9623 1.2552 1.9315 1.4312 2.4543-1.3232-.1346-2.2234.1268-2.6797.779-.9926 1.4189.543 4.1729 1.2811 5.4964.1353.2426.2522.4522.2889.5413.2403.5825.5515.9713.7787 1.2552.0696.087.1372.1714.1885.245-.4008.1155-1.1208.3825-1.0552 1.717-.0123.1563-.0423.4469-.0834.8148-.0461.2077-.0702.4603-.0994.7662zm.8905-1.6211c-.0405-.8316.2691-.9185.5967-1.0105a2.8566 2.8566 0 0 0 .135-.0406 1.202 1.202 0 0 0 .1342.103c.5703.3765 1.5823.4213 3.0068.1344-.2016.1769-.5189.3994-.9533.6011-.4098.1903-1.0957.333-1.7473.3636-.7197.0336-1.0859-.0807-1.1721-.151zm.5695-9.2712c-.0059.3508-.0542.6692-.1054 1.0017-.055.3576-.112.7274-.1264 1.1762-.0142.4368.0404.8909.0932 1.3301.1066.887.216 1.8003-.2075 2.7014a3.5272 3.5272 0 0 1-.1876-.3856c-.0527-.1276-.1669-.3326-.3251-.6162-.6156-1.1041-2.0574-3.6896-1.3193-4.7446.3795-.5427 1.3408-.5661 2.1781-.463zm.2284 7.0137a12.3762 12.3762 0 0 0-.0853-.1074l-.0355-.0444c.7262-1.1995.5842-2.3862.4578-3.4385-.0519-.4318-.1009-.8396-.0885-1.2226.0129-.4061.0666-.7543.1185-1.0911.0639-.415.1288-.8443.1109-1.3505.0134-.0531.0188-.1158.0118-.1902-.0457-.4855-.5999-1.938-1.7294-3.253-.6076-.7073-1.4896-1.4972-2.6889-2.0395.5251-.1066 1.2328-.2035 2.0244-.1859 2.0515.0456 3.6746.8135 4.8242 2.2824a.908.908 0 0 1 .0667.1002c.7231 1.3556-.2762 6.2751-2.9867 10.5405zm-8.8166-6.1162c-.025.1794-.3089.4225-.6211.4225a.5821.5821 0 0 1-.0809-.0056c-.1873-.026-.3765-.144-.5059-.3156-.0458-.0605-.1203-.178-.1055-.2844.0055-.0401.0261-.0985.0925-.1488.1182-.0894.3518-.1226.6096-.0867.3163.0441.6426.1938.6113.4186zm7.9305-.4114c.0111.0792-.049.201-.1531.3102-.0683.0717-.212.1961-.4079.2232a.5456.5456 0 0 1-.075.0052c-.2935 0-.5414-.2344-.5607-.3717-.024-.1765.2641-.3106.5611-.352.297-.0414.6111.0088.6356.1851z", + "redis": "M22.71 13.145c-1.66 2.092-3.452 4.483-7.038 4.483-3.203 0-4.397-2.825-4.48-5.12.701 1.484 2.073 2.685 4.214 2.63 4.117-.133 6.94-3.852 6.94-7.239 0-4.05-3.022-6.972-8.268-6.972-3.752 0-8.4 1.428-11.455 3.685C2.59 6.937 3.885 9.958 4.35 9.626c2.648-1.904 4.748-3.13 6.784-3.744C8.12 9.244.886 17.05 0 18.425c.1 1.261 1.66 4.648 2.424 4.648.232 0 .431-.133.664-.365a100.49 100.49 0 0 0 5.54-6.765c.222 3.104 1.748 6.898 6.014 6.898 3.819 0 7.604-2.756 9.33-8.965.2-.764-.73-1.361-1.261-.73zm-4.349-5.013c0 1.959-1.926 2.922-3.685 2.922-.941 0-1.664-.247-2.235-.568 1.051-1.592 2.092-3.225 3.21-4.973 1.972.334 2.71 1.43 2.71 2.619z", + "headscale": "M24 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-9 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm0-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6-6a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM3 24a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm18 .5a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM6 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm9-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-3 2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM3 5.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z", +}; diff --git a/lib/config/schema.ts b/lib/config/schema.ts index 99fb754..5d506a4 100644 --- a/lib/config/schema.ts +++ b/lib/config/schema.ts @@ -11,6 +11,7 @@ export const bookmarkWidgetSchema = z.object({ name: z.string(), href: z.string().url(), description: z.string().optional(), + icon: z.string().optional(), }); export const searchWidgetSchema = z.object({ @@ -26,6 +27,7 @@ export const dockerWidgetSchema = z.object({ href: z.string().url().optional(), showStats: z.boolean().default(true), interval: durationSchema.default("5s"), + icon: z.string().optional(), }); export const databaseWidgetSchema = z.object({ diff --git a/package.json b/package.json index 01fc883..3d3b8ba 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "p-limit": "^7.3.1", "react": "19.2.8", "react-dom": "19.2.8", + "simple-icons": "^16.28.0", "systeminformation": "^5.33.1", "tsx": "^4.23.12", "ws": "^8.21.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f7cd486..8b5c0bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: react-dom: specifier: 19.2.8 version: 19.2.8(react@19.2.8) + simple-icons: + specifier: ^16.28.0 + version: 16.28.0 systeminformation: specifier: ^5.33.1 version: 5.33.1 @@ -2213,6 +2216,10 @@ packages: resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==} engines: {node: '>= 0.4'} + simple-icons@16.28.0: + resolution: {integrity: sha512-sQPR5AtK/ijRjou7zw7mlLp08oB6FH7i0lOy5XJ2zp9mJs/yejgiOn7KvQoe2q4YJIx6VmgUSW5AOefebPt5kg==} + engines: {node: '>=0.12.18'} + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -4716,6 +4723,8 @@ snapshots: side-channel-map: 1.0.1 side-channel-weakmap: 1.0.2 + simple-icons@16.28.0: {} + source-map-js@1.2.1: {} split-ca@1.0.1: {} diff --git a/scripts/extract-brand-icons.py b/scripts/extract-brand-icons.py new file mode 100644 index 0000000..2ab5c7e --- /dev/null +++ b/scripts/extract-brand-icons.py @@ -0,0 +1,56 @@ +#!/usr/bin/env python3 +"""Regenerates lib/brand-icons.ts from the `simple-icons` package. + +Run from the repo root after `pnpm add simple-icons` has installed it: + + python3 scripts/extract-brand-icons.py + +Add a new service by adding a "our key" -> "simple-icons slug" entry below. +Slugs are the filenames under node_modules/simple-icons/icons/ (without the +.svg extension). +""" + +import json +import re +from pathlib import Path + +ICONS = { + "traefik": "traefikproxy", + "coolify": "coolify", + "gitea": "gitea", + "docker": "docker", + "immich": "immich", + "n8n": "n8n", + "passbolt": "passbolt", + "umami": "umami", + "postgresql": "postgresql", + "redis": "redis", + "headscale": "tailscale", +} + +ROOT = Path(__file__).resolve().parent.parent +ICONS_DIR = ROOT / "node_modules" / "simple-icons" / "icons" +OUT_PATH = ROOT / "lib" / "brand-icons.ts" + +HEADER = """// Path data extracted from the `simple-icons` package (CC0) at build time - +// see scripts/extract-brand-icons.py. Rendered monochrome (currentColor) to +// stay consistent with the single-accent design rather than a dozen +// competing brand colors; the shape alone is enough to be recognizable. +export const BRAND_ICON_PATHS: Record = { +""" + + +def main() -> None: + lines = [HEADER] + for key, slug in ICONS.items(): + svg = (ICONS_DIR / f"{slug}.svg").read_text() + d_matches = re.findall(r'