thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home3 News card: "1 min brief · ~N min full story" badge

Browse Source 
Per the convo with Codex: keep the value proposition on the card rather than
hiding everything when full-story time is unknown.
- summary + full-story time → "1 min brief · ~10 min full story"
- summary only → "1 min brief"
- no brief/summary → hide the row
"brief" over "summary" (more editorial); full-story time still never faked.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 08:44:40 -04:00
parent dc23277b38
commit cf66d99e21
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+11 -5
View File
@@ -26,10 +26,16 @@
// truncation handled by CSS (-webkit-line-clamp:2) — breaks on whole words, fills 2 full lines // truncation handled by CSS (-webkit-line-clamp:2) — breaks on whole words, fills 2 full lines
let headline = $derived(news?.title ?? 'What went right this week: the good news that actually matters'); let headline = $derived(news?.title ?? 'What went right this week: the good news that actually matters');
// The badge shows how long the FULL source article takes — the contrast that sells // Sell the value proposition right on the card: the quick UB brief vs. the full article.
// the gist ("the calm 1-min version here; ~10 min if you want the deep dive"). Computed // "1 min brief · ~10 min full story" (both known)
// server-side from the source word count; hidden entirely when we couldn't measure it. // "1 min brief" (full-story time unknown — never fake it)
let fullRead = $derived(news?.source_read_minutes ? `Full story · ~${news.source_read_minutes} min` : ''); // hidden (no brief/summary yet)
const briefMins = (t) => Math.max(1, Math.round((t || '').trim().split(/\s+/).filter(Boolean).length / 200));
let readBadge = $derived.by(() => {
if (!news?.summary) return '';
const brief = `${briefMins(news.summary)} min brief`;
return news.source_read_minutes ? `${brief} · ~${news.source_read_minutes} min full story` : brief;
});
// small-joys shelf: 3 cells shown two at a time, rotated by the reader (no auto-motion) // small-joys shelf: 3 cells shown two at a time, rotated by the reader (no auto-motion)
const JOY_ACCENTS = ['#4f7da8', '#b06a86', '#b06a45']; const JOY_ACCENTS = ['#4f7da8', '#b06a86', '#b06a45'];
@@ -130,7 +136,7 @@
<p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p> <p class="summary">{news?.summary || "We read the week so you don't have to doomscroll it. Five quietly hopeful stories, summarised to the gist."}</p>
</a> </a>
<div class="news-foot"> <div class="news-foot">
{#if fullRead}<span class="meta">{fullRead}</span>{/if} {#if readBadge}<span class="meta">{readBadge}</span>{/if}
</div> </div>
<hr class="news-div" /> <hr class="news-div" />
<a class="news-more" href="/">Read more good news →</a> <a class="news-more" href="/">Read more good news →</a>