From 5157c221ede936db006027bb55bdf34ec879cffe Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 20:22:06 -0400 Subject: [PATCH] /art redesign: "The Story" editorial page (writeup + palette + frame + share) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rebuilt /art to CD's "The Story" hybrid: a warm-tan editorial card with the Daily-Art purple accent. Left = guide write-up (kicker · title · attribution · the museum-guide blurb · Collection/Rights · View at The Met). Right = the framed piece (our existing frame + thickness customizer, on one line each) on a deeper- tan ground, then a divider, the "Colors in this piece" palette, and Share / Download (Download gated on public-domain license; image is same-origin so it just works). Self-hosted Space Mono for the curatorial micro-labels; Newsreader display + Hanken UI like the rest of the hub. Mobile: the left/right wrappers collapse (display:contents) so the blocks reflow to head → artwork → writeup → controls — the art sits high, seen before it's read. Kept HubBar, the Back button, and the fullscreen lightbox (incl. landscape rotate). Save-to-account + framed-composite export deferred to Phase 2. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/art/+page.svelte | 266 ++++++++++++------- frontend/static/fonts/CREDITS.txt | 2 + frontend/static/fonts/space-mono-latin.woff2 | Bin 0 -> 16520 bytes 3 files changed, 174 insertions(+), 94 deletions(-) create mode 100644 frontend/static/fonts/space-mono-latin.woff2 diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte index 124f6da..fee3174 100644 --- a/frontend/src/routes/art/+page.svelte +++ b/frontend/src/routes/art/+page.svelte @@ -41,9 +41,6 @@ else goto('/home3', { replaceState: true }); } - let who = $derived( - art ? [art.artist || 'Unknown artist', art.date_text].filter(Boolean) : [] - ); // Woods are built from four real mitered rails (grain turns at the corners); metals/none aren't. let isWood = $derived(['walnut', 'oak', 'mahogany'].includes(frame)); @@ -70,6 +67,30 @@ function saveThickness() { try { localStorage.setItem('ub_art_thickness', String(thickness)); } catch { /* ignore */ } } + + const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + let dateLabel = $derived.by(() => { + if (!art?.date) return ''; + const [, m, d] = art.date.split('-').map(Number); + return MONTHS[m - 1] ? `${MONTHS[m - 1]} ${d}` : ''; + }); + // "Winslow Homer, 1865 — oil on canvas" + let attribution = $derived.by(() => { + if (!art) return ''; + const who = [art.artist, art.date_text].filter(Boolean).join(', '); + return art.medium ? (who ? `${who} — ${art.medium}` : art.medium) : who; + }); + let dlName = $derived(art ? `${(art.title || 'artwork').replace(/[^\w \-]+/g, '').trim()}.jpg` : 'artwork.jpg'); + + let copied = $state(false); + async function share() { + const url = art?.source_url || location.href; + try { + if (navigator.share) { await navigator.share({ title: art?.title || 'Daily Art', url }); return; } + await navigator.clipboard.writeText(url); + copied = true; setTimeout(() => (copied = false), 1800); + } catch { /* cancelled / unsupported — no-op */ } + } @@ -96,59 +117,83 @@ Back -
-

Daily Art

-

A masterwork a day, from the world's open collections.

-
- - {#if state === 'ready'} -
- - -
-

{art.title}

-

- {#each who as part, i}{#if i > 0}·{/if}{part}{/each} -

- {#if art.medium}

{art.medium}

{/if} -

- from {art.museum}{#if art.license}·{art.license}{/if} - {#if art.source_url}View at {art.museum} →{/if} -

- -
- Frame - {#each FRAMES as f} - - {/each} + +
+
+
+
Daily Art{#if dateLabel} · {dateLabel}{/if}
+

{art.title}

+ {#if attribution}

{attribution}

{/if}
- {#if frame !== 'none'} -
- Thickness - +
+ {#if art.blurb}

{art.blurb}

{/if} +
+
Collection{art.museum}
+ {#if art.license}
Rights{art.license}
{/if}
- {/if} -
-
+ {#if art.source_url} + View at {art.museum} → + {/if} + + + +
+
+ +
+ +
+
+ Frame +
+ {#each FRAMES as f} + + {/each} +
+
+ {#if frame !== 'none'} +
+ Thickness + +
+ {/if} + + {#if art.palette?.length} +
+
Colors in this piece
+ + {/if} + +
+ + {#if art.is_public_domain} + ↓ Download + {/if} +
+
+
+ {:else if state === 'empty'}

The gallery's resting — a new piece is hung each morning. Check back soon.

{:else} @@ -172,33 +217,41 @@ {/if}