link-peek Web Component

The link-peek Web Component allows you to turn a regular anchor link to a rich preview (also known as an 'unfurled' link) to show description, meta image, website name and more using a JSON API.

Origin

For a number of years I've been using Ghost to write my website content, and one of its very useful features is the 'bookmark card'. It turns URLs in to rich previews directly on the page. For example:

What I like is that it creates some extra visual interest to an otherwise normal link to a page. However that's all it is, visual interest. Things like RSS readers and other reader views don't need all this additional generated HTML. All that's really happening is that the link is getting "spiced up", which to me perfectly matches up with progressive enhancement.

Enter `link-peek`

The <link-peek> component is designed to be wrapped around a regular anchor link and will progressively enhance that link into a rich preview.

Features

This Web Component allows you to:

Use public APIs to return and present metadata on a linked web page
Create custom templates for your 'unfurled' link previews for greater design control
Use any public API to populate your 'unfurled' previews

Usage

link-peek is designed to be used in conjunction with JSON APIs that can return metadata about the URL added to the anchor element between the Web Component tags. That API coupled with a <template> element and the component usage itself is all you need to turn a regular anchor element into a rich preview:

<script type="module" src="link-peek.js"></script>

<template id="link-peek-template">
  <p data-key="data.description"></p>
</template>

<link-peek api="https://api.microlink.io/?url=${link}">
  <a href="https://darn.es">David Darnes</a>
</link-peek>

A very reduced example of using link-peek

In the above example we're utilising the microlink API to retrieve the description metadata of the linked page and then using the marked up template to present that data. Check out the live demo here.

The above is a very simplified example, but you can be far more elaborate with your templates provided that the API can return the data you need:

<script type="module" src="link-peek.js"></script>

<template id="link-peek-template">
  <figure>
  <figcaption>
    <a data-key="data.title, link"></a>
    <p data-key="data.description"></p>
    <img data-key="data.logo.url" />
    <small data-key="data.publisher"></small>
  </figcaption>
  <img data-key="data.image.url" />
</figure>
</template>

<link-peek api="https://api.microlink.io/?url=${link}">
  <a href="https://darn.es">David Darnes</a>
</link-peek>

More complex example of using link-peek

Both the API endpoint and template need to be added in order for the component to operate as expected. This was a deliberate choice to prevent the Web Component from being locked to a specific provider.

Here's a live demo of the above example in action with various links.