Show where it came from

Show the sentence a link came from, so people know why before clicking.

Brian Lovin@brian_lovin
I added a hovercard on related links in Shiori's reader that shows you exactly where that link appeared in the source text so you have full context. s/o @JaceThings for the Highlighters library 😍
Sep 14, 2026View on X ↗

Rebuilt as a reader with related links; the article and links are made up.

Related links, with context

Hover, focus or tap each related link.

Title and URLBad
Card sayswhere it goes
Source sentenceGood
Card sayswhy it was cited
// Keep the sentence each link came from when you extract it.
const link = {
  url: "https://latency.blog/100ms-rule",
  title: "The 100ms rule, revisited",
  context: { before: "Anything slower than ", text: "a tenth of a second", after: " stops feeling direct." },
};

// Open after a short intent delay; once one is open, switch instantly.
item.addEventListener("pointerenter", () => {
  clearTimeout(timer);
  if (openCard) return show(link);
  timer = setTimeout(() => show(link), 300);
});

const { before, text, after } = link.context;
card.replaceChildren(
  h("span", { class: "domain" }, new URL(link.url).hostname),
  h("p", {}, before, h("mark", {}, text), after),
);

Why it matters, pros and cons

Why it matters

A title and URL say where a link goes, not why it was there. The sentence around it is the reason, and seeing it answers “worth a click?” in place.

Pros

  • Decide before clicking, without scrolling back to find it.
  • The highlight ties the link to the exact words that cited it.
  • You already have the text when you extract the link.

Cons

  • You must store the surrounding sentence at extraction time.
  • Cards that open on every pass are noise: keep the intent delay.
  • Touch has no hover: open on tap, and keep the link reachable.