Skip to content

v2.74.0

Choose a tag to compare

@github-actions github-actions released this 21 Oct 20:54
Immutable release. Only release title and notes can be modified.
aa8628a
  • New /music/stats page. It's in the Music header menu, and all three music pages share the subpage nav: Favorite albums, Listening history, Listening stats. The shell renders synchronously, like the other music pages, and the stats stream in behind a skeleton.
  • The page is a paper-cut collage, not a bento of matching boxes. This follows Dylan's feedback that the layout was "super boring and static":
    • Totals: each of the six totals has its own cut: notched ticket stubs (ochre, cobalt), postage stamps with perforated edges (cream, rose), and scalloped rubber-stamp seals (vermilion, viridian), all at loose angles.
    • Top albums: a podium. The #1 album sits tilted on a cobalt pebble, with its record (grooves plus a vermilion and ochre label) sliding out of the sleeve, and a scalloped #1 all time stamp at -12deg. #2 and #3 hang beside it on ochre and rose mats, with die-cut rank stickers (a circle and a ticket) at 14deg and -18deg.
    • A day of listening: a radial 24-hour turntable, with a petal per hour around a record spindle and midnight at the top. Each petal is colored by part of the day: desk is cobalt, evening viridian, mornings ochre, dead of night rose, and the peak vermilion. Only the busiest hour carries a value, and a pinned tag shows the peak window. A visually hidden list keeps every hour's count available to screen readers.
    • Day of week: a flower with one petal per weekday, each petal sized by plays.
    • Front to back: a crate of tilted covers, each with a scalloped sticker showing how much of the album is heard in full.
    • Layout: cards tilt between roughly -1deg and 1.4deg, mix edge shapes, and drop out of line, so the bands stay ragged. Two cards are taped and one has a pinned tag. The backdrop adds leaves, stars, a sun, and a moon in dark mode.
  • Header matches /music/albums. The title sits on the left and the nav plus lede on the right, with the same top padding.
  • On main's type scale and footer. The stats styles use the type sizes from #643 (--type-h1, --type-h2, --type-h3, --type-label, --type-meta, --type-body), with weight, line height, and family written out in each rule. The page sits inside the shared collageSheet, so it gets the Viridian footer and the scroll-driven sheet reveal like every other route.
  • Site paper tones only. Every card and cut uses black, cobalt, cream, ochre, rose, vermilion, or viridian, and a test checks them.
  • fetchListeningStats service. It computes everything in one pass of SQL over the full Spotify play history (listeningStatsQueries.ts), bucketed in America/Los_Angeles. Track display resolution moves into trackDisplays.ts, so the history pager and the stats share it. The page is in the markdown registry and llms.txt.
  • Backdrop hosts keep the cut-out symbol sheet out of flow. .collageBackdropHost > :not(.collageBackdrop, .cutSymbols) stops the zero-size symbol <svg> from opening a row gap above the stats title.

Full page at 1440px, the boxy bento before and the collage after, with the footer reveal fully open at the bottom:

Listening stats, before and after (light)
Listening stats, before and after (dark)

Mobile at 390px:

Listening stats on mobile (light)
Listening stats on mobile (dark)

Verified with turbo check (including the 350-line structure check), turbo check:types, and turbo test; all packages pass. New section tests cover the 24 clock wedges with their single label, the mix of stub, stamp, and seal totals, and the podium's record and rank stickers. The screenshots come from a local dev server seeded with the real play history. Each capture waits until every image has decoded.

Closes DG-221