astro-link-previews

This integration provides a single component, that is able to display previews/embeds for most existing websites.

It is powered by https://microlink.io/ which provides 50 free and unauthanticated API calls per day. This integration caches resolved URLs to speed up SSG. If you like their service / need more, please subscribe to one of their plans. This integration isn't affiliated to them.

In contrast to microlinks SDK, this integration is a bit more opniated, aims to ship zero JS to the client, is GDPR-compliant whenever you use the small or normal variant and supports a 2-click variant for GDPR-complient rich embeds.

Installation

For external images to be downloaded while building, instead of remote loading by the client (and thus being more GDPR compliant), you need to add the following to your astr.config.js. The components will work even without this though.

image: { remotePatterns: [{ protocol: "https" }] },

You can find more info about that in astros docs.

Usage

Previews

Small size previews

Browser as API. microlink.io has 48 repositories available. Follow their code on GitHub.

<Card size="small" url="https://github.com/microlinkhq" />

Websiiite (with Dragan Espenschied) — Tracky Birthday | Last.fm

Watch the video for Websiiite (with Dragan Espenschied) by Tracky Birthday for free, and see the artwork, lyrics and similar artists.

Upituprecordings

<Card size="small" url="https://www.last.fm/music/Tracky+Birthday/_/Websiiite+(with+Dragan+Espenschied)" />

Normal size previews

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

<Card url="https://astro.build/" />

Normal size without prestyling

Ada Lovelace - Wikipedia

Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage’s proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation.

Wikimedia Foundation, Inc.

Contributors to Wikimedia projects

<Card withStyling={false} url="https://en.wikipedia.org/wiki/Ada_Lovelace" />

Large preview

watch?v=USKD3vPD6ZA

Go to http://Public.com/reeves and you’ll receive a free stock worth up to $300 once you open an account. *This is not investment advice. Offer valid for U.S. residents 18+ and subject to account approval. See Public.com/disclosures/ I am not a qualified licensed investment advisor. Nothing in this video constitutes professional and/or financial advice. This video is for entertainment purposes only. Do not do what I did in this video. fredrick fish poster: https://www.pissbaby.store/products/723023-fredrick-vs-wsb-poster fish other places: https://twitter.com/michaelreeves https://www.instagram.com/michaelreeves808/ songs: Pax - Gee (Disco Remix) Everett Kim Tracks

<Card size="large" url="https://www.youtube.com/watch?v=USKD3vPD6ZA" />

Embedded 2-Click-Variant

I forced an Ai to play a kids adventure game

Click to activate external content

<Card size="embed" url="https://www.youtube.com/watch?v=W3id8E34cRQ" />

Embedded with custom text

watch?v=LWGJA9i18Co

Foobar 2000

<Card size="embed" url="https://www.youtube.com/watch?v=LWGJA9i18Co">
  <div slot="previewText">Foobar 2000</div>
</Card>

Embedded but falls back to large preview

When no iFrame is available, the component falls back to the large preview instead.

Livewire | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

<Card size="embed" url="https://livewire.laravel.com/" />