Skip to content

Stvad/link-summoner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Link Summoner

npm

A script that you can embed in your website to easily enable live link previews for a whitelisted set of websites.

Usage

Script tag

The simplest option is to add the following tag to your page (update the version number if necessary):

<script src="https://cdn.jsdelivr.net/npm/link-summoner@1.3.1/dist/browser.js" type="module"></script>

Using as a library (via NPM)

See example usage in examples/bundling

  1. npm install link-summoner
  2. In the files/pages you want to have live link previews:
import {initPreviews} from "link-summoner"

initPreviews()

Customization

See an extensive customization example in Transclude Me extension which is using this library as a foundation.

Styling

Links that can be previewed get the link-with-preview CSS class. You can specify styling for that class to indicate presence of the preview. For example, the following snippet would add τ after each link with preview:

.link-with-preview::after {
	text-decoration: none;
	content: 'τ';
	margin-left: 0.2em;
	color: #4f5c68;
}

Whitelisting more websites/adding custom preview types

initPreviews function accepts a configuration object with the following properties:

  • linkPreviewClass: string — CSS class that will be added to links that have the preview.
    • Default: link-with-preview
  • renderers: LinkRenderer[] - a list of renderers for live previews.
    • Default: defaultRenderers
    • Each renderer must define
      • canRender(url: URL): Promise<boolean> and
      • render(url: URL): Promise<HTMLElement> methods.
    • There is also a set of pre-defined renderers you can reuse.
  • tippyOptions - options for the tippy.js library which is used to show popups.

Example: add an iframe preview for example.com, while keeping all the default preview options:

import {initPreviews, defaultRenderers, iframeRenderer} from "link-summoner"

initPreviews({
  renderers: [
      iframeRenderer(/example\.com/),
      ...defaultRenderers, 
  ]
})

Supported websites

For the list of supported websites see files in src/rendering

Usage in the wild:

About

Enable live link previews on your website

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published