Compare commits

..

10 Commits

Author SHA1 Message Date
Crowdin Bot 35e82b90c5 New Crowdin translations by GitHub Action
Lint / Linting Checks (push) Waiting to run
Tests / vitest (3) (push) Waiting to run
Tests / vitest (1) (push) Waiting to run
Tests / vitest (2) (push) Waiting to run
Tests / vitest (4) (push) Waiting to run
2026-09-24 00:52:05 +00:00
Andy George 40082f798d Documentation: Arcane widget documentation formatting (#7171)
Docker CI / Docker Build & Push (push) Waiting to run
Lint / Linting Checks (push) Waiting to run
Release Drafter / Update Release Draft (push) Waiting to run
Release Drafter / Auto Label PR (push) Waiting to run
Tests / vitest (1) (push) Waiting to run
Tests / vitest (2) (push) Waiting to run
Tests / vitest (3) (push) Waiting to run
Tests / vitest (4) (push) Waiting to run
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
2026-09-23 22:39:41 +00:00
shamoon db480ca991 Performance: reduce json data transformations (#7175) 2026-09-23 15:32:30 -07:00
shamoon a7a4378a40 Fix: ensure correct relative dates formatter uses calendar days (#7174)
Docker CI / Docker Build & Push (push) Waiting to run
Lint / Linting Checks (push) Waiting to run
Release Drafter / Update Release Draft (push) Waiting to run
Release Drafter / Auto Label PR (push) Waiting to run
Tests / vitest (1) (push) Waiting to run
Tests / vitest (2) (push) Waiting to run
Tests / vitest (3) (push) Waiting to run
Tests / vitest (4) (push) Waiting to run
2026-09-23 11:41:55 -07:00
shamoon d1c1ee7a1e Feature: Plex mono font support, card + block styles (#7169)
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
2026-09-22 21:58:11 -07:00
shamoon e0be80085e Feature: customapi info widget (#7168) 2026-09-22 21:03:51 -07:00
dependabot[bot] b8ed72a03f Chore(deps): Bump astral-sh/setup-uv from 10.0.1 to 10.1.0 (#7156)
Lint / Linting Checks (push) Has been cancelled
Docker CI / Docker Build & Push (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-09-17 21:29:47 +00:00
dependabot[bot] ebff6f4a7d Chore(deps): Bump crowdin/github-action from 3.0.1 to 3.0.2 (#7155)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-09-17 21:23:19 +00:00
dependabot[bot] e890b544dc Chore(deps): Bump pnpm/action-setup from 6.0.10 to 6.1.0 (#7154)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-09-17 14:16:45 -07:00
shamoon f7666df9d8 Move PBS since param to optional params
Docker CI / Docker Build & Push (push) Has been cancelled
Lint / Linting Checks (push) Has been cancelled
Release Drafter / Update Release Draft (push) Has been cancelled
Release Drafter / Auto Label PR (push) Has been cancelled
Tests / vitest (1) (push) Has been cancelled
Tests / vitest (2) (push) Has been cancelled
Tests / vitest (3) (push) Has been cancelled
Tests / vitest (4) (push) Has been cancelled
2026-09-17 07:36:08 -07:00
54 changed files with 1240 additions and 387 deletions
+1 -1
View File
@@ -23,7 +23,7 @@ jobs:
- name: Checkout - name: Checkout
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- name: crowdin action - name: crowdin action
uses: crowdin/github-action@71fdb8814261dd703be4ca7c6450d21b1868da4b # v3.0.1 uses: crowdin/github-action@0d5670f539973aea2f01abce61a8989934df0025 # v3.0.2
with: with:
upload_translations: false upload_translations: false
download_translations: true download_translations: true
+1 -1
View File
@@ -62,7 +62,7 @@ jobs:
nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }} nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
- name: Install pnpm - name: Install pnpm
uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10 uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0
with: with:
version: 10 version: 10
run_install: false run_install: false
+2 -2
View File
@@ -23,7 +23,7 @@ jobs:
with: with:
python-version-file: ".python-version" python-version-file: ".python-version"
- name: Install uv - name: Install uv
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1 uses: astral-sh/setup-uv@bec219d24cd3e171d82865faccec33120bb574f4 # v10.1.0
- run: sudo apt-get install pngquant - run: sudo apt-get install pngquant
- name: Test Docs Build - name: Test Docs Build
run: uv run --frozen zensical build --clean run: uv run --frozen zensical build --clean
@@ -45,7 +45,7 @@ jobs:
with: with:
python-version-file: ".python-version" python-version-file: ".python-version"
- name: Install uv - name: Install uv
uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1 uses: astral-sh/setup-uv@bec219d24cd3e171d82865faccec33120bb574f4 # v10.1.0
- run: sudo apt-get install pngquant - run: sudo apt-get install pngquant
- name: Build Docs - name: Build Docs
run: uv run --frozen zensical build --clean run: uv run --frozen zensical build --clean
+1 -1
View File
@@ -26,7 +26,7 @@ jobs:
uses: pre-commit/action@2c7b3805fd2a0fd8c1884dcaebf91fc102a13ecd # v3.0.1 uses: pre-commit/action@2c7b3805fd2a0fd8c1884dcaebf91fc102a13ecd # v3.0.1
- name: Install pnpm - name: Install pnpm
uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10 uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0
with: with:
version: 10 version: 10
run_install: false run_install: false
+1 -1
View File
@@ -18,7 +18,7 @@ jobs:
steps: steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10 - uses: pnpm/action-setup@ea17c68df8912ef543352723c149a84f56e3d413 # v6.1.0
with: with:
version: 9 version: 9
Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

+58
View File
@@ -430,6 +430,64 @@ headerStyle: clean
headerStyle: boxedWidgets headerStyle: boxedWidgets
``` ```
## Card Style
Service and bookmark cards use a drop shadow by default. The `hairline` style replaces it with a thin border that brightens on hover.
<img width="896" alt="default cards" src="../../assets/style-default.webp">
```yaml
# default, shadowed cards
```
---
<img width="896" alt="hairline cards" src="../../assets/card-style-hairline.webp">
```yaml
cardStyle: hairline
```
## Block Style
Widget blocks (the value / label pairs inside a service card) can use the `refined` style to make values heavier and easier to read.
<img width="896" alt="default blocks" src="../../assets/style-default.webp">
```yaml
# default, standard blocks
```
---
<img width="896" alt="refined blocks" src="../../assets/block-style-refined.webp">
```yaml
blockStyle: refined
```
## Font
Homepage uses Manrope by default. You can switch to IBM Plex Mono instead, either everywhere or for data only.
<img width="896" alt="IBM Plex Mono everywhere" src="../../assets/font-plex.webp">
```yaml
font: plex # the whole dashboard
```
---
<img width="896" alt="IBM Plex Mono for data only" src="../../assets/font-plex-data.webp">
```yaml
font: plexData # only values, stats, the clock and status tags
```
With `plexData`, labels and names stay in Manrope while numbers line up in columns.
Both fonts are bundled with Homepage, so no external requests are made.
## Base URL ## Base URL
In some proxy configurations, it may be necessary to set the documents base URL. You can do this by providing a `base` value, like so: In some proxy configurations, it may be necessary to set the documents base URL. You can do this by providing a `base` value, like so:
+36
View File
@@ -0,0 +1,36 @@
---
title: Custom API
description: Custom API Information Widget Configuration
---
_(Find the Custom API service widget [here](../services/customapi.md))_
The Custom API information widget shows values from a custom self-hosted or third party API in your Homepage header, alongside an icon.
```yaml
- customapi:
url: http://custom.api.host.or.ip:port/path/to/exact/api/endpoint
icon: mdi-api # optional, see below
label: My API # optional, shown below the values
href: https://custom.api.host # optional, makes the widget a link
refreshInterval: 10000 # optional - in milliseconds, defaults to 10s
username: username # auth - optional
password: password # auth - optional
method: GET # optional, e.g. POST
headers: # optional, must be object
X-API-Token: token
requestBody: # optional, can be string or object
mappings:
- field: key
label: Field 1
- field: path.to.key2
label: Field 2
format: number # optional - defaults to text
- field: path.to.key3
label: Field 3
format: percent
```
The `icon` accepts the same values as [service icons](../../configs/services.md#icons), e.g. `mdi-api`, `si-github`, `sh-homepage`, a dashboard icon name like `homepage.png`, or a full URL. If no icon is set, a generic API icon is shown.
Mappings support the same `field`, `format`, `remap`, `scale`, `prefix` and `suffix` options as the [Custom API service widget](../services/customapi.md). The `additionalField` option and the `display` modes are not supported.
+1
View File
@@ -7,6 +7,7 @@ search:
You can also find a list of all available info widgets in the sidebar navigation. You can also find a list of all available info widgets in the sidebar navigation.
- [Custom API](customapi.md)
- [Date & Time](datetime.md) - [Date & Time](datetime.md)
- [Glances](glances.md) - [Glances](glances.md)
- [Greeting](greeting.md) - [Greeting](greeting.md)
+2 -1
View File
@@ -6,6 +6,7 @@ description: Arcane Widget Configuration
Learn more about [Arcane](https://github.com/getarcaneapp/arcane). Learn more about [Arcane](https://github.com/getarcaneapp/arcane).
**Allowed fields** (max 4): `running`, `stopped`, `total`, `images`, `images_used`, `images_unused`, `image_updates`. **Allowed fields** (max 4): `running`, `stopped`, `total`, `images`, `images_used`, `images_unused`, `image_updates`.
**Default fields**: `running`, `stopped`, `total`, `image_updates`. **Default fields**: `running`, `stopped`, `total`, `image_updates`.
```yaml ```yaml
@@ -17,4 +18,4 @@ widget:
fields: ["running", "stopped", "total", "image_updates"] # optional fields: ["running", "stopped", "total", "image_updates"] # optional
``` ```
Using an api key for the widget requires permissions for: `containers:list` `images:list and `image-updates:read` Using an API key for the widget requires permissions for: `containers:list`, `images:list`, and `image-updates:read`.
+2
View File
@@ -3,6 +3,8 @@ title: Custom API
description: Custom Widget Configuration from the API description: Custom Widget Configuration from the API
--- ---
_(Find the Custom API information widget [here](../info/customapi.md))_
This widget can show information from custom self-hosted or third party API. This widget can show information from custom self-hosted or third party API.
Fields need to be defined in the `mappings` section YAML object to correlate with the value in the APIs JSON object. Final field definition needs to be the key with the desired value information. Fields need to be defined in the `mappings` section YAML object to correlate with the value in the APIs JSON object. Final field definition needs to be the key with the desired value information.
+1
View File
@@ -194,6 +194,7 @@ nav:
- widgets/services/zabbix.md - widgets/services/zabbix.md
- "Information Widgets": - "Information Widgets":
- widgets/info/index.md - widgets/info/index.md
- widgets/info/customapi.md
- widgets/info/datetime.md - widgets/info/datetime.md
- widgets/info/glances.md - widgets/info/glances.md
- widgets/info/greeting.md - widgets/info/greeting.md
+6
View File
@@ -106,6 +106,12 @@ function relativeDate(date, formatter) {
const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta)); const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1; const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
if (units[unitIndex] === "day") {
// compare calendar days, not elapsed 24h blocks
const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
return formatter.format(Math.round((startOfDay(date) - startOfDay(new Date())) / 86400000), "day");
}
return formatter.format(Math.floor(delta / divisor), units[unitIndex]); return formatter.format(Math.floor(delta / divisor), units[unitIndex]);
} }
+191 -191
View File
@@ -21,7 +21,7 @@
"seconds": "s" "seconds": "s"
}, },
"auth": { "auth": {
"signout": "Sign out" "signout": "Log af"
}, },
"widget": { "widget": {
"missing_type": "Manglende Widget Type: {{type}}", "missing_type": "Manglende Widget Type: {{type}}",
@@ -40,8 +40,8 @@
}, },
"search": { "search": {
"placeholder": "Søg…", "placeholder": "Søg…",
"provider": "Search engine: {{name}}", "provider": "Søgemaskine: {{name}}",
"select_provider": "Select search engine" "select_provider": "Vælg søgemaskine"
}, },
"resources": { "resources": {
"cpu": "CPU", "cpu": "CPU",
@@ -66,29 +66,29 @@
"wlan_devices": "WLAN Enheder", "wlan_devices": "WLAN Enheder",
"lan_users": "LAN Brugere", "lan_users": "LAN Brugere",
"wlan_users": "WLAN Brugere", "wlan_users": "WLAN Brugere",
"up": "UP", "up": "OP",
"down": "NED", "down": "NED",
"wait": "Please wait", "wait": "Vent",
"empty_data": "Subsystem status ukendt" "empty_data": "Subsystem status ukendt"
}, },
"unifi_drive": { "unifi_drive": {
"healthy": "Healthy", "healthy": "Sund",
"degraded": "Degraded", "degraded": "Forringet",
"no_data": "No storage data available" "no_data": "Ingen lagringsdata tilgængelige"
}, },
"duplicati": { "duplicati": {
"jobs": "Jobs", "jobs": "Jobs",
"stored": "Stored", "stored": "Gemte",
"lastBackup": "Last Run", "lastBackup": "Sidste kørsel",
"nextRun": "Next Run", "nextRun": "Næste kørsel",
"running": "Running", "running": "Kører",
"warnings": "Warnings", "warnings": "Advarsel",
"errors": "Errors" "errors": "Fejl"
}, },
"docker": { "docker": {
"rx": "RX", "rx": "RX",
"tx": "TX", "tx": "TX",
"mem": "MEM", "mem": "RAM",
"cpu": "CPU", "cpu": "CPU",
"running": "Kører", "running": "Kører",
"offline": "Offline", "offline": "Offline",
@@ -100,14 +100,14 @@
"not_found": "Ikke Fundet", "not_found": "Ikke Fundet",
"exited": "Forladt", "exited": "Forladt",
"partial": "Delvis", "partial": "Delvis",
"created": "Created", "created": "Oprettet",
"paused": "Paused", "paused": "Sat på pause",
"restarting": "Restarting", "restarting": "Genstarter",
"removing": "Removing", "removing": "Fjerner",
"dead": "Dead" "dead": "Død"
}, },
"ping": { "ping": {
"error": "Error", "error": "Fejl",
"ping": "Ping", "ping": "Ping",
"down": "Ned", "down": "Ned",
"up": "Op", "up": "Op",
@@ -115,11 +115,11 @@
}, },
"siteMonitor": { "siteMonitor": {
"http_status": "HTTP-status", "http_status": "HTTP-status",
"error": "Error", "error": "Fejl",
"response": "Response", "response": "Svar",
"down": "Down", "down": "Ned",
"up": "Up", "up": "Op",
"not_available": "Not Available" "not_available": "Ikke tilgængelig"
}, },
"emby": { "emby": {
"playing": "Afspiller", "playing": "Afspiller",
@@ -132,22 +132,22 @@
"songs": "Sange" "songs": "Sange"
}, },
"jellyfin": { "jellyfin": {
"playing": "Playing", "playing": "Afspiller",
"transcoding": "Transcoding", "transcoding": "Transcoder",
"bitrate": "Bitrate", "bitrate": "Bitrate",
"no_active": "No Active Streams", "no_active": "Ingen Aktive Streams",
"movies": "Movies", "movies": "Film",
"series": "Series", "series": "Serier",
"episodes": "Episodes", "episodes": "Episoder",
"songs": "Songs", "songs": "Sange",
"albums": "Albums" "albums": "Album"
}, },
"esphome": { "esphome": {
"offline": "Offline", "offline": "Offline",
"offline_alt": "Offline", "offline_alt": "Offline",
"online": "Online", "online": "Online",
"total": "Total", "total": "Total",
"unknown": "Unknown" "unknown": "Ukendt"
}, },
"evcc": { "evcc": {
"pv_power": "Produktion", "pv_power": "Produktion",
@@ -169,22 +169,22 @@
}, },
"fritzbox": { "fritzbox": {
"connectionStatus": "Status", "connectionStatus": "Status",
"connectionStatusUnconfigured": "Unconfigured", "connectionStatusUnconfigured": "Ikke konfigureret",
"connectionStatusConnecting": "Connecting", "connectionStatusConnecting": "Forbinder",
"connectionStatusAuthenticating": "Authenticating", "connectionStatusAuthenticating": "Godkender",
"connectionStatusPendingDisconnect": "Pending Disconnect", "connectionStatusPendingDisconnect": "Afventer Afbrydelse",
"connectionStatusDisconnecting": "Disconnecting", "connectionStatusDisconnecting": "Afbryder forbindelsen",
"connectionStatusDisconnected": "Disconnected", "connectionStatusDisconnected": "Afbrudt",
"connectionStatusConnected": "Connected", "connectionStatusConnected": "Forbundet",
"uptime": "Uptime", "uptime": "Oppetid",
"maxDown": "Max. Down", "maxDown": "Maks. Ned",
"maxUp": "Max. Up", "maxUp": "Maks. Op",
"down": "Down", "down": "Ned",
"up": "Up", "up": "Op",
"received": "Modtaget", "received": "Modtaget",
"sent": "Sendt", "sent": "Sendt",
"externalIPAddress": "Ekstern IP", "externalIPAddress": "Ekstern IP",
"externalIPv6Address": "Ext. IPv6", "externalIPv6Address": "Ekstern IPv6",
"externalIPv6Prefix": "Ext. IPv6-Prefix" "externalIPv6Prefix": "Ext. IPv6-Prefix"
}, },
"caddy": { "caddy": {
@@ -203,24 +203,24 @@
"passes": "Bestået" "passes": "Bestået"
}, },
"tautulli": { "tautulli": {
"playing": "Playing", "playing": "Afspiller",
"transcoding": "Transcoding", "transcoding": "Transcoder",
"bitrate": "Bitrate", "bitrate": "Bitrate",
"no_active": "No Active Streams", "no_active": "Ingen Aktive Streams",
"plex_connection_error": "Tjek Plex-forbindelse" "plex_connection_error": "Tjek Plex-forbindelse"
}, },
"tracearr": { "tracearr": {
"no_active": "No Active Streams", "no_active": "Ingen Aktive Streams",
"streams": "Streams", "streams": "Streams",
"transcodes": "Transcodes", "transcodes": "Transkoder",
"directplay": "Direct Play", "directplay": "Direkte afspilning",
"bitrate": "Bitrate" "bitrate": "Bitrate"
}, },
"omada": { "omada": {
"connectedAp": "Forbundne APs", "connectedAp": "Forbundne APs",
"activeUser": "Aktive enheder", "activeUser": "Aktive enheder",
"alerts": "Advarsler", "alerts": "Advarsler",
"connectedGateways": "Connected gateways", "connectedGateways": "Forbundne gateways",
"connectedSwitches": "Forbundne switches" "connectedSwitches": "Forbundne switches"
}, },
"nzbget": { "nzbget": {
@@ -231,7 +231,7 @@
"plex": { "plex": {
"streams": "Aktive Streams", "streams": "Aktive Streams",
"albums": "Albums", "albums": "Albums",
"movies": "Movies", "movies": "Film",
"tv": "TV-Shows" "tv": "TV-Shows"
}, },
"sabnzbd": { "sabnzbd": {
@@ -283,17 +283,17 @@
"sonarr": { "sonarr": {
"wanted": "Ønsket", "wanted": "Ønsket",
"queued": "I Kø", "queued": "I Kø",
"series": "Series", "series": "Serier",
"queue": "Queue", "queue": "",
"unknown": "Unknown" "unknown": "Ukendt"
}, },
"radarr": { "radarr": {
"wanted": "Wanted", "wanted": "Wanted",
"missing": "Mangler", "missing": "Mangler",
"queued": "Queued", "queued": "Queued",
"movies": "Movies", "movies": "Film",
"queue": "Queue", "queue": "",
"unknown": "Unknown" "unknown": "Ukendt"
}, },
"lidarr": { "lidarr": {
"wanted": "Wanted", "wanted": "Wanted",
@@ -315,18 +315,18 @@
"available": "Tilgængelig" "available": "Tilgængelig"
}, },
"seerr": { "seerr": {
"pending": "Pending", "pending": "Afventer",
"approved": "Approved", "approved": "Godkendt",
"available": "Available", "available": "Tilgængelig",
"completed": "Completed", "completed": "Udført",
"processing": "Processing", "processing": "Behandler",
"issues": "Open Issues" "issues": "Åbne problemer"
}, },
"netalertx": { "netalertx": {
"total": "Total", "total": "Total",
"connected": "Connected", "connected": "Forbundet",
"new_devices": "New Devices", "new_devices": "Nye Enheder",
"down_alerts": "Down Alerts" "down_alerts": "Nede Advarsler"
}, },
"pihole": { "pihole": {
"queries": "Forespørgsler", "queries": "Forespørgsler",
@@ -335,8 +335,8 @@
"gravity": "Tyngdekraft" "gravity": "Tyngdekraft"
}, },
"adguard": { "adguard": {
"queries": "Queries", "queries": "Forespørgsler",
"blocked": "Blocked", "blocked": "Blokerede",
"filtered": "Filtreret", "filtered": "Filtreret",
"latency": "Latenstid" "latency": "Latenstid"
}, },
@@ -346,33 +346,33 @@
"ping": "Ping" "ping": "Ping"
}, },
"portainer": { "portainer": {
"running": "Running", "running": "Kører",
"stopped": "Stoppede", "stopped": "Stoppede",
"total": "Total" "total": "Total"
}, },
"suwayomi": { "suwayomi": {
"download": "Downloaded", "download": "Hentet",
"nondownload": "Non-Downloaded", "nondownload": "Ikke-Downloadet",
"read": "Read", "read": "Læst",
"unread": "Unread", "unread": "Ulæst",
"downloadedread": "Downloaded & Read", "downloadedread": "Downloadet Og Læst",
"downloadedunread": "Downloaded & Unread", "downloadedunread": "Downloadet & Ulæst",
"nondownloadedread": "Non-Downloaded & Read", "nondownloadedread": "Ikke-Downloadet & Læst",
"nondownloadedunread": "Non-Downloaded & Unread" "nondownloadedunread": "Ikke-Downloadet & Ulæst"
}, },
"tailscale": { "tailscale": {
"address": "Adresse", "address": "Adresse",
"expires": "Udløber", "expires": "Udløber",
"never": "Aldrig", "never": "Aldrig",
"user": "User", "user": "Bruger",
"hostname": "Hostname", "hostname": "Værtsnavn",
"name": "Name", "name": "Navn",
"client_version": "Client Version", "client_version": "Klientversion",
"os": "OS", "os": "Styresystem",
"created": "Created", "created": "Oprettet",
"authorized": "Authorized", "authorized": "Autoriseret",
"is_external": "Is External", "is_external": "Er ekstern",
"update_available": "Update Available", "update_available": "Opdatering tilgængelig",
"tags": "Tags", "tags": "Tags",
"last_seen": "Sidst Set", "last_seen": "Sidst Set",
"now": "Nu", "now": "Nu",
@@ -383,24 +383,24 @@
"minutes": "{{number}}m", "minutes": "{{number}}m",
"seconds": "{{number}}s", "seconds": "{{number}}s",
"ago": "{{value}} Siden", "ago": "{{value}} Siden",
"true": "Yes", "true": "Ja",
"false": "No" "false": "Nej"
}, },
"technitium": { "technitium": {
"totalQueries": "Queries", "totalQueries": "Forespørgsler",
"totalNoError": "Success", "totalNoError": "Succes",
"totalServerFailure": "Failures", "totalServerFailure": "Fejl",
"totalNxDomain": "NX Domains", "totalNxDomain": "Domæner",
"totalRefused": "Refused", "totalRefused": "Nægtede",
"totalAuthoritative": "Authoritative", "totalAuthoritative": "Autorativ",
"totalRecursive": "Recursive", "totalRecursive": "Rekursivt",
"totalCached": "Cached", "totalCached": "Cachet",
"totalBlocked": "Blocked", "totalBlocked": "Blokeret",
"totalDropped": "Dropped", "totalDropped": "Tabt",
"totalClients": "Klienter" "totalClients": "Klienter"
}, },
"tdarr": { "tdarr": {
"queue": "Queue", "queue": "",
"processed": "Behandlet", "processed": "Behandlet",
"errored": "Fejlet", "errored": "Fejlet",
"saved": "Gemt" "saved": "Gemt"
@@ -412,12 +412,12 @@
}, },
"trilium": { "trilium": {
"version": "Version", "version": "Version",
"notesCount": "Notes", "notesCount": "Noter",
"dbSize": "Database Size", "dbSize": "Databasestørrelse",
"unknown": "Unknown" "unknown": "Ukendt"
}, },
"navidrome": { "navidrome": {
"nothing_streaming": "No Active Streams", "nothing_streaming": "Ingen Aktive Streams",
"please_wait": "Vent venligst" "please_wait": "Vent venligst"
}, },
"npm": { "npm": {
@@ -482,31 +482,31 @@
"authorizationsLast24H": "Auths (24h)" "authorizationsLast24H": "Auths (24h)"
}, },
"proxmox": { "proxmox": {
"mem": "MEM", "mem": "RAM",
"cpu": "CPU", "cpu": "CPU",
"lxc": "LXC", "lxc": "LXC",
"vms": "VMs" "vms": "VMs"
}, },
"pulse": { "pulse": {
"nodes": "Nodes", "nodes": "Noder",
"vms": "VMs", "vms": "VMs",
"lxcs": "LXCs" "lxcs": "LXC"
}, },
"glances": { "glances": {
"cpu": "CPU", "cpu": "CPU",
"load": "Load", "load": "Indlæs",
"wait": "Please wait", "wait": "Vent venligst",
"temp": "TEMP", "temp": "TEMP",
"_temp": "Temp", "_temp": "Temp",
"warn": "Advar", "warn": "Advar",
"uptime": "UP", "uptime": "OP",
"total": "Total", "total": "Total",
"free": "Free", "free": "Fri",
"used": "Used", "used": "Brugt",
"days": "d", "days": "d",
"hours": "h", "hours": "t",
"crit": "Crit", "crit": "Crit",
"read": "Read", "read": "Læst",
"write": "Skriv", "write": "Skriv",
"gpu": "GPU", "gpu": "GPU",
"mem": "Ram", "mem": "Ram",
@@ -519,7 +519,7 @@
"custom": "Brugerdefinerede", "custom": "Brugerdefinerede",
"visit": "Besøg", "visit": "Besøg",
"url": "URL", "url": "URL",
"searchsuggestion": "Suggestion" "searchsuggestion": "Forslag"
}, },
"wmo": { "wmo": {
"0-day": "Solrig", "0-day": "Solrig",
@@ -527,57 +527,57 @@
"1-day": "Overvejende Solrigt", "1-day": "Overvejende Solrigt",
"1-night": "Overvejende Skyfrit", "1-night": "Overvejende Skyfrit",
"2-day": "Delvist Overskyet", "2-day": "Delvist Overskyet",
"2-night": "Partly Cloudy", "2-night": "Delvist Overskyet",
"3-day": "Skyet", "3-day": "Skyet",
"3-night": "Cloudy", "3-night": "Skyet",
"45-day": "Tåget", "45-day": "Tåget",
"45-night": "Foggy", "45-night": "Tåget",
"48-day": "Foggy", "48-day": "Tåget",
"48-night": "Foggy", "48-night": "Tåget",
"51-day": "Let Støvregn", "51-day": "Let Støvregn",
"51-night": "Light Drizzle", "51-night": "Let Støvregn",
"53-day": "Støvregn", "53-day": "Støvregn",
"53-night": "Drizzle", "53-night": "Støvregn",
"55-day": "Kraftig Støvregn", "55-day": "Kraftig Støvregn",
"55-night": "Heavy Drizzle", "55-night": "Kraftig Støvregn",
"56-day": "Let Frysende Støvregn", "56-day": "Let Frysende Støvregn",
"56-night": "Light Freezing Drizzle", "56-night": "Light Freezing Drizzle",
"57-day": "Frysende Støvregn", "57-day": "Frysende Støvregn",
"57-night": "Freezing Drizzle", "57-night": "Freezing Drizzle",
"61-day": "Let Regn", "61-day": "Let Regn",
"61-night": "Light Rain", "61-night": "Let Regn",
"63-day": "Regn", "63-day": "Regn",
"63-night": "Rain", "63-night": "Regn",
"65-day": "Kraftig Regn", "65-day": "Kraftig Regn",
"65-night": "Heavy Rain", "65-night": "Kraftig Regn",
"66-day": "Frysende Regn", "66-day": "Frysende Regn",
"66-night": "Freezing Rain", "66-night": "Freezing Rain",
"67-day": "Freezing Rain", "67-day": "Freezing Rain",
"67-night": "Freezing Rain", "67-night": "Freezing Rain",
"71-day": "Let Sne", "71-day": "Let Sne",
"71-night": "Light Snow", "71-night": "Let Sne",
"73-day": "Sne", "73-day": "Sne",
"73-night": "Snow", "73-night": "Sne",
"75-day": "Kraftig Sne", "75-day": "Kraftig Sne",
"75-night": "Heavy Snow", "75-night": "Kraftig Sne",
"77-day": "Snekorn", "77-day": "Snekorn",
"77-night": "Snow Grains", "77-night": "Mildt snefald",
"80-day": "Lette Byger", "80-day": "Lette Byger",
"80-night": "Light Showers", "80-night": "Lette Byger",
"81-day": "Byger", "81-day": "Byger",
"81-night": "Showers", "81-night": "Byger",
"82-day": "Kraftige Byger", "82-day": "Kraftige Byger",
"82-night": "Heavy Showers", "82-night": "Kraftige Byger",
"85-day": "Snebyger", "85-day": "Snebyger",
"85-night": "Snow Showers", "85-night": "Snebyger",
"86-day": "Snow Showers", "86-day": "Snebyger",
"86-night": "Snow Showers", "86-night": "Snebyger",
"95-day": "Tordenvejr", "95-day": "Tordenvejr",
"95-night": "Thunderstorm", "95-night": "Tordenvejr",
"96-day": "Tordenvejr Med Hagl", "96-day": "Tordenvejr Med Hagl",
"96-night": "Thunderstorm With Hail", "96-night": "Tordenvejr Med Hagl",
"99-day": "Thunderstorm With Hail", "99-day": "Tordenvejr Med Hagl",
"99-night": "Thunderstorm With Hail" "99-night": "Tordenvejr Med Hagl"
}, },
"homebridge": { "homebridge": {
"available_update": "System", "available_update": "System",
@@ -586,16 +586,16 @@
"up_to_date": "Opdateret", "up_to_date": "Opdateret",
"child_bridges": "Underbroer", "child_bridges": "Underbroer",
"child_bridges_status": "{{ok}}/{{total}}", "child_bridges_status": "{{ok}}/{{total}}",
"up": "Up", "up": "Op",
"pending": "Pending", "pending": "Afventer",
"down": "Down", "down": "Ned",
"ok": "Ok" "ok": "Ok"
}, },
"healthchecks": { "healthchecks": {
"new": "Ny", "new": "Ny",
"up": "Up", "up": "Op",
"grace": "Henstandsperiode", "grace": "Henstandsperiode",
"down": "Down", "down": "Ned",
"paused": "Pause", "paused": "Pause",
"status": "Status", "status": "Status",
"last_ping": "Sidste Ping", "last_ping": "Sidste Ping",
@@ -607,85 +607,85 @@
"containers_failed": "Fejlet" "containers_failed": "Fejlet"
}, },
"autobrr": { "autobrr": {
"approvedPushes": "Approved", "approvedPushes": "Godkendt",
"rejectedPushes": "Afviste", "rejectedPushes": "Afviste",
"filters": "Filtre", "filters": "Filtre",
"indexers": "Indexers" "indexers": "Indeksører"
}, },
"tubearchivist": { "tubearchivist": {
"downloads": "Queue", "downloads": "",
"videos": "Videoer", "videos": "Videoer",
"channels": "Kanaler", "channels": "Kanaler",
"playlists": "Afspilningslister" "playlists": "Afspilningslister"
}, },
"truenas": { "truenas": {
"load": "Systembelastning", "load": "Systembelastning",
"uptime": "Uptime", "uptime": "Oppetid",
"alerts": "Alerts" "alerts": "Advarsler"
}, },
"pyload": { "pyload": {
"speed": "Hastighed", "speed": "Hastighed",
"active": "Active", "active": "Aktive",
"queue": "Queue", "queue": "",
"total": "Total" "total": "Total"
}, },
"gluetun": { "gluetun": {
"public_ip": "Offentlig IP", "public_ip": "Offentlig IP",
"region": "Område", "region": "Område",
"country": "Land", "country": "Land",
"port_forwarded": "Port Forwarded" "port_forwarded": "Port Viderestillet"
}, },
"hdhomerun": { "hdhomerun": {
"channels": "Channels", "channels": "Kanaler",
"hd": "HD", "hd": "HD",
"tunerCount": "Tuners", "tunerCount": "Tunere",
"channelNumber": "Channel", "channelNumber": "Kanal",
"channelNetwork": "Network", "channelNetwork": "Netrk",
"signalStrength": "Strength", "signalStrength": "Styrke",
"signalQuality": "Quality", "signalQuality": "Kvalitet",
"symbolQuality": "Quality", "symbolQuality": "Kvalitet",
"networkRate": "Bitrate", "networkRate": "Bitrate",
"clientIP": "Client" "clientIP": "Klient"
}, },
"scrutiny": { "scrutiny": {
"passed": "Bestået", "passed": "Bestået",
"failed": "Failed", "failed": "Fejlet",
"unknown": "Unknown" "unknown": "Ukendt"
}, },
"paperlessngx": { "paperlessngx": {
"inbox": "Indbakke", "inbox": "Indbakke",
"total": "Total" "total": "Total"
}, },
"pangolin": { "pangolin": {
"orgs": "Orgs", "orgs": "Organisationer",
"sites": "Sites", "sites": "Websteder",
"resources": "Resources", "resources": "Ressourcer",
"targets": "Targets", "targets": "Mål",
"traffic": "Traffic", "traffic": "Trafik",
"in": "In", "in": "Ind",
"out": "Out" "out": "Ud"
}, },
"peanut": { "peanut": {
"battery_charge": "Batteriniveau", "battery_charge": "Batteriniveau",
"ups_load": "UPS Load", "ups_load": "Ups Belastning",
"ups_status": "UPS Status", "ups_status": "UPS Status",
"online": "Online", "online": "Online",
"on_battery": "På batteri", "on_battery": "På batteri",
"low_battery": "Lavt batteriniveau" "low_battery": "Lavt batteriniveau"
}, },
"nextdns": { "nextdns": {
"wait": "Please Wait", "wait": "Vent venligst",
"no_devices": "Ingen Enhedsdata Modtaget" "no_devices": "Ingen Enhedsdata Modtaget"
}, },
"mikrotik": { "mikrotik": {
"cpuLoad": "CPU Belastning", "cpuLoad": "CPU Belastning",
"memoryUsed": "Hukommelse Brugt", "memoryUsed": "Hukommelse Brugt",
"uptime": "Uptime", "uptime": "Oppetid",
"numberOfLeases": "Leasinger" "numberOfLeases": "Leasinger"
}, },
"xteve": { "xteve": {
"streams_all": "Alle Streams", "streams_all": "Alle Streams",
"streams_active": "Active Streams", "streams_active": "Aktive Streams",
"streams_xepg": "XEPG Kanaler" "streams_xepg": "XEPG Kanaler"
}, },
"opendtu": { "opendtu": {
@@ -695,7 +695,7 @@
"limit": "Begrænsning" "limit": "Begrænsning"
}, },
"opnsense": { "opnsense": {
"cpu": "CPU Load", "cpu": "CPU Belastning",
"memory": "Aktiv Hukommelse", "memory": "Aktiv Hukommelse",
"wanUpload": "WAN Upload", "wanUpload": "WAN Upload",
"wanDownload": "WAN Download" "wanDownload": "WAN Download"
@@ -720,8 +720,8 @@
"load": "Belastning Gns", "load": "Belastning Gns",
"memory": "Hukommelse Forbrug", "memory": "Hukommelse Forbrug",
"wanStatus": "WAN Status", "wanStatus": "WAN Status",
"up": "Up", "up": "Op",
"down": "Down", "down": "Ned",
"temp": "Temp", "temp": "Temp",
"disk": "Disk Forbrug", "disk": "Disk Forbrug",
"wanIP": "WAN IP" "wanIP": "WAN IP"
@@ -733,15 +733,15 @@
"memory_usage": "Hukommelse" "memory_usage": "Hukommelse"
}, },
"immich": { "immich": {
"users": "Users", "users": "Brugere",
"photos": "Billeder", "photos": "Billeder",
"videos": "Videos", "videos": "Videoer",
"storage": "Lager" "storage": "Lager"
}, },
"uptimekuma": { "uptimekuma": {
"up": "Sider Oppe", "up": "Sider Oppe",
"down": "Sider Nede", "down": "Sider Nede",
"uptime": "Uptime", "uptime": "Oppetid",
"incident": "Hændelse", "incident": "Hændelse",
"m": "m" "m": "m"
}, },
@@ -889,7 +889,7 @@
"name": "Navn", "name": "Navn",
"map": "Kort", "map": "Kort",
"currentPlayers": "Nuværende Spillere", "currentPlayers": "Nuværende Spillere",
"players": "Players", "players": "Spillere",
"maxPlayers": "Maks spillere", "maxPlayers": "Maks spillere",
"bots": "Bots", "bots": "Bots",
"ping": "Ping" "ping": "Ping"
@@ -902,22 +902,22 @@
}, },
"mealie": { "mealie": {
"recipes": "Opskrifter", "recipes": "Opskrifter",
"users": "Users", "users": "Brugere",
"categories": "Categories", "categories": "Kategorier",
"tags": "Tags" "tags": "Tags"
}, },
"openmediavault": { "openmediavault": {
"downloading": "Downloader", "downloading": "Downloader",
"total": "Total", "total": "Total",
"running": "Running", "running": "Kører",
"stopped": "Stopped", "stopped": "Stopped",
"passed": "Passed", "passed": "Passed",
"failed": "Failed" "failed": "Fejlet"
}, },
"openwrt": { "openwrt": {
"uptime": "Uptime", "uptime": "Oppetid",
"cpuLoad": "CPU Load Avg (5m)", "cpuLoad": "CPU Load Avg (5m)",
"up": "Up", "up": "Op",
"down": "Down", "down": "Down",
"bytesTx": "Transmitted", "bytesTx": "Transmitted",
"bytesRx": "Received" "bytesRx": "Received"
@@ -0,0 +1,118 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
import createMockRes from "test-utils/create-mock-res";
const { getPrivateWidgetOptions, httpProxy, logger } = vi.hoisted(() => ({
getPrivateWidgetOptions: vi.fn(),
httpProxy: vi.fn(),
logger: { debug: vi.fn() },
}));
vi.mock("utils/config/widget-helpers", () => ({
getPrivateWidgetOptions,
}));
vi.mock("utils/proxy/http", () => ({
httpProxy,
}));
vi.mock("utils/logger", () => ({
default: () => logger,
}));
import handler from "pages/api/widgets/customapi";
const json = (body) => Buffer.from(JSON.stringify(body));
async function callRoute(options, index = "0") {
getPrivateWidgetOptions.mockResolvedValueOnce(options);
const res = createMockRes();
await handler({ query: { index } }, res);
return res;
}
describe("pages/api/widgets/customapi", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it.each([
["no widget at that index", undefined],
["a widget without a url", { method: "GET" }],
["an invalid url", { url: "api.local/data" }],
])("returns 400 without calling upstream for %s", async (_, options) => {
const res = await callRoute(options, "3");
expect(getPrivateWidgetOptions).toHaveBeenCalledWith("customapi", "3");
expect(res.statusCode).toBe(400);
expect(httpProxy).not.toHaveBeenCalled();
});
it("proxies an authenticated POST with custom headers and a JSON body", async () => {
httpProxy.mockResolvedValueOnce([200, "application/json", json({ json: { hello: "world" } })]);
const res = await callRoute({
url: "https://httpbin.org/post",
username: "admin",
password: "hunter2",
method: "POST",
headers: { "X-Secret-Token": "super-secret", "Content-Type": "application/json" },
requestBody: { hello: "world" },
});
expect(httpProxy).toHaveBeenCalledWith(new URL("https://httpbin.org/post"), {
method: "POST",
headers: {
"User-Agent": "homepage",
Accept: "application/json",
"X-Secret-Token": "super-secret",
"Content-Type": "application/json",
Authorization: `Basic ${Buffer.from("admin:hunter2").toString("base64")}`,
},
body: '{"hello":"world"}',
});
expect(res.statusCode).toBe(200);
expect(res.body).toEqual({ json: { hello: "world" } });
});
it("sends a string body as-is and lets config override default headers", async () => {
httpProxy.mockResolvedValueOnce([200, "application/json", json({ data: { viewer: { login: "shamoon" } } })]);
const query = '{"query":"{ viewer { login } }"}';
const res = await callRoute({
url: "https://api.github.com/graphql",
method: "POST",
headers: { Authorization: "Bearer ghp_token", "User-Agent": "my-dashboard" },
requestBody: query,
});
expect(httpProxy).toHaveBeenCalledWith(expect.any(URL), {
method: "POST",
headers: { "User-Agent": "my-dashboard", Accept: "application/json", Authorization: "Bearer ghp_token" },
body: query,
});
expect(res.body).toEqual({ data: { viewer: { login: "shamoon" } } });
});
it.each([
["an HTTP error", [403, "application/json", json({ message: "API rate limit exceeded for 1.2.3.4" })]],
[
"a network failure",
[500, "application/json", { error: { message: "connect ECONNREFUSED", rawError: { address: "10.0.0.5" } } }],
],
["a non-JSON response", [200, "text/html", Buffer.from("<html><body>Login</body></html>")]],
])("returns only a sanitized error for %s", async (_, upstream) => {
httpProxy.mockResolvedValueOnce(upstream);
const res = await callRoute({ url: "https://api.github.com/repos/gethomepage/homepage?token=abc" });
expect(httpProxy).toHaveBeenCalledWith(expect.any(URL), {
method: "GET",
headers: { "User-Agent": "homepage", Accept: "application/json" },
});
expect(res.statusCode).toBe(upstream[0] === 200 ? 500 : upstream[0]);
expect(res.body.error.url).toBe("api.github.com (see logs for details)");
expect(JSON.stringify(res.body)).not.toMatch(/rate limit|ECONNREFUSED|10\.0\.0\.5|<html>|token=abc/);
expect(res.setHeader).not.toHaveBeenCalled();
});
});
+6 -1
View File
@@ -7,6 +7,10 @@ import { SettingsContext } from "utils/contexts/settings";
export default function Item({ bookmark, iconOnly = false }) { export default function Item({ bookmark, iconOnly = false }) {
const description = bookmark.description ?? new URL(bookmark.href).hostname; const description = bookmark.description ?? new URL(bookmark.href).hostname;
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const cardStyle =
settings.cardStyle === "hairline"
? "shadow-xs inset-ring inset-ring-black/5 dark:inset-ring-white/5 hover:inset-ring-black/10 dark:hover:inset-ring-white/10"
: "shadow-md shadow-theme-900/10 dark:shadow-theme-900/20";
return ( return (
<li <li
@@ -22,7 +26,8 @@ export default function Item({ bookmark, iconOnly = false }) {
target={bookmark.target ?? settings.target ?? "_blank"} target={bookmark.target ?? settings.target ?? "_blank"}
className={classNames( className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`, settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
"text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10", cardStyle,
"text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
iconOnly ? "h-[60px] w-[60px] grid" : "block w-full mb-3", iconOnly ? "h-[60px] w-[60px] grid" : "block w-full mb-3",
)} )}
> >
+10
View File
@@ -21,6 +21,16 @@ describe("components/bookmarks/item", () => {
expect(screen.getByRole("link").getAttribute("target")).toBe("_self"); expect(screen.getByRole("link").getAttribute("target")).toBe("_self");
}); });
it("applies hairline card styles when cardStyle is set", () => {
renderWithProviders(<Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A" }} iconOnly={false} />, {
settings: { cardStyle: "hairline" },
});
const className = screen.getByRole("link").className;
expect(className).toContain("inset-ring");
expect(className).not.toContain("shadow-md");
});
it("renders icon-only layout with icon when provided", () => { it("renders icon-only layout with icon when provided", () => {
renderWithProviders( renderWithProviders(
<Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A", icon: "mdi-home" }} iconOnly />, <Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A", icon: "mdi-home" }} iconOnly />,
+6 -1
View File
@@ -19,6 +19,10 @@ export default function Item({ service, groupName, useEqualHeights }) {
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const showStats = service.showStats === false ? false : settings.showStats; const showStats = service.showStats === false ? false : settings.showStats;
const statusStyle = service.statusStyle !== undefined ? service.statusStyle : settings.statusStyle; const statusStyle = service.statusStyle !== undefined ? service.statusStyle : settings.statusStyle;
const cardStyle =
settings.cardStyle === "hairline"
? "shadow-xs inset-ring inset-ring-black/5 dark:inset-ring-white/5 hover:inset-ring-black/10 dark:hover:inset-ring-white/10"
: "shadow-md shadow-theme-900/10 dark:shadow-theme-900/20";
const [statsOpen, setStatsOpen] = useState(service.showStats); const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false); const [statsClosing, setStatsClosing] = useState(false);
@@ -39,7 +43,8 @@ export default function Item({ service, groupName, useEqualHeights }) {
className={classNames( className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`, settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
useEqualHeights && "h-[calc(100%-0.5rem)]", useEqualHeights && "h-[calc(100%-0.5rem)]",
"transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card", cardStyle,
"transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
)} )}
> >
<div className="flex select-none z-0 service-title"> <div className="flex select-none z-0 service-title">
+16 -2
View File
@@ -4,11 +4,14 @@ import { useContext, useMemo } from "react";
import { BlockHighlightContext } from "./highlight-context"; import { BlockHighlightContext } from "./highlight-context";
import { SettingsContext } from "utils/contexts/settings";
import { evaluateHighlight, getHighlightClass } from "utils/highlights"; import { evaluateHighlight, getHighlightClass } from "utils/highlights";
export default function Block({ value, highlightValue, label, field }) { export default function Block({ value, highlightValue, label, field }) {
const { t } = useTranslation(); const { t } = useTranslation();
const highlightConfig = useContext(BlockHighlightContext); const highlightConfig = useContext(BlockHighlightContext);
const { settings } = useContext(SettingsContext);
const refined = settings?.blockStyle === "refined";
const highlight = useMemo(() => { const highlight = useMemo(() => {
if (!highlightConfig) return null; if (!highlightConfig) return null;
@@ -45,9 +48,20 @@ export default function Block({ value, highlightValue, label, field }) {
data-highlight-level={highlight?.level} data-highlight-level={highlight?.level}
data-highlight-source={highlight?.source} data-highlight-source={highlight?.source}
> >
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
<div <div
className={classNames("font-bold text-xs uppercase", applyToValueOnly && "text-theme-700 dark:text-theme-200")} className={classNames(
refined ? "text-[13px] font-medium tabular-nums" : "font-thin text-sm",
"service-block-value",
)}
>
{value === undefined || value === null ? "-" : value}
</div>
<div
className={classNames(
refined ? "text-[10px] font-semibold uppercase tracking-wider opacity-60" : "font-bold text-xs uppercase",
applyToValueOnly && "text-theme-700 dark:text-theme-200",
"service-block-label",
)}
> >
{t(label)} {t(label)}
</div> </div>
@@ -39,6 +39,24 @@ describe("components/services/widget/block", () => {
expect(el.className).toContain("danger-class"); expect(el.className).toContain("danger-class");
}); });
it("uses the standard block styles by default", () => {
const { container } = renderWithProviders(<Block label="some.label" value="1" />, { settings: {} });
expect(container.querySelector(".service-block-value").className).toContain("font-thin");
expect(container.querySelector(".service-block-label").className).toContain("font-bold");
});
it("applies refined block styles when blockStyle is set", () => {
const { container } = renderWithProviders(<Block label="some.label" value="1" />, {
settings: { blockStyle: "refined" },
});
const value = container.querySelector(".service-block-value");
expect(value.className).toContain("tabular-nums");
expect(value.className).not.toContain("font-thin");
expect(container.querySelector(".service-block-label").className).toContain("tracking-wider");
});
it("prefers highlightValue over the rendered value for numeric highlighting", () => { it("prefers highlightValue over the rendered value for numeric highlighting", () => {
const highlightConfig = { const highlightConfig = {
levels: { warn: "warn-class" }, levels: { warn: "warn-class" },
@@ -0,0 +1,53 @@
import classNames from "classnames";
import { useTranslation } from "next-i18next/pages";
import { TbApi } from "react-icons/tb";
import useSWR from "swr";
import Container from "../widget/container";
import Error from "../widget/error";
import Raw from "../widget/raw";
import WidgetLabel from "../widget/widget_label";
import ResolvedIcon from "components/resolvedicon";
import { formatValue, getValue } from "widgets/customapi/utils";
export default function CustomApi({ options }) {
const { t } = useTranslation();
const { index, icon, label, mappings = [], refreshInterval = 10000 } = options;
const { data, error } = useSWR(`/api/widgets/customapi?${new URLSearchParams({ index }).toString()}`, {
refreshInterval: Math.max(1000, refreshInterval),
});
if (error || (data?.error && !mappings.some((mapping) => mapping.field === "error"))) {
return <Error options={options} />;
}
return (
<Container options={options} additionalClassNames="information-widget-customapi">
<Raw>
<div className="flex flex-row items-center">
<div className="flex-none mr-2">
{icon ? (
<ResolvedIcon icon={icon} width={24} height={24} />
) : (
<TbApi className="w-6 h-6 text-theme-800 dark:text-theme-200" />
)}
</div>
<div className={classNames("flex flex-wrap items-center gap-0.5", !data && "animate-pulse")}>
{mappings.map((mapping) => (
<div key={mapping.label} className="flex flex-col items-center justify-center px-1 text-xs">
<span className="text-theme-800 dark:text-theme-200">{mapping.label}</span>
<span className="text-theme-800/70 dark:text-theme-200/50">
{data ? formatValue(t, mapping, getValue(mapping.field, data)) : "-"}
</span>
</div>
))}
</div>
</div>
{label && <WidgetLabel label={label} />}
</Raw>
</Container>
);
}
@@ -0,0 +1,117 @@
// @vitest-environment jsdom
import { screen } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "test-utils/render-with-providers";
const { useSWR } = vi.hoisted(() => ({ useSWR: vi.fn() }));
vi.mock("swr", () => ({ default: useSWR }));
vi.mock("components/resolvedicon", () => ({
default: ({ icon }) => <div data-testid="resolved-icon" data-icon={icon} />,
}));
import CustomApi from "./customapi";
const settings = { settings: { target: "_self" } };
describe("components/widgets/customapi", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("shows GitHub repo stats once loaded, with the fallback icon and a label", () => {
const options = {
index: 6,
label: "Homepage",
refreshInterval: 300000,
mappings: [
{ field: "stargazers_count", label: "Stars", format: "number" },
{ field: "open_issues_count", label: "Open", format: "number" },
{ field: "forks_count", label: "Forks", format: "number" },
],
};
useSWR.mockReturnValue({ data: undefined, error: undefined });
const { container, rerender } = renderWithProviders(<CustomApi options={options} />, settings);
expect(useSWR).toHaveBeenCalledWith("/api/widgets/customapi?index=6", { refreshInterval: 300000 });
expect(screen.getAllByText("-")).toHaveLength(3);
expect(screen.queryByTestId("resolved-icon")).toBeNull();
expect(container.querySelector("svg")).not.toBeNull();
useSWR.mockReturnValue({
data: { stargazers_count: 32809, open_issues_count: 1, forks_count: 2127, owner: { login: "gethomepage" } },
error: undefined,
});
rerender(<CustomApi options={options} />);
expect(screen.queryByText("-")).toBeNull();
expect(screen.getByText("Stars").nextSibling).toHaveTextContent("32809");
expect(screen.getByText("Open").nextSibling).toHaveTextContent("1");
expect(screen.getByText("Forks").nextSibling).toHaveTextContent("2127");
expect(screen.getByText("Homepage")).toHaveClass("information-widget-label");
});
it("shows a nested weather value with a configured icon and suffix", () => {
useSWR.mockReturnValue({
data: { current: { time: "2026-09-22T20:15", temperature_2m: 7.8, wind_speed_10m: 12.4 } },
error: undefined,
});
renderWithProviders(
<CustomApi
options={{
index: 7,
icon: "mdi-thermometer",
mappings: [{ field: "current.temperature_2m", label: "Temp", format: "float", suffix: "°C" }],
}}
/>,
settings,
);
expect(useSWR).toHaveBeenCalledWith("/api/widgets/customapi?index=7", { refreshInterval: 10000 });
expect(screen.getByTestId("resolved-icon")).toHaveAttribute("data-icon", "mdi-thermometer");
expect(screen.getByText("7.8 °C")).toBeInTheDocument();
});
it("shows a status API's error field as data when it is mapped", () => {
useSWR.mockReturnValue({ data: { error: "E_NONE", pending: 3 }, error: undefined });
renderWithProviders(
<CustomApi
options={{
index: 0,
mappings: [
{ field: "error", label: "Status", remap: [{ value: "E_NONE", to: "OK" }] },
{ field: "pending", label: "Queue", format: "number" },
],
}}
/>,
settings,
);
expect(screen.queryByText("widget.api_error")).toBeNull();
expect(screen.getByText("OK")).toBeInTheDocument();
expect(screen.getByText("3")).toBeInTheDocument();
});
it("shows the error state when the upstream API fails, clamping a too-fast refresh", () => {
useSWR.mockReturnValue({
data: { error: { message: "HTTP Error", url: "api.github.com (see logs for details)" } },
error: undefined,
});
renderWithProviders(
<CustomApi
options={{ index: 6, refreshInterval: 500, mappings: [{ field: "stargazers_count", label: "Stars" }] }}
/>,
settings,
);
expect(useSWR).toHaveBeenCalledWith("/api/widgets/customapi?index=6", { refreshInterval: 1000 });
expect(screen.getByText("widget.api_error")).toBeInTheDocument();
expect(screen.queryByText("Stars")).toBeNull();
});
});
+1
View File
@@ -16,6 +16,7 @@ const widgetMappings = {
longhorn: dynamic(() => import("components/widgets/longhorn/longhorn")), longhorn: dynamic(() => import("components/widgets/longhorn/longhorn")),
kubernetes: dynamic(() => import("components/widgets/kubernetes/kubernetes")), kubernetes: dynamic(() => import("components/widgets/kubernetes/kubernetes")),
stocks: dynamic(() => import("components/widgets/stocks/stocks")), stocks: dynamic(() => import("components/widgets/stocks/stocks")),
customapi: dynamic(() => import("components/widgets/customapi/customapi")),
}; };
export default function Widget({ widget, style }) { export default function Widget({ widget, style }) {
+2 -2
View File
@@ -25,12 +25,12 @@ export default function Resource({
}`} }`}
> >
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2"> <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2">
<div className="pl-0.5">{value}</div> <div className="pl-0.5 resource-value">{value}</div>
<div className="pr-1">{label}</div> <div className="pr-1">{label}</div>
</div> </div>
{expanded && ( {expanded && (
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2"> <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2">
<div className="pl-0.5">{expandedValue}</div> <div className="pl-0.5 resource-value">{expandedValue}</div>
<div className="pr-1">{expandedLabel}</div> <div className="pr-1">{expandedLabel}</div>
</div> </div>
)} )}
+1
View File
@@ -3,6 +3,7 @@ import { appWithTranslation } from "next-i18next/pages";
import Head from "next/head"; import Head from "next/head";
import "styles/globals.css"; import "styles/globals.css";
import "styles/manrope.css"; import "styles/manrope.css";
import "styles/plex-mono.css";
import "styles/theme.css"; import "styles/theme.css";
import { SWRConfig } from "swr"; import { SWRConfig } from "swr";
+46
View File
@@ -0,0 +1,46 @@
import { getPrivateWidgetOptions } from "utils/config/widget-helpers";
import createLogger from "utils/logger";
import { sanitizeErrorURL } from "utils/proxy/api-helpers";
import { httpProxy } from "utils/proxy/http";
const logger = createLogger("customapi");
export default async function handler(req, res) {
const { index } = req.query;
const options = await getPrivateWidgetOptions("customapi", index);
if (!options?.url) {
return res.status(400).json({ error: "Missing Custom API URL" });
}
let url;
try {
url = new URL(options.url);
} catch {
return res.status(400).json({ error: "Invalid Custom API URL" });
}
const headers = { "User-Agent": "homepage", Accept: "application/json", ...(options.headers ?? {}) };
if (options.username && options.password) {
headers.Authorization = `Basic ${Buffer.from(`${options.username}:${options.password}`).toString("base64")}`;
}
const params = { method: options.method ?? "GET", headers };
if (options.requestBody) {
params.body = typeof options.requestBody === "object" ? JSON.stringify(options.requestBody) : options.requestBody;
}
const [status, , data] = await httpProxy(url, params);
if (status >= 400) {
logger.debug("HTTP Error %d calling %s//%s%s", status, url.protocol, url.host, url.pathname);
return res.status(status).json({ error: { message: "HTTP Error", url: sanitizeErrorURL(url) } });
}
try {
return res.status(status).json(JSON.parse(Buffer.from(data).toString()));
} catch {
return res.status(500).json({ error: { message: "Invalid JSON", url: sanitizeErrorURL(url) } });
}
}
+4 -2
View File
@@ -552,7 +552,9 @@ export default function Wrapper({ initialSettings, fallback }) {
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
html.classList.remove("dark", "scheme-dark", "scheme-light"); html.classList.remove("dark", "scheme-dark", "scheme-light", "font-plex", "font-plex-data");
if (initialSettings.font === "plex") html.classList.add("font-plex");
if (initialSettings.font === "plexData") html.classList.add("font-plex-data");
html.classList.toggle("dark", theme === "dark"); html.classList.toggle("dark", theme === "dark");
html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light"); html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
@@ -571,7 +573,7 @@ export default function Wrapper({ initialSettings, fallback }) {
body.style.backgroundImage = ""; body.style.backgroundImage = "";
body.style.backgroundColor = ""; body.style.backgroundColor = "";
body.style.backgroundAttachment = ""; body.style.backgroundAttachment = "";
}, [backgroundImage, opacity, theme, color, initialSettings.color]); }, [backgroundImage, opacity, theme, color, initialSettings.color, initialSettings.font]);
return ( return (
<> <>
Binary file not shown.
+93
View File
@@ -0,0 +1,93 @@
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+56
View File
@@ -0,0 +1,56 @@
@font-face {
font-family: "IBM Plex Mono";
font-weight: 400;
font-style: normal;
src:
local("IBM Plex Mono"),
url("./font/IBMPlexMono-Regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
font-weight: 500;
font-style: normal;
src:
local("IBM Plex Mono Medium"),
url("./font/IBMPlexMono-Medium.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
font-weight: 600;
font-style: normal;
src:
local("IBM Plex Mono SemiBold"),
url("./font/IBMPlexMono-SemiBold.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
font-weight: 700;
font-style: normal;
src:
local("IBM Plex Mono Bold"),
url("./font/IBMPlexMono-Bold.woff2") format("woff2");
font-display: swap;
}
/* font-size-adjust keeps mono from reading larger than Manrope at the same size */
.font-plex,
.font-plex body {
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size-adjust: 0.5;
letter-spacing: -0.01em;
}
.font-plex-data .service-block-value,
.font-plex-data .service-tags,
.font-plex-data .tabular-nums,
.font-plex-data .information-widget-resource .resource-value,
.font-plex-data .service-container {
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size-adjust: 0.5;
}
+3 -1
View File
@@ -9,5 +9,7 @@ export function renderWithProviders(ui, { settings = {} } = {}) {
setSettings: () => {}, setSettings: () => {},
}; };
return render(<SettingsContext.Provider value={value}>{ui}</SettingsContext.Provider>); const wrapper = ({ children }) => <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
return render(ui, { wrapper });
} }
+5 -2
View File
@@ -31,7 +31,7 @@ export async function cleanWidgetGroups(widgets) {
const optionKeys = Object.keys(sanitizedOptions); const optionKeys = Object.keys(sanitizedOptions);
// delete private options from the sanitized options // delete private options from the sanitized options
["username", "password", "key", "apiKey"].forEach((pO) => { ["username", "password", "key", "apiKey", "headers", "requestBody", "method"].forEach((pO) => {
if (optionKeys.includes(pO)) { if (optionKeys.includes(pO)) {
delete sanitizedOptions[pO]; delete sanitizedOptions[pO];
} }
@@ -57,7 +57,7 @@ export async function getPrivateWidgetOptions(type, widgetIndex) {
const privateOptions = const privateOptions =
widgets.map((widget) => { widgets.map((widget) => {
const { index, url, username, password, key, apiKey } = widget.options; const { index, url, username, password, key, apiKey, headers, requestBody, method } = widget.options;
return { return {
type: widget.type, type: widget.type,
@@ -68,6 +68,9 @@ export async function getPrivateWidgetOptions(type, widgetIndex) {
password, password,
key, key,
apiKey, apiKey,
headers,
requestBody,
method,
}, },
}; };
}) || {}; }) || {};
+11
View File
@@ -60,6 +60,17 @@ describe("utils/config/widget-helpers", () => {
expect(cleaned[2].options.apiKey).toBeUndefined(); expect(cleaned[2].options.apiKey).toBeUndefined();
}); });
it("cleanWidgetGroups removes customapi request options", async () => {
const cleaned = await cleanWidgetGroups([
{
type: "customapi",
options: { index: 0, url: "http://x", headers: { a: "b" }, requestBody: "body", method: "POST", icon: "mdi-x" },
},
]);
expect(cleaned[0].options).toEqual({ index: 0, icon: "mdi-x" });
});
it("getPrivateWidgetOptions returns private options for a specific widget", async () => { it("getPrivateWidgetOptions returns private options for a specific widget", async () => {
fs.readFile.mockResolvedValueOnce("ignored"); fs.readFile.mockResolvedValueOnce("ignored");
yaml.load.mockReturnValueOnce([{ search: { url: "http://x", username: "u", password: "p", key: "k" } }]); yaml.load.mockReturnValueOnce([{ search: { url: "http://x", username: "u", password: "p", key: "k" } }]);
+46
View File
@@ -0,0 +1,46 @@
import { createRequire } from "node:module";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
const require = createRequire(import.meta.url);
const i18nextConfig = require("../../next-i18next.config.js");
function getRelativeDateFormatter() {
let relativeDateFormatter;
i18nextConfig.use[0].init({
services: {
formatter: {
add(name, formatter) {
if (name === "relativeDate") relativeDateFormatter = formatter;
},
},
},
});
return relativeDateFormatter;
}
describe("relativeDate formatter", () => {
const formatRelativeDate = getRelativeDateFormatter();
const options = { numeric: "auto" };
beforeEach(() => {
vi.useFakeTimers();
vi.setSystemTime(new Date(2026, 8, 23, 16, 0));
});
afterEach(() => {
vi.useRealTimers();
});
it.each([
["hours away on the same day", new Date(2026, 8, 23, 20, 0), "in 4 hours"],
["next calendar day", new Date(2026, 8, 24, 20, 0), "tomorrow"],
["two calendar days away but under 48h", new Date(2026, 8, 25, 10, 40), "in 2 days"],
["previous calendar day", new Date(2026, 8, 22, 10, 0), "yesterday"],
["two calendar days ago but under 48h", new Date(2026, 8, 21, 20, 0), "2 days ago"],
])("formats %s", (_description, value, expected) => {
expect(formatRelativeDate(value.toISOString(), "en", options)).toBe(expected);
});
});
+2 -150
View File
@@ -1,161 +1,13 @@
import classNames from "classnames"; import classNames from "classnames";
import { useTranslation } from "next-i18next/pages"; import { useTranslation } from "next-i18next/pages";
import { formatValue, getColor, getValue } from "./utils";
import Block from "components/services/widget/block"; import Block from "components/services/widget/block";
import Container from "components/services/widget/container"; import Container from "components/services/widget/container";
import * as shvl from "utils/config/shvl"; import * as shvl from "utils/config/shvl";
import useWidgetAPI from "utils/proxy/use-widget-api"; import useWidgetAPI from "utils/proxy/use-widget-api";
function getValue(field, data) {
let value = data;
let lastField = field;
let key = "";
// Support APIs that return arrays or scalars directly.
if (typeof field === "undefined") {
return value;
}
// shvl is easier, everything else is kept for backwards compatibility.
if (typeof field === "string") {
return shvl.get(data, field, null) ?? data[field] ?? null;
}
while (typeof lastField === "object") {
key = Object.keys(lastField)[0] ?? null;
if (key === null) {
break;
}
value = value[key];
lastField = lastField[key];
}
if (typeof value === "undefined") {
return null;
}
return value[lastField] ?? null;
}
function getSize(data) {
if (Array.isArray(data) || typeof data === "string") {
return data.length;
} else if (typeof data === "object" && data !== null) {
return Object.keys(data).length;
}
return NaN;
}
function formatValue(t, mapping, rawValue) {
let value = rawValue;
// Remap the value.
const remaps = mapping?.remap ?? [];
for (let i = 0; i < remaps.length; i += 1) {
const remap = remaps[i];
if (remap?.any || remap?.value === value) {
value = remap.to;
break;
}
}
// Scale the value. Accepts either a number to multiply by or a string
// like "12/345".
const scale = mapping?.scale;
if (typeof scale === "number") {
value *= scale;
} else if (typeof scale === "string") {
const parts = scale.split("/");
const numerator = parts[0] ? parseFloat(parts[0]) : 1;
const denominator = parts[1] ? parseFloat(parts[1]) : 1;
value = (value * numerator) / denominator;
}
// Format the value using a known type.
switch (mapping?.format) {
case "number":
value = t("common.number", { value: parseInt(value, 10) });
break;
case "float":
value = t("common.number", { value });
break;
case "percent":
value = t("common.percent", { value });
break;
case "duration":
value = t("common.duration", { value });
break;
case "bytes":
value = t("common.bytes", { value });
break;
case "bitrate":
value = t("common.bitrate", { value });
break;
case "date":
value = t("common.date", {
value,
lng: mapping?.locale,
dateStyle: mapping?.dateStyle ?? "long",
timeStyle: mapping?.timeStyle,
});
break;
case "relativeDate":
value = t("common.relativeDate", {
value,
lng: mapping?.locale,
style: mapping?.style,
numeric: mapping?.numeric,
});
break;
case "size":
value = t("common.number", { value: getSize(value) });
break;
case "text":
default:
// nothing
}
// Apply fixed prefix.
const prefix = mapping?.prefix;
if (prefix) {
value = `${prefix} ${value}`;
}
// Apply fixed suffix.
const suffix = mapping?.suffix;
if (suffix) {
value = `${value} ${suffix}`;
}
return value;
}
function getColor(mapping, customData) {
const value = getValue(mapping.additionalField.field, customData);
const { color } = mapping.additionalField;
switch (color) {
case "adaptive":
try {
const number = parseFloat(value);
return number > 0 ? "text-emerald-300" : "text-rose-300";
} catch (e) {
return "";
}
case "black":
return `text-black`;
case "white":
return `text-white`;
case "theme":
return `text-theme-500`;
default:
return "";
}
}
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
+151
View File
@@ -0,0 +1,151 @@
import * as shvl from "utils/config/shvl";
export function getValue(field, data) {
let value = data;
let lastField = field;
let key = "";
// Support APIs that return arrays or scalars directly.
if (typeof field === "undefined") {
return value;
}
// shvl is easier, everything else is kept for backwards compatibility.
if (typeof field === "string") {
return shvl.get(data, field, null) ?? data[field] ?? null;
}
while (typeof lastField === "object") {
key = Object.keys(lastField)[0] ?? null;
if (key === null) {
break;
}
value = value[key];
lastField = lastField[key];
}
if (typeof value === "undefined") {
return null;
}
return value[lastField] ?? null;
}
export function getSize(data) {
if (Array.isArray(data) || typeof data === "string") {
return data.length;
} else if (typeof data === "object" && data !== null) {
return Object.keys(data).length;
}
return NaN;
}
export function formatValue(t, mapping, rawValue) {
let value = rawValue;
// Remap the value.
const remaps = mapping?.remap ?? [];
for (let i = 0; i < remaps.length; i += 1) {
const remap = remaps[i];
if (remap?.any || remap?.value === value) {
value = remap.to;
break;
}
}
// Scale the value. Accepts either a number to multiply by or a string
// like "12/345".
const scale = mapping?.scale;
if (typeof scale === "number") {
value *= scale;
} else if (typeof scale === "string") {
const parts = scale.split("/");
const numerator = parts[0] ? parseFloat(parts[0]) : 1;
const denominator = parts[1] ? parseFloat(parts[1]) : 1;
value = (value * numerator) / denominator;
}
// Format the value using a known type.
switch (mapping?.format) {
case "number":
value = t("common.number", { value: parseInt(value, 10) });
break;
case "float":
value = t("common.number", { value });
break;
case "percent":
value = t("common.percent", { value });
break;
case "duration":
value = t("common.duration", { value });
break;
case "bytes":
value = t("common.bytes", { value });
break;
case "bitrate":
value = t("common.bitrate", { value });
break;
case "date":
value = t("common.date", {
value,
lng: mapping?.locale,
dateStyle: mapping?.dateStyle ?? "long",
timeStyle: mapping?.timeStyle,
});
break;
case "relativeDate":
value = t("common.relativeDate", {
value,
lng: mapping?.locale,
style: mapping?.style,
numeric: mapping?.numeric,
});
break;
case "size":
value = t("common.number", { value: getSize(value) });
break;
case "text":
default:
// nothing
}
// Apply fixed prefix.
const prefix = mapping?.prefix;
if (prefix) {
value = `${prefix} ${value}`;
}
// Apply fixed suffix.
const suffix = mapping?.suffix;
if (suffix) {
value = `${value} ${suffix}`;
}
return value;
}
export function getColor(mapping, customData) {
const value = getValue(mapping.additionalField.field, customData);
const { color } = mapping.additionalField;
switch (color) {
case "adaptive":
try {
const number = parseFloat(value);
return number > 0 ? "text-emerald-300" : "text-rose-300";
} catch (e) {
return "";
}
case "black":
return `text-black`;
case "white":
return `text-white`;
case "theme":
return `text-theme-500`;
default:
return "";
}
}
+82
View File
@@ -0,0 +1,82 @@
import { describe, expect, it } from "vitest";
import { formatValue, getColor, getSize, getValue } from "./utils";
const t = (key, { value }) => `${key.replace("common.", "")}:${value}`;
const data = {
status: "online",
stats: { cpu: 12.5, change: -1.2, users: ["a", "b"] },
"dotted.key": 7,
};
describe("widgets/customapi/utils", () => {
it.each([
["the root when no field is set", undefined, data],
["a dotted path", "stats.cpu", 12.5],
["a literal key containing a dot", "dotted.key", 7],
["null for a missing path", "stats.missing", null],
["a legacy object path", { stats: "cpu" }, 12.5],
["null for a legacy path through a missing key", { missing: "cpu" }, null],
["null for an empty legacy path", {}, null],
])("getValue returns %s", (_, field, expected) => {
expect(getValue(field, data)).toEqual(expected);
});
it.each([
[["a", "b", "c"], 3],
["abcd", 4],
[{ a: 1, b: 2 }, 2],
[null, NaN],
[5, NaN],
])("getSize(%j) is %s", (input, expected) => {
expect(getSize(input)).toEqual(expected);
});
it.each([
[{}, "raw", "raw"],
[{ format: "number" }, "42.9", "number:42"],
[{ format: "float" }, 4.2, "number:4.2"],
[{ format: "percent", scale: 100 }, 0.25, "percent:25"],
[{ format: "duration" }, 90, "duration:90"],
[{ format: "bytes", scale: "1024/1" }, 2, "bytes:2048"],
[{ format: "bitrate", scale: "/8" }, 800, "bitrate:100"],
[{ format: "date" }, "2026-09-22", "date:2026-09-22"],
[{ format: "relativeDate" }, "2026-09-22", "relativeDate:2026-09-22"],
[{ format: "size" }, ["a", "b"], "number:2"],
[
{
remap: [
{ value: 0, to: "Off" },
{ value: 1, to: "On" },
],
},
1,
"On",
],
[
{
remap: [
{ value: "ok", to: "Healthy" },
{ any: true, to: "Unknown" },
],
},
"degraded",
"Unknown",
],
[{ format: "number", prefix: "$", suffix: "USD" }, 10, "$ number:10 USD"],
])("formatValue with %j formats %j as %j", (mapping, raw, expected) => {
expect(formatValue(t, mapping, raw)).toBe(expected);
});
it.each([
["adaptive", "stats.cpu", "text-emerald-300"],
["adaptive", "stats.change", "text-rose-300"],
["black", "stats.cpu", "text-black"],
["white", "stats.cpu", "text-white"],
["theme", "stats.cpu", "text-theme-500"],
[undefined, "stats.cpu", ""],
])("getColor %s for %s is %j", (color, field, expected) => {
expect(getColor({ additionalField: { field, color } }, data)).toBe(expected);
});
});
+7 -4
View File
@@ -11,10 +11,13 @@ const widget = {
}, },
issues: { issues: {
endpoint: "repos/issues/search", endpoint: "repos/issues/search",
map: (data) => ({ map: (data) => {
pulls: asJson(data).filter((issue) => issue.pull_request), const items = asJson(data);
issues: asJson(data).filter((issue) => !issue.pull_request), return {
}), pulls: items.filter((issue) => issue.pull_request),
issues: items.filter((issue) => !issue.pull_request),
};
},
}, },
repositories: { repositories: {
endpoint: "repos/search", endpoint: "repos/search",
+10 -1
View File
@@ -1,4 +1,4 @@
import { describe, it } from "vitest"; import { describe, expect, it } from "vitest";
import { expectWidgetConfigShape } from "test-utils/widget-config"; import { expectWidgetConfigShape } from "test-utils/widget-config";
@@ -8,4 +8,13 @@ describe("gitea widget config", () => {
it("exports a valid widget config", () => { it("exports a valid widget config", () => {
expectWidgetConfigShape(widget); expectWidgetConfigShape(widget);
}); });
it("splits issues and pull requests", () => {
const result = widget.mappings.issues.map(
Buffer.from(JSON.stringify([{ id: 1, pull_request: {} }, { id: 2 }, { id: 3 }])),
);
expect(result.pulls.map((i) => i.id)).toEqual([1]);
expect(result.issues.map((i) => i.id)).toEqual([2, 3]);
});
}); });
+7 -4
View File
@@ -8,10 +8,13 @@ const widget = {
mappings: { mappings: {
counters: { counters: {
endpoint: "feeds/counters", endpoint: "feeds/counters",
map: (data) => ({ map: (data) => {
read: Object.values(asJson(data).reads).reduce((acc, i) => acc + i, 0), const { reads, unreads } = asJson(data);
unread: Object.values(asJson(data).unreads).reduce((acc, i) => acc + i, 0), return {
}), read: Object.values(reads).reduce((acc, i) => acc + i, 0),
unread: Object.values(unreads).reduce((acc, i) => acc + i, 0),
};
},
}, },
}, },
}; };
+9 -1
View File
@@ -1,4 +1,4 @@
import { describe, it } from "vitest"; import { describe, expect, it } from "vitest";
import { expectWidgetConfigShape } from "test-utils/widget-config"; import { expectWidgetConfigShape } from "test-utils/widget-config";
@@ -8,4 +8,12 @@ describe("miniflux widget config", () => {
it("exports a valid widget config", () => { it("exports a valid widget config", () => {
expectWidgetConfigShape(widget); expectWidgetConfigShape(widget);
}); });
it("sums read and unread counters", () => {
const result = widget.mappings.counters.map(
Buffer.from(JSON.stringify({ reads: { 1: 2, 2: 3 }, unreads: { 1: 4, 2: 1 } })),
);
expect(result).toEqual({ read: 5, unread: 5 });
});
}); });
+2 -1
View File
@@ -10,7 +10,8 @@ const widget = {
}, },
"nodes/localhost/tasks": { "nodes/localhost/tasks": {
endpoint: "nodes/localhost/tasks", endpoint: "nodes/localhost/tasks",
params: ["errors", "limit", "since"], params: ["errors", "limit"],
optionalParams: ["since"],
}, },
"nodes/localhost/status": { "nodes/localhost/status": {
endpoint: "nodes/localhost/status", endpoint: "nodes/localhost/status",
@@ -9,7 +9,8 @@ describe("proxmoxbackupserver widget config", () => {
expectWidgetConfigShape(widget); expectWidgetConfigShape(widget);
}); });
it("requires failed task query params for the tasks endpoint", () => { it("requires failed task query params for the tasks endpoint, with since optional", () => {
expect(widget.mappings["nodes/localhost/tasks"].params).toEqual(["errors", "limit", "since"]); expect(widget.mappings["nodes/localhost/tasks"].params).toEqual(["errors", "limit"]);
expect(widget.mappings["nodes/localhost/tasks"].optionalParams).toEqual(["since"]);
}); });
}); });
+10 -7
View File
@@ -1,4 +1,4 @@
import { asJson, jsonArrayFilter } from "utils/proxy/api-helpers"; import { asJson } from "utils/proxy/api-helpers";
import genericProxyHandler from "utils/proxy/handlers/generic"; import genericProxyHandler from "utils/proxy/handlers/generic";
const widget = { const widget = {
@@ -8,15 +8,18 @@ const widget = {
mappings: { mappings: {
movie: { movie: {
endpoint: "movie", endpoint: "movie",
map: (data) => ({ map: (data) => {
wanted: jsonArrayFilter(data, (item) => item.monitored && !item.hasFile && item.isAvailable).length, const movieData = asJson(data) ?? [];
have: jsonArrayFilter(data, (item) => item.hasFile).length, return {
missing: jsonArrayFilter(data, (item) => item.monitored && !item.hasFile).length, wanted: movieData.filter((item) => item.monitored && !item.hasFile && item.isAvailable).length,
all: asJson(data).map((entry) => ({ have: movieData.filter((item) => item.hasFile).length,
missing: movieData.filter((item) => item.monitored && !item.hasFile).length,
all: movieData.map((entry) => ({
title: entry.title, title: entry.title,
id: entry.id, id: entry.id,
})), })),
}), };
},
}, },
"queue/status": { "queue/status": {
endpoint: "queue/status", endpoint: "queue/status",
+23
View File
@@ -33,4 +33,27 @@ describe("radarr widget config", () => {
expect(queue.map((entry) => entry.movieId)).toEqual([2, 1]); expect(queue.map((entry) => entry.movieId)).toEqual([2, 1]);
}); });
it("maps movie counts and titles", () => {
const movies = widget.mappings.movie.map(
Buffer.from(
JSON.stringify([
{ id: 1, title: "A", monitored: true, hasFile: false, isAvailable: true },
{ id: 2, title: "B", monitored: true, hasFile: true },
{ id: 3, title: "C", monitored: true, hasFile: false, isAvailable: false },
]),
),
);
expect(movies).toEqual({
wanted: 1,
have: 1,
missing: 2,
all: [
{ title: "A", id: 1 },
{ title: "B", id: 2 },
{ title: "C", id: 3 },
],
});
});
}); });
+7 -4
View File
@@ -8,10 +8,13 @@ const widget = {
mappings: { mappings: {
workers: { workers: {
endpoint: "workers/status", endpoint: "workers/status",
map: (data) => ({ map: (data) => {
total_workers: asJson(data).workers_status.length, const workers = asJson(data).workers_status;
active_workers: asJson(data).workers_status.filter((worker) => !worker.idle).length, return {
}), total_workers: workers.length,
active_workers: workers.filter((worker) => !worker.idle).length,
};
},
}, },
pending: { pending: {
method: "POST", method: "POST",
+9 -1
View File
@@ -1,4 +1,4 @@
import { describe, it } from "vitest"; import { describe, expect, it } from "vitest";
import { expectWidgetConfigShape } from "test-utils/widget-config"; import { expectWidgetConfigShape } from "test-utils/widget-config";
@@ -8,4 +8,12 @@ describe("unmanic widget config", () => {
it("exports a valid widget config", () => { it("exports a valid widget config", () => {
expectWidgetConfigShape(widget); expectWidgetConfigShape(widget);
}); });
it("counts total and active workers", () => {
const result = widget.mappings.workers.map(
Buffer.from(JSON.stringify({ workers_status: [{ idle: true }, { idle: false }, { idle: false }] })),
);
expect(result).toEqual({ total_workers: 3, active_workers: 2 });
});
}); });