|
| 1 | +import { useSearchParams } from 'react-router-dom' |
| 2 | +import { ArrowSquareOut } from '@phosphor-icons/react' |
| 3 | +import { LandingFooterNav } from '../Landing' |
| 4 | +import weeklyData from './weekly.json' |
| 5 | + |
| 6 | +const MAX_ITEMS = 10 |
| 7 | + |
| 8 | +type WeeklyItem = { |
| 9 | + title?: string |
| 10 | + summary?: string |
| 11 | + link?: string |
| 12 | + tags?: string[] |
| 13 | + category?: string |
| 14 | + priority?: number |
| 15 | +} |
| 16 | + |
| 17 | +type WeeklyWeek = { |
| 18 | + weekStart?: string |
| 19 | + weekEnd?: string |
| 20 | + updatedAt?: string |
| 21 | + items?: WeeklyItem[] |
| 22 | +} |
| 23 | + |
| 24 | +type WeeklyFile = { |
| 25 | + weeks?: WeeklyWeek[] |
| 26 | + weekStart?: string |
| 27 | + weekEnd?: string |
| 28 | + updatedAt?: string |
| 29 | + items?: WeeklyItem[] |
| 30 | +} |
| 31 | + |
| 32 | +const data = weeklyData as WeeklyFile |
| 33 | + |
| 34 | +function parseYmd (value?: string): Date | null { |
| 35 | + if (!value) return null |
| 36 | + const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value.trim()) |
| 37 | + if (!match) return null |
| 38 | + const year = Number(match[1]) |
| 39 | + const month = Number(match[2]) |
| 40 | + const day = Number(match[3]) |
| 41 | + const date = new Date(year, month - 1, day) |
| 42 | + if ( |
| 43 | + date.getFullYear() !== year || |
| 44 | + date.getMonth() !== month - 1 || |
| 45 | + date.getDate() !== day |
| 46 | + ) return null |
| 47 | + return date |
| 48 | +} |
| 49 | + |
| 50 | +function formatWeekRange (startIso?: string, endIso?: string): string { |
| 51 | + const start = parseYmd(startIso) |
| 52 | + const end = parseYmd(endIso) |
| 53 | + const monthDay = new Intl.DateTimeFormat('en', { month: 'long', day: 'numeric' }) |
| 54 | + const monthDayYear = new Intl.DateTimeFormat('en', { |
| 55 | + month: 'long', day: 'numeric', year: 'numeric', |
| 56 | + }) |
| 57 | + |
| 58 | + if (start && end) { |
| 59 | + const sameYear = start.getFullYear() === end.getFullYear() |
| 60 | + const sameMonth = sameYear && start.getMonth() === end.getMonth() |
| 61 | + if (sameMonth) { |
| 62 | + return `${monthDay.format(start)}–${end.getDate()}, ${end.getFullYear()}` |
| 63 | + } |
| 64 | + if (sameYear) { |
| 65 | + return `${monthDay.format(start)} – ${monthDayYear.format(end)}` |
| 66 | + } |
| 67 | + return `${monthDayYear.format(start)} – ${monthDayYear.format(end)}` |
| 68 | + } |
| 69 | + |
| 70 | + if (start) return monthDayYear.format(start) |
| 71 | + if (end) return monthDayYear.format(end) |
| 72 | + return 'Unknown week' |
| 73 | +} |
| 74 | + |
| 75 | +function formatUpdated (iso?: string): string { |
| 76 | + if (!iso) return '' |
| 77 | + const date = new Date(iso) |
| 78 | + if (Number.isNaN(date.getTime())) return '' |
| 79 | + return new Intl.DateTimeFormat('en', { |
| 80 | + month: 'long', |
| 81 | + day: 'numeric', |
| 82 | + year: 'numeric', |
| 83 | + timeZone: 'UTC', |
| 84 | + }).format(date) |
| 85 | +} |
| 86 | + |
| 87 | +function weekKey (week: WeeklyWeek): string { |
| 88 | + return (week.weekStart || week.weekEnd || '').slice(0, 10) |
| 89 | +} |
| 90 | + |
| 91 | +function weeksFromFile (file: WeeklyFile): WeeklyWeek[] { |
| 92 | + const source = Array.isArray(file.weeks) |
| 93 | + ? file.weeks |
| 94 | + : (file.weekStart || file.weekEnd || file.items) |
| 95 | + ? [file] |
| 96 | + : [] |
| 97 | + |
| 98 | + return source |
| 99 | + .filter(week => week && (week.weekStart || week.weekEnd)) |
| 100 | + .slice() |
| 101 | + .sort((a, b) => weekKey(b).localeCompare(weekKey(a))) |
| 102 | +} |
| 103 | + |
| 104 | +function visibleHref (link?: string): string | null { |
| 105 | + if (!link) return null |
| 106 | + const href = link.trim() |
| 107 | + if (!href || href === '#') return null |
| 108 | + return href |
| 109 | +} |
| 110 | + |
| 111 | +function itemsFor (week?: WeeklyWeek): WeeklyItem[] { |
| 112 | + if (!week || !Array.isArray(week.items)) return [] |
| 113 | + return week.items |
| 114 | + .filter(item => item && typeof item.title === 'string' && item.title.trim()) |
| 115 | + .slice(0, MAX_ITEMS) |
| 116 | +} |
| 117 | + |
| 118 | +function WeeklyItemRow (props: { item: WeeklyItem }) { |
| 119 | + const title = props.item.title?.trim() || '' |
| 120 | + const summary = props.item.summary?.trim() |
| 121 | + const href = visibleHref(props.item.link) |
| 122 | + const external = !!href && /^https?:\/\//i.test(href) |
| 123 | + |
| 124 | + const body = ( |
| 125 | + <> |
| 126 | + <span className="block text-lg font-medium leading-snug text-gray-100"> |
| 127 | + {title} |
| 128 | + {external && ( |
| 129 | + <ArrowSquareOut |
| 130 | + size={15} |
| 131 | + weight="bold" |
| 132 | + className="ml-1.5 inline-block translate-y-px opacity-40" |
| 133 | + aria-hidden="true" |
| 134 | + /> |
| 135 | + )} |
| 136 | + </span> |
| 137 | + {summary && ( |
| 138 | + <span className="mt-1.5 block text-base font-normal leading-relaxed text-logseq-50/80"> |
| 139 | + {summary} |
| 140 | + </span> |
| 141 | + )} |
| 142 | + </> |
| 143 | + ) |
| 144 | + |
| 145 | + if (!href) { |
| 146 | + return <li className="border-t border-white/10 py-5">{body}</li> |
| 147 | + } |
| 148 | + |
| 149 | + return ( |
| 150 | + <li className="border-t border-white/10"> |
| 151 | + <a |
| 152 | + href={href} |
| 153 | + className="block py-5 hover:text-white" |
| 154 | + {...(external ? { target: '_blank', rel: 'noreferrer' } : {})} |
| 155 | + > |
| 156 | + {body} |
| 157 | + {external && <span className="sr-only"> (opens a new window)</span>} |
| 158 | + </a> |
| 159 | + </li> |
| 160 | + ) |
| 161 | +} |
| 162 | + |
| 163 | +export function WeeklyPage () { |
| 164 | + const [searchParams, setSearchParams] = useSearchParams() |
| 165 | + const weeks = weeksFromFile(data) |
| 166 | + const requested = searchParams.get('week') || '' |
| 167 | + const selected = weeks.find(week => weekKey(week) === requested) || weeks[0] |
| 168 | + const items = itemsFor(selected) |
| 169 | + const range = selected ? formatWeekRange(selected.weekStart, selected.weekEnd) : '' |
| 170 | + const updated = formatUpdated(selected?.updatedAt) |
| 171 | + |
| 172 | + const onWeekChange = (key: string) => { |
| 173 | + const next = new URLSearchParams(searchParams) |
| 174 | + if (!key || key === weekKey(weeks[0] || {})) next.delete('week') |
| 175 | + else next.set('week', key) |
| 176 | + setSearchParams(next, { replace: true }) |
| 177 | + } |
| 178 | + |
| 179 | + return ( |
| 180 | + <div className="app-page pt-20"> |
| 181 | + <article className="page-inner w-full px-5 pb-8 sm:px-10"> |
| 182 | + <div className="mx-auto max-w-2xl pb-12 pt-8 sm:pb-20 sm:pt-16"> |
| 183 | + <h1 className="text-3xl font-semibold tracking-wide text-logseq-50"> |
| 184 | + Weekly |
| 185 | + </h1> |
| 186 | + |
| 187 | + {weeks.length > 0 && ( |
| 188 | + <div className="mt-8"> |
| 189 | + <label className="block text-sm text-logseq-100/80" htmlFor="weekly-week"> |
| 190 | + Week |
| 191 | + </label> |
| 192 | + <select |
| 193 | + id="weekly-week" |
| 194 | + className="mt-2 w-full max-w-full rounded-md border border-logseq-500/70 bg-logseq-800 px-3 py-3 text-base text-gray-100 sm:max-w-sm [color-scheme:dark]" |
| 195 | + value={selected ? weekKey(selected) : ''} |
| 196 | + onChange={(event) => onWeekChange(event.target.value)} |
| 197 | + > |
| 198 | + {weeks.map(week => { |
| 199 | + const key = weekKey(week) |
| 200 | + return ( |
| 201 | + <option key={key} value={key}> |
| 202 | + {formatWeekRange(week.weekStart, week.weekEnd)} |
| 203 | + </option> |
| 204 | + ) |
| 205 | + })} |
| 206 | + </select> |
| 207 | + </div> |
| 208 | + )} |
| 209 | + |
| 210 | + {updated && ( |
| 211 | + <p className="mt-4 text-sm text-logseq-100/70"> |
| 212 | + Updated {updated} |
| 213 | + </p> |
| 214 | + )} |
| 215 | + |
| 216 | + {items.length > 0 ? ( |
| 217 | + <ul className="mt-8 border-b border-white/10"> |
| 218 | + {items.map((item, index) => ( |
| 219 | + <WeeklyItemRow item={item} key={`${item.title}-${index}`}/> |
| 220 | + ))} |
| 221 | + </ul> |
| 222 | + ) : ( |
| 223 | + <p className="mt-10 text-base text-logseq-50/75"> |
| 224 | + {range ? `Nothing from ${range}.` : 'Nothing here yet.'} |
| 225 | + </p> |
| 226 | + )} |
| 227 | + </div> |
| 228 | + </article> |
| 229 | + |
| 230 | + <div className="page-inner-full-wrap b relative"> |
| 231 | + <div className="page-inner footer-nav"> |
| 232 | + <div className="page-inner"> |
| 233 | + <LandingFooterNav/> |
| 234 | + </div> |
| 235 | + </div> |
| 236 | + </div> |
| 237 | + </div> |
| 238 | + ) |
| 239 | +} |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?v=4&size=40){kind=avatar}
0 commit comments