Demonstrating Internal Link Previews

This post showcases the new Wikipedia-style internal link previews. When you hover over an internal link (a link starting with a /), a small tooltip will appear containing the page title and a brief summary.

Try it out

Hover over these links to see the feature in action:

How it works

The system uses a custom Alpine.js component. When your mouse enters a valid internal link:

  1. The browser fetches the target URL in the background.
  2. It parses the HTML to find the og:description meta tag or the first paragraph of text.
  3. A tooltip is displayed at your cursor’s position with the gathered information.

This keeps readers engaged by allowing them to “peek” at other content without leaving the current page.