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 /) that serves an HTML page, 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:

File links stay usable without displaying a preview:

How it works

The system uses a custom Alpine.js component and metadata generated by Hexo:

  1. During generation, Hexo creates small JSON files only for destinations linked from Markdown posts or projects. Navigation, archives, and unreferenced pages do not generate previews. For example, the Rich Content Elements preview lives at /link-previews/2026/01/01/demo-rich-content/index.json.
  2. The build adds a preview metadata URL to eligible internal links and excludes downloads and known files.
  3. Hovering fetches only the JSON metadata and displays it in a tooltip. The target’s HTML page is never downloaded for a generated preview, and repeated hovers reuse cached results.
  4. Protected pages expose their public title with a generic summary. Links revealed after unlocking also use the generated metadata.

Missing or invalid metadata uses /link-previews/default.json, a small generic preview. Links that the build cannot resolve require a successful HTML or XHTML HEAD response before using that fallback; attachments and other content types are skipped. Preview requests never download a target page’s HTML body.

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