Add configurable title and subtitle v0.6.1

.env.example

@@ -7,6 +7,10 @@ APP_PORT=8080
 
 # Optional settings
 APP_NAME=Photo Date Editor
+# Optional visible page heading. Falls back to APP_NAME when omitted.
+APP_TITLE=Mork Photo Date Editor
+# Optional text shown directly below the page heading.
+APP_SUBTITLE=Family photo metadata editor
 MAX_UPLOAD_MB=150
 LOG_LEVEL=INFO
 
@@ -23,4 +27,4 @@ DEFAULT_MAP_LON=11.0
 DEFAULT_MAP_ZOOM=5
 GEOCODER_URL=https://nominatim.openstreetmap.org/search
 # Optional custom identification sent to the geocoder. The default uses APP_NAME, version and APP_URL.
-# GEOCODER_USER_AGENT=MorkPhotoDateEditor/0.5.0 (+https://edit.mork.fyi)
+# GEOCODER_USER_AGENT=MorkPhotoDateEditor/0.6.1 (+https://edit.mork.fyi)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.6.1
+
+- Add optional `APP_TITLE` and `APP_SUBTITLE` environment variables for the visible page heading and subtitle.
+- Keep `APP_NAME` backward-compatible as the title fallback and application identity.
+- Update the browser tab title from the configured page title.
+- Bump the application and service-worker cache version to 0.6.1.
+
 ## 0.6.0
 
 - Add HEIC, HEIF, and HIF folder scanning and in-place metadata processing.

README.md

@@ -1,6 +1,6 @@
 # Photo Date Editor
 
-Version 0.6.0
+Version 0.6.1
 
 A self-hosted browser UI for manually dating scanned photographs. The browser receives temporary read/write access to a local computer or Chromebook folder, sends one image at a time to the Docker backend for ExifTool processing, and overwrites the same local file after processing.
 
@@ -52,6 +52,8 @@ Example `.env`:
 APP_URL=https://photos.example.internal
 APP_PORT=8080
 APP_NAME=Photo Date Editor
+APP_TITLE=Mork Photo Date Editor
+APP_SUBTITLE=Family photo metadata editor
 MAX_UPLOAD_MB=150
 LOG_LEVEL=INFO
 
@@ -78,7 +80,7 @@ Replace the project files with this version and rebuild:
 docker compose up -d --build
 ```
 
-The existing `.env` can be kept. The preview variables are optional. Browser progress from earlier releases remains compatible. A normal refresh should load the new service-worker cache; use a hard refresh if an old UI remains visible.
+The existing `.env` can be kept. `APP_TITLE` and `APP_SUBTITLE` are optional. When `APP_TITLE` is omitted, the visible page title continues to use `APP_NAME`; the subtitle uses the built-in format description when omitted. Browser progress from earlier releases remains compatible. A normal refresh should load the new service-worker cache; use a hard refresh if an old UI remains visible.
 
 ## Caddy example
 

app/main.py

@@ -29,8 +29,13 @@ from pillow_heif import register_heif_opener
 register_heif_opener()
 
 APP_NAME = os.getenv("APP_NAME", "Photo Date Editor")
+APP_TITLE = os.getenv("APP_TITLE") or APP_NAME
+APP_SUBTITLE = (
+    os.getenv("APP_SUBTITLE")
+    or "Local folder · in-place JPG, PNG, TIFF and HEIF metadata"
+)
 APP_URL = os.getenv("APP_URL", "http://localhost:8080")
-APP_VERSION = "0.6.0"
+APP_VERSION = "0.6.1"
 MAX_UPLOAD_MB = int(os.getenv("MAX_UPLOAD_MB", "150"))
 MAX_UPLOAD_BYTES = MAX_UPLOAD_MB * 1024 * 1024
 PREVIEW_MAX_EDGE = int(os.getenv("PREVIEW_MAX_EDGE", "2400"))
@@ -96,7 +101,7 @@ class FavoriteLocationInput(BaseModel):
     longitude: float = Field(ge=-180, le=180)
 
 
-app = FastAPI(title=APP_NAME, docs_url=None, redoc_url=None)
+app = FastAPI(title=APP_TITLE, docs_url=None, redoc_url=None)
 
 
 @app.get("/api/health")
@@ -108,6 +113,8 @@ def health() -> dict[str, str]:
 def config() -> dict[str, str | int | float]:
     return {
         "appName": APP_NAME,
+        "appTitle": APP_TITLE,
+        "appSubtitle": APP_SUBTITLE,
         "appUrl": APP_URL,
         "version": APP_VERSION,
         "maxUploadMb": MAX_UPLOAD_MB,

app/static/app.js

@@ -20,6 +20,7 @@ const $$ = (selector) => [...document.querySelectorAll(selector)];
 
 const elements = {
   appName: $('#app-name'),
+  appSubtitle: $('#app-subtitle'),
   openButtons: [$('#open-folder'), $('#open-folder-top'), $('#open-folder-center')],
   rescan: $('#rescan-folder'),
   folderName: $('#folder-name'),
@@ -1029,8 +1030,10 @@ async function initialise() {
     const response = await fetch('/api/config', { cache: 'no-store' });
     if (response.ok) {
       const config = await response.json();
-      elements.appName.textContent = config.appName;
-      document.title = config.appName;
+      const pageTitle = config.appTitle || config.appName;
+      elements.appName.textContent = pageTitle;
+      elements.appSubtitle.textContent = config.appSubtitle;
+      document.title = pageTitle;
       state.mapConfig = config;
     }
   } catch {}

app/static/index.html

@@ -16,7 +16,7 @@
         <div class="brand-mark" aria-hidden="true">◫</div>
         <div>
           <h1 id="app-name">Photo Date Editor</h1>
-          <p>Local folder · in-place JPG, PNG, TIFF and HEIF metadata</p>
+          <p id="app-subtitle">Local folder · in-place JPG, PNG, TIFF and HEIF metadata</p>
         </div>
       </div>
       <div class="top-actions">

app/static/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'photo-date-editor-v6-0';
+const CACHE_NAME = 'photo-date-editor-v6-1';
 const SHELL = ['/', '/styles.css', '/app.js', '/manifest.webmanifest', '/vendor/leaflet/leaflet.css', '/vendor/leaflet/leaflet.js'];
 
 self.addEventListener('install', (event) => {

docker-compose.yml

@@ -10,6 +10,8 @@ services:
     environment:
       APP_URL: "${APP_URL:-http://localhost:8080}"
       APP_NAME: "${APP_NAME:-Photo Date Editor}"
+      APP_TITLE: "${APP_TITLE:-}"
+      APP_SUBTITLE: "${APP_SUBTITLE:-}"
       MAX_UPLOAD_MB: "${MAX_UPLOAD_MB:-150}"
       LOG_LEVEL: "${LOG_LEVEL:-INFO}"
       DATA_DIR: "/data"