From cf018dc36d354fb2f393ea25fa755d56f5a92a8f Mon Sep 17 00:00:00 2001 From: jay Date: Fri, 26 Jun 2026 17:58:48 -0400 Subject: [PATCH] /onthisday redesign: CD's green-key "letter" with hero + year overlay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rebuilt /onthisday to CD's On This Day design — the QOTD "letter" language in a green key: deckle frame, "On This Day" eyelash title, a flush dateline rule, a hero image with a left scrim and the year overlaid (Playfair), the event in Playfair italic, a "The story" note, and a "Read more on Wikipedia" pill. Wired to live /api/onthisday/today; hero sits on a deep-green backdrop so transparent seal/logo images never read as broken. HubShell (bar + Back + footer + icon). Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/onthisday/+page.svelte | 145 ++++++++++++++------- 1 file changed, 98 insertions(+), 47 deletions(-) diff --git a/frontend/src/routes/onthisday/+page.svelte b/frontend/src/routes/onthisday/+page.svelte index c19f7f0..4c0d628 100644 --- a/frontend/src/routes/onthisday/+page.svelte +++ b/frontend/src/routes/onthisday/+page.svelte @@ -8,11 +8,13 @@ const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; - function dayLabel(dateStr) { - if (!dateStr) return ''; - const [, m, d] = dateStr.split('-').map(Number); - return `${MONTHS[m - 1]} ${d}`; + const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + function dateline(s) { + if (!s) return ''; + const [y, m, d] = s.split('-').map(Number); + return `${WEEKDAYS[new Date(y, m - 1, d).getDay()]}, ${MONTHS[m - 1]} ${d}`; } + let readLabel = $derived(f?.source_url?.includes('wikipedia') ? 'Read more on Wikipedia' : 'Read more'); onMount(async () => { try { @@ -32,25 +34,50 @@
{#if state === 'ready'} -

A good thing today

-

{dayLabel(f.date)}

+ +
+
+
+ + On This Day +
-
-

{f.year}on this day in history

-

{f.text}

+
+ + {dateline(f.date)} +
+ +
+ {#if f.image_url} + + {/if} +
+
+
In history
+
{f.year}
+
+
+ +

{f.text}

+ + {#if f.summary} +
+ + The story +
+

{f.summary}

+ {/if} + + {#if f.source_url} +
+ + {readLabel} + + +
+ {/if} +
- - {#if f.image_url} -
- {/if} - - {#if f.summary} -

{f.summary}

- {/if} - - {#if f.source_url} - Read more on Wikipedia → - {/if} {:else if state === 'empty'}

Today's moment in history is on its way. Check back soon.

{:else} @@ -60,40 +87,64 @@