Skip to content

Load annotations only when clicked - #77

Open
vlnst wants to merge 1 commit into
Insprill:masterfrom
vlnst:claude/peaceful-euler-1e4cay
Open

vlnst wants to merge 1 commit into
Insprill:masterfrom
vlnst:claude/peaceful-euler-1e4cay

Conversation

@vlnst

@vlnst vlnst commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Closes #59

This makes annotations load only when someone actually clicks one. A plain song page no longer makes any referent requests, it just renders the highlights from the lyrics HTML that is already parsed.

The first click on a highlight reloads the page with the song's annotations loaded and opens the one you clicked. After that, every other highlight on the page opens in place, no more reloads.

Highlights on a plain page link to ?id={song}&referent_id={id}#ref-{id}-{n}. That's the same format Genius redirects its own annotation links to, so links coming from genius.com keep working.

When referent_id is in the URL, the server pulls the song's referents from referents?song_id=…&per_page=50. It keeps paging until a page comes back with fewer than 50 (the next_page field is always null, so that's the only way to tell), capped at 5 pages. That endpoint leaves out verified annotations, so if the clicked one isn't in the list it's fetched separately via referents/{id}. If any of that fails it just gets logged and the lyrics render without it.

Each loaded annotation is rendered right after its highlight with id="note-{id}", and the highlights switch to plain #note-… links. The popup is shown with .annotation:target.

A few things that might look strange in the diff:

  • Two kinds of anchors (#ref-… and #note-…). The popup is position: fixed, and browsers don't scroll to fixed elements. So the first click, which reloads the page, points at the lyric line instead, and the page lands where you clicked. Clicks after that don't reload, so they point straight at the popup.
  • Repeated choruses share one referent. Each repeat gets its own popup id (note-{id}-2, -3, …) so that closing one brings you back to the chorus you clicked, not the first one.
  • Lyric lines are <div> now, not <p>. Annotation text has paragraphs in it, and you can't nest those inside a <p>.
  • Added scrollbar-gutter: stable so the page doesn't jump sideways when the scrollbar hides behind an open popup.
  • Fixed a bug on the way: the referent map was built with annotation ids but looked up with referent ids, so most lookups failed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Only load annotations when clicked

1 participant