https://github.com/daviddarnes/link-peek

A Web Component to unfurl regular links into rich previews
https://github.com/daviddarnes/link-peek

component components customelement customelements webcomponent webcomponents

Last synced: 3 months ago
JSON representation

A Web Component to unfurl regular links into rich previews

• Host: GitHub
• URL: https://github.com/daviddarnes/link-peek
• Owner: daviddarnes
• License: mit
• Created: 2024-04-10T09:25:14.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-12T16:25:21.000Z (9 months ago)
• Last Synced: 2024-04-14T10:49:17.998Z (9 months ago)
• Topics: component, components, customelement, customelements, webcomponent, webcomponents
• Language: HTML
• Homepage: https://daviddarnes.github.io/link-peek/demo.html
• Size: 27.3 KB
• Stars: 12
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# `link-peek`

A Web Component to unfurl regular links into rich previews.

**[Demo](https://daviddarnes.github.io/link-peek/demo.html)** | **[Simple demo](https://daviddarnes.github.io/link-peek/demo-simple-example.html)** | **[Further reading](https://darn.es/link-peek-web-component/)**

## Examples

General usage example:

```html

  

    

      

      


      

      

    

    

  


  David Darnes

```

In the above example we're utilising the [microlink](https://microlink.io) API to retrieve metadata of the linked page and then using the marked up template to present that data.

_Note that there are no defaults set for the API or template being used. `link-peek` operates agnostically of these APIs for great control and independance. This also means we cannot assume a default built in template_

## 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 using a `` element and `data-key="name"` data attributes

- Use a custom template for specific instances using the `template` attribute

- Use any public API to populate your 'unfurled' previews

## Installation

You have a few options (choose one of these):

1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/link-peek): `npm install @daviddarnes/link-peek`

1. [Download the source manually from GitHub](https://github.com/daviddarnes/link-peek/releases) into your project.

1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

## Templating

Templates are created using the `` element with an ID of `link-peek-template`. Within the template you can use regular HTML elements and to populate them you use the `data-key` attribute to name the data point you want it to use. For example if I want to use the data point `data.description` to render a line of text I would write within my template `
`.


Here's that same example in context:

```html

  


  David Darnes

```

You can also use different templates on the same page by using the template attribute to target `` elements with a specific `id`:

```html

  

  David Darnes

```

_Note that for  and  elements the value won't be applied to it's content if the string being returned starts with http and instead will be applied to the href and src attributes respectively._


### Usage

Make sure you include the `` in your project (choose one of these):

```html

<!-- Host yourself -->

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

```

```html

```

```html

```

## Credit

With thanks to the following people:

- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/link-peek)