link-peek icon indicating copy to clipboard operation
link-peek copied to clipboard

Allow for global `api` attribute fallback

Open fimion opened this issue 10 months ago • 1 comments

Is your feature request related to a problem? Please describe.

With the current implementation, a user is required to provide an api attribute on each instance of link-peek. If someone needed to change the api call to be a different endpoint across an entire site, this would be a rather labor intensive process to do a search and replace.

Describe the solution you'd like

Add the ability to have a <meta name="link-peek-api" content="https://example.com/?${link}" /> tag defined in the head to specify a fallback value if no api attribute was specified. This will allow each link-peek instance to still call a separate api if needed, but we can also have a fallback defined globally.

Describe alternatives you've considered

An alternative to this would be a static attribute on the LinkPeek class that could be used in the same way. However, the class is not currently exported, and so this would not be usable in a module based import.

fimion avatar Apr 23 '24 13:04 fimion

This is a great point @fimion, and something that really bothered me during the development process. I think ideally I would've set up my own API endpoint using cloud functions to provide people with a nice default, however I don't quite have enough experience plus I'd be worried it would get hit so much I'd get hit with a big bill 😅.

Not sure I like the idea of the meta tag, it's a good one but I don't like polluting the HTML anymore than I already am. I'd probably prefer people use something like the following to apply the same API to all instances:

document.querySelectorAll("link-peek").forEach(peek => peek.setAttribute("api", "https://api.microlink.io/?url=${link}"));

Threw a demo together to show it working: https://codepen.io/daviddarnes/pen/yLrZgmv?editors=1011

daviddarnes avatar Apr 24 '24 08:04 daviddarnes