Add <inlay-embed> as Lustre component

[kkostov]

This PR introduces a client side Lustre component for embeds.

Demo

In a Lustre application, you can now use the <inlay-embed url="…"> component to embed a url. Inlay will try to detect the provider from the URL and renders the embed

1. Configure inlay (see below for more configuration options).

import inlay

pub fn main() {
  let config =
    inlay.default_config()
    |> inlay.mastodon(inlay.mastodon_config(["mastodon.social"]))

  let assert Ok(_) = inlay.configure(config)
}

2. Use the inlay-embed component with an embed url:

<inlay-embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></inlay-embed>
<inlay-embed url="https://mastodon.social/@iamkonstantin/116391354521208947"></inlay-embed>
<inlay-embed url="https://bsky.app/profile/did:plc:bwm3ipmp7fidz67iy4atioa5/post/3max7rufmvp2y"></inlay-embed>

configure takes a Config which lets you setup if and how embeds appear for each platform. inlay.register() is shorthand for configure(default_config()).

A few rendering options can be tuned per embed with optional attributes: no-cookie (YouTube), parent (Twitch), aspect-ratio, etc:

<inlay-embed url="https://www.twitch.tv/somechannel" parent="mysite.com"></inlay-embed>

Inside a Lustre view, use the helper instead of a raw tag:

import inlay
import lustre/attribute

inlay.embed_element([
  attribute.attribute("url", "https://www.youtube.com/watch?v=dQw4w9WgXcQ"),
])

The <inlay-embed> component runs in the browser. To embed links in server-rendered HTML (like Blogatto), use the functions below instead.

There is an example app in examples/components.

Notes

• Bluesky still requires a fetch if the embedded url uses friendly handles. Embeds for DIDs work out of the box.
• Since since embeds query their DOM in order to resize the widgets and Lustre components render inside of a shadow dom, inlay as a component would wrap every preview in an iframe. see src/inlay_component_ffi.mjs