search

dbmdz / mirador-canvaslink

Canvas Link plugin for Mirador 3
MIT License
5 stars 1 forks source link

Apply URL encoding to social media links #65

Open D-Groenewegen opened 2 years ago

D-Groenewegen commented 2 years ago

I noticed that the URLs fed to the Twitter links in the CanvasLink and ImageCropper plugins may not appear correctly.

Because Twitter links are in the format https://twitter.com/intent?text=...&url=...&hashtags=..., any URL search parameters that occur after ampersands (I append &manifest= and &canvas= myself) will be disregarded. It probably wouldn't hurt to escape the ampersands (src/components/utils.js).

Same thing for Facebook and Pinterest, though I'm not sure about the Whatsapp and email links.

Edit: this is proving to be harder than I imagined. The nesting of a URL within a URL within a URL, mad as it sounds, is not necessarily the problem here, but I just don't know how to replace the ampersands in utils.js. Neither encodeURI() nor encodeURIComponent() is helpful. I tried percent-encoding to %26, which works when testing Twitter links directly, but somewhere along the way the percent symbol itself gets encoded to %25, so I ended up with %2526 rather than %26.

D-Groenewegen commented 2 years ago

I think I found a solution even though I'm wary of recommending it as a general one for everyone - I will leave that in your expert hands. What worked out for me, at least in the case of the Twitter, Facebook and Pinterest links, is the following:

  1. Edit src/components/utils.js and replace {imageUrl} with encodeURIComponent({imageUrl})
  2. Edit src/components/ShareButton.js and replace href: encodeURI(link) with plain href: link. (The double encoding I experienced above was of course due to encodeURI(). )