// Home page — News Oh,Ye! const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React; function HomePage({ onOpen, onOpenArchive, level, setLevel, cat, setCat, progress, theme, heroVariant, tweaks, onOpenUserPanel, archiveDay }) { theme = theme || { bg:'#fff9ef', accent:'#ffc83d', hero1:'#ffe2a8', hero2:'#ffc0a8', border:'#ffb98a', heroTextAccent:'#c14e2a', card:'#fff', chip:'#f0e8d8' }; const isZh = tweaks && tweaks.language === 'zh'; // In zh mode we show the Chinese summary cards (language === 'zh'); otherwise // we show English cards at the selected level (Sprout => easy, Tree => middle). const matchesLanguageLevel = (a) => { if (isZh) return a.language === 'zh'; return a.language === 'en' && a.level === level; }; const isArchive = typeof archiveDay === 'number' && archiveDay > 0; const todayArticles = useMemoH(() => ARTICLES.filter(a => (a.day||0) === 0 && matchesLanguageLevel(a)), [isZh, level]); const archiveArticles = useMemoH(() => ARTICLES.filter(a => (a.day||0) === archiveDay && matchesLanguageLevel(a)), [isZh, level, archiveDay]); const activeSet = isArchive ? archiveArticles : todayArticles; const filteredRaw = useMemoH(() => { if (cat === 'All' || !cat) return activeSet; return activeSet.filter(a => a.category === cat); }, [activeSet, cat]); // Cap today/category pages to 3 stories each; archive keeps all. const filtered = useMemoH(() => isArchive ? filteredRaw : filteredRaw.slice(0, 3), [filteredRaw, isArchive]); const [calendarOpen, setCalendarOpen] = useStateH(false); const [recentOpen, setRecentOpen] = useStateH(false); // Per-category displayable pool — only the first 3 stories of each category (what's shown on pages) const displayPool = useMemoH(() => { const out = []; for (const c of CATEGORIES) { out.push(...todayArticles.filter(a => a.category === c.label).slice(0, 3)); } return out; }, [todayArticles]); const poolIds = useMemoH(() => new Set(displayPool.map(a => a.id)), [displayPool]); // Pick 1 from each category by default, user can swap (only from the 3-per-category pool) const [dailyPicks, setDailyPicks] = useStateH(() => { try { const s = JSON.parse(localStorage.getItem('ohye_daily_picks_v3') || 'null'); if (s && s.length === 3) return s; } catch {} return null; }); const defaultPicks = useMemoH(() => { const out = []; for (const c of CATEGORIES) { const first = displayPool.find(a => a.category === c.label); if (first) out.push(first.id); } return out.slice(0, 3); }, [displayPool]); const activePicks = (dailyPicks && dailyPicks.every(id => poolIds.has(id))) ? dailyPicks : defaultPicks; useEffectH(() => { localStorage.setItem('ohye_daily_picks_v3', JSON.stringify(activePicks)); }, [activePicks]); const swapPick = (idx, newId) => { const next = [...activePicks]; next[idx] = newId; setDailyPicks(next); }; const daily3 = useMemoH(() => activePicks.map(id => displayPool.find(a => a.id === id)).filter(Boolean), [activePicks, displayPool]); const [swapOpen, setSwapOpen] = useStateH(null); // index being swapped const byCat = useMemoH(() => { const m = {}; CATEGORIES.forEach(c => { m[c.label] = ARTICLES.filter(a => a.category === c.label); }); return m; }, []); const minutesToday = progress.minutesToday; const streak = MOCK_USER.streak; const goal = MOCK_USER.dailyGoal; const goalPct = Math.min(1, minutesToday / goal); const readCount = progress.readToday.length; return (
{/* ——————————— HEADER ——————————— */}
{/* ——————————— ARCHIVE BANNER (when viewing an old day) ——————————— */} {isArchive && (
🗂️
{archiveDayLabel(archiveDay)}
Reading an old edition
)} {/* ——————————— TODAY'S 15 HERO (hidden in archive) ——————————— */} {!isArchive && (
{/* doodles */}
Hi Mia! 👋  ·  Thursday, Oct 24
{heroVariant === 'streak' ? ( <>
🔥 Streak mode

{MOCK_USER.streak} days
on fire.

Read today to hit day {MOCK_USER.streak+1}. You've practiced {minutesToday} of {goal} min.

{/* mini calendar of last 7 days */}
{Array.from({length:7}).map((_,i)=>{ const done = i < 6; return (
{['M','T','W','T','F','S','S'][i]}
{done ? '✓' : '·'}
); })}
) : ( <>

Today's 15 minutes

Read 3 smart stories, learn new words, and win your streak. You've read {readCount} of 3 today.

)}
onOpen(daily3.find(a => !progress.readToday.includes(a.id))?.id || daily3[0].id)}> ▶  Start today's read
⏱️ {minutesToday}/{goal} min today
{/* Daily 3 stack — swappable picks */}
⚡ Today's 3 · 5 min
Tap ⇆ to swap
{daily3.map((a, i) => { const catColor = CATEGORIES.find(c => c.label === a.category)?.color || '#1b1230'; const alternates = displayPool.filter(x => x.category === a.category && !activePicks.includes(x.id)); const canSwap = alternates.length > 0; const isSwapping = swapOpen === i; return (
{isSwapping ? (
Pick a different {a.category} story
{alternates.map(alt => ( ))} {alternates.length === 0 && (
No other {a.category} stories today.
)}
) : (
{i+1}
{(() => { const p = (progress.articleProgress||{})[a.id] || 0; const done = progress.readToday.includes(a.id); if (done) return ✓; if (p > 0) return {p}%; return null; })()} {canSwap && ( )}
)}
); })}
)} {/* ——————————— CATEGORY TABS ——————————— */}
{CATEGORIES.map(c => ( setCat(c.label)} /> ))} {!isArchive && ( )}
{isZh ? (<>Reading in 中文 · summary only) : (<>Showing stories at {level} level)}
{calendarOpen && ( {setCalendarOpen(false); onOpenArchive(d);}} onClose={()=>setCalendarOpen(false)} /> )}
{/* ——————————— ARTICLES GRID ——————————— */}
{filtered.length === 0 ? (
🌱
No stories here
Try a different level from your profile, or a different day.
) : filtered.length === 3 && !isArchive ? ( /* Editorial layout: big feature on top (photo left, article right) + 2 companions below */
onOpen(filtered[0].id)} read={progress.readToday.includes(filtered[0].id)} pct={(progress.articleProgress||{})[filtered[0].id]} variant="feature" />
onOpen(filtered[1].id)} read={progress.readToday.includes(filtered[1].id)} pct={(progress.articleProgress||{})[filtered[1].id]} variant="normal" /> onOpen(filtered[2].id)} read={progress.readToday.includes(filtered[2].id)} pct={(progress.articleProgress||{})[filtered[2].id]} variant="normal" />
) : (
{filtered.map((a, i) => ( onOpen(a.id)} read={progress.readToday.includes(a.id)} pct={(progress.articleProgress||{})[a.id]} variant={i===0 && !isArchive ? 'feature' : 'normal'} /> ))}
)}
{/* ——————————— FOOTER ——————————— */}
); } // ——————————— DATE POPOVER ——————————— function archiveDayLabel(d) { if (d === 1) return 'Yesterday'; const dt = new Date(); dt.setDate(dt.getDate() - d); return dt.toLocaleDateString(undefined, { weekday:'long', month:'short', day:'numeric' }); } function DatePopover({ onPick, onClose }) { // Show last 14 days; enable only days that have any articles const available = new Set(ARTICLES.filter(a => (a.day||0) > 0).map(a => a.day)); const days = Array.from({length:14}, (_,i) => i + 1); return ( <>
📅 Pick a past day
Each day we post a fresh edition. Catch up on what you missed.
{days.map(d => { const dt = new Date(); dt.setDate(dt.getDate() - d); const has = available.has(d); return ( ); })}
); } // ——————————— HEADER ——————————— function Header({ level, setLevel, theme, tweaks, onOpenUserPanel, progress, recentOpen, setRecentOpen, onOpenArticle }) { theme = theme || { bg:'#fff9ef', chip:'#f0e8d8' }; tweaks = tweaks || {}; return (
News Oh,Ye!
READ · THINK · LEARN
{/* Streak pill → opens recent reads popover */}
{recentOpen && ( setRecentOpen(false)} onOpenArticle={(id)=>{setRecentOpen(false); onOpenArticle(id);}} readIds={(progress&&progress.readToday)||[]}/> )}
{/* User button — opens the profile panel */} {window.UserButton && ( )}
); } function _HeaderOldContentRemoved() { return null; } // ——————————— RECENT READS POPOVER ——————————— function RecentReadsPopover({ onClose, onOpenArticle, readIds }) { // Take most recent 15 articles the user has read (from readIds, in order) const recent = []; const seen = new Set(); for (let i = readIds.length - 1; i >= 0 && recent.length < 15; i--) { const id = readIds[i]; if (seen.has(id)) continue; const a = ARTICLES.find(x => x.id === id); if (a) { recent.push(a); seen.add(id); } } return ( <>
🔥 Recently read
Last {recent.length}
{recent.length === 0 ? (
You haven't read anything yet today. Start your 15 min!
) : recent.map(a => { const catColor = CATEGORIES.find(c => c.label === a.category)?.color || '#1b1230'; return ( ); })}
); } // ——————————— CATEGORY TAB ——————————— function CatTab({ label, emoji, color, bg, active, onClick }) { return ( ); } // ——————————— PROGRESS BADGE (ring for in-progress, ✓ for complete) ——————————— function ProgressBadge({ pct, size = 28 }) { if (!pct || pct <= 0) return null; if (pct >= 100) { return (
✓ Read
); } const r = size / 2 - 3; const c = 2 * Math.PI * r; const dash = (pct / 100) * c; return (
{pct}%
); } // ——————————— ARTICLE CARD ——————————— // —— Highlights keyword terms in an article summary —— // Matches each term as a whole word OR with common English suffixes // (bet → bets/betting, ban → banned/banning, fine → fined). All occurrences // are highlighted. Case-insensitive. Styled with a chip + dotted underline. function HighlightedSummary({ text, keywords }) { if (!keywords || keywords.length === 0) return <>{text}; // Common English verb/noun suffixes so "ban" catches "banned/banning", // "fine" catches "fined", "bet" catches "bets/betting", etc. const SUFFIX = '(?:s|es|ed|d|ing|ning|ned|ting|ted|er|ers)?'; // Find every occurrence of every term, case-insensitive, global. const hits = []; for (const k of keywords) { const escaped = k.term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); const re = new RegExp(`\\b(${escaped})${SUFFIX}\\b`, 'gi'); let m; while ((m = re.exec(text)) !== null) { hits.push({ term: k.term, def: k.def, start: m.index, end: m.index + m[0].length, match: m[0] }); if (m.index === re.lastIndex) re.lastIndex++; // avoid zero-length loops } } // Sort by start; drop overlaps, preferring earliest/longest hits.sort((a, b) => a.start - b.start || (b.end - b.start) - (a.end - a.start)); const dedup = []; let cursor = 0; for (const h of hits) { if (h.start >= cursor) { dedup.push(h); cursor = h.end; } } if (dedup.length === 0) return <>{text}; const parts = []; let i = 0; dedup.forEach((h, idx) => { if (h.start > i) parts.push({text.slice(i, h.start)}); parts.push( ); i = h.end; }); if (i < text.length) parts.push({text.slice(i)}); return <>{parts}; } function KeywordTip({ term, def }) { const [hover, setHover] = useStateH(false); const [pos, setPos] = React.useState({ top: 0, left: 0 }); const spanRef = React.useRef(null); const show = (e) => { e.stopPropagation(); const r = spanRef.current && spanRef.current.getBoundingClientRect(); if (r) setPos({ top: r.top - 8, left: r.left + r.width / 2 }); setHover(true); }; return ( { e.stopPropagation(); setHover(false); }} onClick={(e) => e.stopPropagation()} style={{ display:'inline-block', fontFamily:'Fraunces, Georgia, serif', fontStyle:'italic', fontWeight:700, color:'#b2541a', background: hover ? '#ffedc1' : '#fff4d6', padding:'0 6px', borderRadius:6, textDecoration:'underline dotted #d89b4a', textUnderlineOffset:'3px', cursor:'help', transition:'background .15s', }} > {term} {hover && ReactDOM.createPortal(
What it means
{def}
, document.body )} ); } function ArticleCard({ article, onOpen, read, pct, variant }) { const [hover, setHover] = useStateH(false); const isFeature = variant === 'feature'; const isTall = variant === 'tall-feature'; return ( ); } Object.assign(window, { HomePage });