Link Preview

Gist

Articles and tutorials usually contain many links to provide additional context or further reading.

However, opening an external link can disrupt the flow of the article and end up with the user going down a rabbit hole that you never intended.

We could show a preview of the link on hover and focus to maintain attention, yet still give an idea of the destination.

There are several approaches to achieve this particular feature. In this case, we extract all URL-s from the code at build time, capture a screenshot of each one, store them as images, and finally reference them with the URL to retrieve the image.