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.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user