Meet Inlay, a Gleam library to embed common urls on your website
Posted by:
-
Konstantin
I'm very happy to announce a new library I've been working on in the last couple of days - Inlay.
I've been actively looking for opportunities to integrate more Gleam into my work and the recent 11ty news have provided an excellent excuse to rewrite all my static websites using Lustre.
In case you don't know, Lustre is a web framework written in Gleam which can be used to create both server and client side (SPA) web apps. Based on Lustre, there is a very cool static site generator called Blogatto which allows one to bootstrap a static website out of markdown pages with all the cool features one expects to have like RSS.
The first page I aimed at porting was the Flowvi.be homepage as it has all sorts of fun features like custom components to get the latest version, pagination, atom feed and... embedded social links!
And I maybe you know where this is going - As I couldn't immediately find a library to help me transform links like `https://mastodon.social/@iamkonstantin/116391354521208947` into their fancy embed cards, I ventured into building one of my own 🤭!
Inlay is designed to be used mainly as a Lustre component. It can be client side or as part of a server-rendered code path.
The main idea is - given a configuration, it will intercept links and if they're supported or enabled embeddable sources, Inlay will transform them.
let config =
inlay.new()
|> inlay.mastodon(MastodonConfig(servers: ["mastodon.social"]))
case inlay.embed_with(url, config) {
Some(element) -> element
None -> html.text("Not embeddable")
}And if you're using Blogatto, you can intercept generation of anchors:
let md =
markdown.default()
|> markdown.markdown_path("./blog")
|> markdown.a(inlay.a_component_default())Inlay is available on hex and if you ever happen to use it, I'd love to hear how it went!
