Art post-audit polish (Codex): image HEAD, texture immutable cache, lightbox a11y, spacing

- /api/art/image/{id} now answers HEAD as well as GET (was 404 on HEAD) — mirrors the
  /a/{id} fix. Added tests/test_art_api.py (GET+HEAD+size=full fallback + today payload).
- /textures/* served immutable (long cache) instead of no-cache; excluded from the
  revalidate matcher. Live Caddyfile + repo snapshot both updated.
- Lightbox: Escape closes it, and focus moves to it on open (keyboard-friendly).
- Trimmed the gallery's top padding so "Daily Art" sits closer to the bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-21 18:17:30 -04:00
parent 39c666b4ee
commit dd8706e2fc
4 changed files with 64 additions and 3 deletions
+12 -2
View File
@@ -18,6 +18,13 @@
let zoom = $state(false);
let frame = $state('walnut');
let thickness = $state(1); // frame-scale multiplier, 0.71.9 (mat caps at 1.5)
let lightboxEl = $state(null);
function onKey(e) {
if (e.key === 'Escape' && zoom) zoom = false;
}
// Move focus to the lightbox when it opens, so Escape/Enter work and focus is trapped sanely.
$effect(() => { if (zoom && lightboxEl) lightboxEl.focus(); });
let who = $derived(
art ? [art.artist || 'Unknown artist', art.date_text].filter(Boolean) : []
@@ -50,6 +57,8 @@
}
</script>
<svelte:window onkeydown={onKey} />
<svelte:head>
<title>Daily Art · upbeatBytes</title>
<meta name="description" content="A masterwork a day from the world's open museum collections — one piece, beautifully framed, on upbeatBytes." />
@@ -145,7 +154,7 @@
</div>
{#if zoom && art}
<button class="lightbox" onclick={() => (zoom = false)} aria-label="Close artwork">
<button class="lightbox" bind:this={lightboxEl} onclick={() => (zoom = false)} aria-label="Close artwork">
<span class="frame frame--{frame} lb-frame" style="--frame-scale:{thickness}">
{#if isWood}{@render woodRails()}{/if}
<span class="mat"><img src={art.image_url_large || art.image_url} alt={art.title} /></span>
@@ -191,7 +200,8 @@
.gallery {
flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
padding: clamp(20px, 5vw, 56px); box-sizing: border-box;
padding: clamp(6px, 1.5vw, 16px) clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px);
box-sizing: border-box;
display: flex; flex-direction: column; align-items: center;
}
.intro { text-align: center; margin-bottom: clamp(18px, 3.5vw, 30px); }