diff --git a/css/addons/whisparr/whisparr-4k-logo/whisparr-4k-logo.css b/css/addons/whisparr/whisparr-4k-logo/whisparr-4k-logo.css new file mode 100644 index 0000000000..fe1105718a --- /dev/null +++ b/css/addons/whisparr/whisparr-4k-logo/whisparr-4k-logo.css @@ -0,0 +1,22 @@ +/* Whisparr v2 and the compact Whisparr v3 header. */ +img[class*="PageHeader-logo-"], +img[class*="PageSidebar-logo-"], +.panel-header > img.logo { + content: url("whisparr-4k.svg"); + width: 32px; + height: 32px; +} + +/* Whisparr v3 desktop header. */ +img[class*="PageHeader-logoFull-"] { + content: url("whisparr-4k.svg"); + width: 40px; + height: 40px; +} + +img[class*="LoadingPage-logoFull-"] { + content: url("whisparr-4k.svg"); + width: 48px; + height: 48px; + opacity: 1; +} diff --git a/css/addons/whisparr/whisparr-4k-logo/whisparr-4k.svg b/css/addons/whisparr/whisparr-4k-logo/whisparr-4k.svg new file mode 100644 index 0000000000..adb52148b1 --- /dev/null +++ b/css/addons/whisparr/whisparr-4k-logo/whisparr-4k.svg @@ -0,0 +1,11 @@ + + Whisparr 4K + + + + + + + + + diff --git a/dev/whisparr/.gitignore b/dev/whisparr/.gitignore new file mode 100644 index 0000000000..c2658d7d1b --- /dev/null +++ b/dev/whisparr/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/dev/whisparr/README.md b/dev/whisparr/README.md new file mode 100644 index 0000000000..8b25b31b0a --- /dev/null +++ b/dev/whisparr/README.md @@ -0,0 +1,69 @@ +# Whisparr development + +Run these commands from the theme.park checkout root. Docker Compose hosts +local CSS at http://127.0.0.1:18875 and starts disposable Hotio instances at +http://127.0.0.1:16969 for v2 and http://127.0.0.1:16970 for v3. +The pinned images contain Whisparr 2.2.0.231 and 3.5.0.1585. + +```sh +TP_ADDON=whisparr-4k-logo docker compose -f dev/whisparr/compose.yaml up -d +``` + +On first launch, choose Forms authentication and create a local test account. +The logo checks work with an empty library. Do not add real media or indexers. +Configuration lives in separate Docker volumes. + +The setup mounts the repository's Whisparr startup script into +`/etc/cont-init.d/98-themepark`, following the +[Hotio setup](https://docs.theme-park.dev/setup/#hotio-containers-s6-overlay-v3-images). +`TP_HOTIO=true` selects `/app/bin/UI`. The script injects the app base CSS, +theme option, and addon before `` in both the app and login pages. +It does not use `DOCKER_MODS`. + +To change themes, recreate both application containers. Restarting alone leaves +the old stylesheet links in their HTML because the script avoids duplicate injection. + +```sh +TP_THEME=aquamarine TP_ADDON=whisparr-4k-logo \ + docker compose -f dev/whisparr/compose.yaml up -d --force-recreate v2 v3 +``` + +Repeat with `TP_THEME=hotline` and `TP_THEME=nord`. Omit `TP_ADDON` when recreating +to capture the original logo. CSS and SVG edits appear on browser reload. +The CSS host sends `Cache-Control: no-store`. + +## Logo checks + +Check the desktop header, mobile header, open mobile menu, loading screen, and +Forms login page. Resize to 1280, 768, 752, 390, and 320 pixels wide. Check hover, +keyboard focus, home navigation, and opening and closing the menu. + +Whisparr v2 uses `PageHeader-logo-` at every width. V3 uses +`PageHeader-logoFull-` on desktop, `PageHeader-logo-` on mobile, and a separate +`PageSidebar-logo-` in the open mobile menu. V2 does not have that sidebar image. +Both versions use `LoadingPage-logoFull-` and `.panel-header > img.logo`. + +To inspect loading, delay the app's API requests in browser automation while +reloading an authenticated session. Release the requests after capturing the +real loading screen. Check asset requests for the addon SVG, base CSS, imported +Radarr and Servarr styles, defaults, and selected theme option. + +Save screenshots and run details under ignored `dev/artifacts/whisparr/550/`. +Issue #550 reported Hotio versions 2.0.0.355 and 3.0.0.530. The pinned test images +are newer, so results do not establish compatibility with those exact builds. + +## Artwork + +`whisparr-4k.svg` uses the purple Whisparr SVG shipped in the pinned v3 image. +Its gold 4K image is the unchanged `Layer 3` inside the `sonarr-4k` group in +`css/addons/sonarr/sonarr-logo.psd`. The SVG embeds that layer so it needs no +external image request. Its square layout matches the Sonarr and Radarr addons. +Keep the upstream W paths and the existing gold lettering when changing placement. + +## Stop and reset + +```sh +docker compose -f dev/whisparr/compose.yaml down +``` + +To discard only these test configurations, add `--volumes` to that command. diff --git a/dev/whisparr/compose.yaml b/dev/whisparr/compose.yaml new file mode 100644 index 0000000000..433eaaa00b --- /dev/null +++ b/dev/whisparr/compose.yaml @@ -0,0 +1,46 @@ +name: themepark-whisparr-dev + +x-whisparr: &whisparr + environment: + PUID: "1000" + PGID: "1000" + TZ: Etc/UTC + TP_HOTIO: "true" + TP_DOMAIN: 127.0.0.1:18875 + TP_SCHEME: http + TP_THEME: ${TP_THEME:-nord} + TP_ADDON: ${TP_ADDON:-} + depends_on: + - css + +services: + css: + image: python:3.12-alpine + working_dir: /site + command: [python, /serve.py] + ports: + - "127.0.0.1:18875:8000" + volumes: + - ../../css:/site/css:ro + - ../../resources:/site/resources:ro + - ../serve.py:/serve.py:ro + v2: + <<: *whisparr + image: ghcr.io/hotio/whisparr:latest@sha256:01d52209b9e24fd8145b2e794f13d75e20cc60254bb57e2a98e0d2dc4a16544d + ports: + - "127.0.0.1:16969:6969" + volumes: + - v2-config:/config + - ../../docker-mods/whisparr/root/etc/cont-init.d/98-themepark:/etc/cont-init.d/98-themepark:ro + v3: + <<: *whisparr + image: ghcr.io/hotio/whisparr:v3@sha256:b18ba2049123f1480a557b23954f1055b86f2625436f0bc51ccaa012030d9ba3 + ports: + - "127.0.0.1:16970:6969" + volumes: + - v3-config:/config + - ../../docker-mods/whisparr/root/etc/cont-init.d/98-themepark:/etc/cont-init.d/98-themepark:ro + +volumes: + v2-config: + v3-config: