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 @@