DavidDarnes,
@DavidDarnes@mastodon.design avatar

Newly added to my collection: <link-peek>!

Turn any regular anchor link into a rich preview (also known as an ‘unfurled’ link). Can be used with any JSON API and allows for custom templating.

Prefect for creating more visual interest on links without filling the page with additional HTML noise:

✍🏻 https://darn.es/link-peek-web-component/
📦 https://www.npmjs.com/package/@daviddarnes/link-peek

anniegreens,
@anniegreens@social.lol avatar
DavidDarnes,
@DavidDarnes@mastodon.design avatar

@anniegreens super clever! You're like my #1 user 😅

polx,
@polx@mastodon.online avatar

@DavidDarnes real cool!
Any chance to have versions that serve the metadata from the including site?

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@polx sorry but I’m not sure what you mean?

polx,
@polx@mastodon.online avatar

@DavidDarnes The toot was relayed by @zachleat so I would expect a few jamstackers would go around.

As far I understood your cool component, an API machine is used by the client to create the previews' input.

I was wondering if this could be generated at build-time, fetching from the API (or the page or...) when you output the HTML.

Paul

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@polx @zachleat it sure can, but this on the client by design to lean into progressive enhancement. If you’re wanting to do this at build time with @eleventy I have a plugin for that https://github.com/daviddarnes/eleventy-plugin-unfurl

anders,
@anders@thoresson.social avatar

@DavidDarnes Nice! That seems useful for a links collection!

flamed,
@flamed@social.lol avatar

@anders @DavidDarnes i love this. but be ready to realise the absolute mess of meta data across the web 😱

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@flamed @anders true! But the APIs you can use this do normalise it all, for example https://microlink.io

vanilla,
@vanilla@social.spicyweb.dev avatar

@DavidDarnes this is insanely great 🤩👏

davatron5000,
@davatron5000@mastodon.social avatar

@DavidDarnes I love this! I feel like between you and @zachleat we're finally getting closer to what 's full potential.

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@davatron5000 @zachleat thank you Dave! This is honestly high praise 😊

zachleat,
@zachleat@zachleat.com avatar

@DavidDarnes @davatron5000 which web component pokemon are you I call <grav-eler>

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@zachleat @davatron5000 <goblin-mode>

DavidDarnes,
@DavidDarnes@mastodon.design avatar

Boosts appreciated 🙏🏻

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • InstantRegret
  • ngwrru68w68
  • everett
  • mdbf
  • modclub
  • rosin
  • khanakhh
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • Youngstown
  • GTA5RPClips
  • slotface
  • kavyap
  • JUstTest
  • ethstaker
  • osvaldo12
  • normalnudes
  • tacticalgear
  • cisconetworking
  • cubers
  • Durango
  • Leos
  • anitta
  • tester
  • megavids
  • provamag3
  • lostlight
  • All magazines