https://github.com/rg-wood/link-preview

Custom element to hover link previews
https://github.com/rg-wood/link-preview

custom-element link-preview lit web-components webcomponent webcomponents

Last synced: 3 months ago
JSON representation

Custom element to hover link previews

• Host: GitHub
• URL: https://github.com/rg-wood/link-preview
• Owner: rg-wood
• License: mit
• Created: 2024-07-11T10:55:34.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-31T10:50:18.000Z (6 months ago)
• Last Synced: 2024-10-01T02:41:21.975Z (4 months ago)
• Topics: custom-element, link-preview, lit, web-components, webcomponent, webcomponents
• Language: HTML
• Homepage: https://rg-wood.github.io/link-preview/
• Size: 135 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-standalones - `<link-preview>`

README

        
# `` [![Test](https://github.com/rg-wood/link-preview/actions/workflows/test.yml/badge.svg)](https://github.com/rg-wood/link-preview/actions/workflows/test.yml)

Custom element to hover link previews.

**[Demo](https://rg-wood.github.io/link-preview/)**

## Usage

Include the `` in your markup:

```html

<script

  type="module"

  src="https://www.unpkg.com/@grislyeye/[email protected]/link-preview.js">

```

Or, if you host the script as part of your project (recommended):

```html

  import '@grislyeye/link-preview/link-preview.js'

```

### Examples

To create link previews within the same page:

```html

  Link

```

To create link previews within the

[same origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy):

```html

  Link

```

Previews for external links are limited. You can only do so for pages with suitable

[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) policies:

```html

  Link

```

We do not recommend using `` for external links.

### Styling

`` exposes CSS custom properties and shadow parts that can be used to style the

preview tooltip.

Supports the following

[shadow parts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts):

| Part      | Description                                                                              |

| --------- | ---------------------------------------------------------------------------------------- |

| `preview` | The preview content container. You can use this to change the preview border style, etc. |

For example:

```css

link-preview::part(preview) {

  border: none;

  padding-left: 1em;

  padding-right: 1em;

}

```