Rich Link Previews With Link-Peek Web Component

Category: Javascript , Recommended | April 22, 2024
Author:daviddarnes
Views Total:20 views
Official Page:Go to website
Last Update:April 22, 2024
License:MIT

Preview:

Rich Link Previews With Link-Peek Web Component

Description:

Link-Peek is a lightweight yet robust web component that has the ability to transform ordinary links into rich previews.

This web component takes URLs and uses public APIs (like microlink.io) to fetch data about the linked webpage. This data can then be displayed in a customizable preview, complete with title, description, images, and even the publisher’s name.

Link-Peek can be useful for websites featuring numerous outbound links, as it provides a snapshot of the linked content without requiring users to leave the page. You can customize the layout of these previews using your own HTML templates, which gives you a lot of control over the look and feel of your links.

How to use it:

1. Install the Link-Peek package with NPM and import it as a module.

# NPM
$ npm install @daviddarnes/link-peek
<script type="module" src="link-peek.js"></script>

2. Build a template with an ID (link-peek-template) to define how your previews will look. Use data attributes to specify which data point from the API response you want to display in each element (e.g., title, description, image).

<template id="link-peek-template">
  <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>
  <img data-key="data.image.url" />
</template>

3. Encase your HTML links within the link-peek component and provide the API endpoint to fetch the link data. That’s it.

<link-peek api="https://api.microlink.io/?url=${link}">
  <a href="https://www.cssscript.com">CSSScript.Com</a>
</link-peek>

More Like This:

Changelog:

04/22/2024

  • Added custom templates for specific instances using a new template attribute and <template> elements with an id

You Might Be Interested In:


Leave a Reply