Add Mastodon support#140
Conversation
We want to ignore `demo/.astro/settings.json` containing the last update check date
🦋 Changeset detectedLatest commit: 05c5288 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| // Thanks to eleventy-plugin-embed-mastodon | ||
| // https://github.com/inframanufaktur/eleventy-plugin-embed-mastodon/blob/f8c1687abf1f88a6351e53e38f91aff0c95a5cb2/.eleventy.js#L46-L47 | ||
| const urlPattern = | ||
| /(?:https:\/\/)?([\w\d-]*?.?[\w\d-]*.[a-z]*\/@[\w\d_]*(?:@[\w\d]*?.?[\w\d]*.[a-z]*)?\/)(\d*)/; |
There was a problem hiding this comment.
I was wondering about how this would work given there are theoretically unlimited Mastodon domain names.
Feels really tricky. For example, https://www.youtube.com/@astrodotbuild/ matches this regular expression, but is not a toot. And I guess there are likely other sites adopting this @username style of URL.
Do you know if there’s a reason for the \d portion at the end here to be optional? I’d guess \d+ instead of \d* would at least mean you get slightly less false positives.
(None of this is relevant to the component version, but it is in the integration usage where in theory this pattern might “steal” a match from something else.)
There was a problem hiding this comment.
Good call. I updated the regex to enforce the last digit altho like you said, it's a bit tricky in this case. May need to think about it more but the only ideas that are coming to mind right now are not having Toot enabled as a service by default with an explanation in the docs or just not supporting Mastodon in the integration. Both of which are not ideal but the fact that the domain can be anything is a bit complex to handle I guess in this case.
There was a problem hiding this comment.
Going to try leaving it enabled and see if it causes issues for people using the integration. The /@handle/<numeric-id> pattern is not so common either, so maybe it will be OK. If not, we could potentially explore supporting something like an “allowed domains” array for Mastodon hosts where people opt in to the origins they want to support parsing as Mastodon post URLs.
In less than 1 week, the user I found with an emoji in their username (and these are difficult to find) already removed it making the test fail.
✅ Deploy Preview for astro-embed ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
I guess this post no longer provided an embed image since the test was originally written
There was a problem hiding this comment.
Thanks again for kicking this off so many many moons ago and apologies it took so long to resolve.
I rebuilt the component to look very close to what Mastodon itself offers when using its <iframe> embed, updating it to support multiple media items and quote posts, which are new since this PR was opened.
I decided to take the same approach as the <BaselineStatus> component, which uses declarative <template shadowrootmode="open"> to isolate the component from the site styles, exposing styling hooks via ::part() and custom properties. This should make it fairly robust while sacrificing some flexibility. I guess most people want something that does the basics quickly, so hopefully it’s a reasonable compromise.
One other drawback is that declarative shadow DOM isn’t supported by the testing infra, so we’ll need some follow-up work after this PR to bring back testing. I tested extensively with the demo project though, so should be OK.
Figure out if we want to support loading Mastodon's JavaScript like Twitter
I think we don’t need to. Twitter is a special case because it offers such limited access to data, so we can only do a bare minimum with the unstructured HTML they return. In this case, we can offer a pretty rich experience thanks to the structured data the API returns. I’ve matched the official embed very closely, only skipping things like comment/favourite/repost counts that may be more time sensitiv, and choosing to show the date as a day rather than a local timestamp.
So with that, I’ll approve and get this released for people to try out. Thanks again @HiDeoo! 🌟
|
Wow, I totally forgot about this PR until now. It looks like you had quite a lot of work to do to get this shipped, sorry about that, you should have pinged me. I'll take a look later at your changes, but based on your description it sounds great 👏 Thanks a lot for picking this up again 🙌 |
2 participants
Description
This PR adds support for embedding posts from Mastodon.
The content is fetched using the Mastodon API as discussed due to the fact that the Mastodon oEmbed API only returns an
iframeand ascripttag.It currently supports the following feature:
image,video,gifvandaudiomedia attachmentsThe PR is a draft as it still needs some work to be done and some questions to be answered:
iframewith themastodon-embedclass