Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed Mastodon #210

Closed
xplosionmind opened this issue Oct 31, 2023 · 8 comments · Fixed by #307
Closed

Embed Mastodon #210

xplosionmind opened this issue Oct 31, 2023 · 8 comments · Fixed by #307
Labels
enhancement New feature or request

Comments

@xplosionmind
Copy link

It would be awesome if embedding Mastodon posts was supported!

@gfscott
Copy link
Owner

gfscott commented Oct 31, 2023

Definitely been thinking about this! I'd be curious how you'd want to handle URLs, since there are hundreds of Mastodon servers out there, each with their own URL.

At a minimum, I think you'd have to configure the URL of the server you use:

eleventyConfig.addPlugin(embedEverything, {
  mastodon: {
    options: {
      server: "mastodon.social"
    }
  }
});

But what happens if the toot post you want to embed originates on the social.vivaldi.net server? What URL do you paste? Apologies, I'm not a regular Mastodon user (yet!) and I haven't really researched this in any depth. But I'd like to know how you'd expect this to work in practice and how we can come up with the easiest workflow.

@gfscott gfscott added the enhancement New feature or request label Oct 31, 2023
@gfscott
Copy link
Owner

gfscott commented Nov 1, 2023

OK, did some quick and dirty research here:

  1. Made an account on social.vivaldi.net.
  2. Browsing that server, clicked through to a post that's federated from a different server:
    https://social.vivaldi.net/@[email protected]/111247893684188804
  3. Clicking the Embed option in the kebab menu, you get this iframe markup:
<iframe src="https://mastodon.archive.org/@internetarchive/111247884522639243/embed" width="400" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe>

So it seems like all the components we need to rebuild the original post URL are present (server, user handle, post ID) regardless of which server you're browsing from. So that bodes well!

I suppose edge cases could include:

  • Servers that have turned the embed feature off somehow? I guess you just get a 404 in the iframe in that case.
  • Anything else?

@xplosionmind
Copy link
Author

I believe that taking advantage of existing datasets of existing and active Mastodon instances and their characteristics could be very helpful!

Here is the first one I found, it seems very complete!

@gfscott
Copy link
Owner

gfscott commented Nov 2, 2023

(This is mostly me just making notes as I go, don't mind me)

So I spoke too soon on the post ID — a federated post that shows up on your server has a different ID from the originating server. From the example above:

Federated server ID Originating server ID
111247893684188804 111247884522639243

Knowing your server's post ID doesn't tell you anything about the original post's ID. Which is too bad. But there's an API, so we can get the required URL that way:

{
  "id": "111247893684188804",
  "created_at": "2023-10-17T02:00:03.000Z",
  // ...
  "url": "https://mastodon.archive.org/@internetarchive/111247884522639243",
  // ...
}

We can then use that URL to create the embed code. This is similar to how the Soundcloud plugin works, which requires calling an API to get the required embed data. That's why it's not enabled by default in all-in-one plugin, and I'd do the same here — you'd have to opt-in for Mastodon embeds (unless you use it standalone). This would be the minimum required configuration:

eleventyConfig.addPlugin(embedEverything, {
  add: ['mastodon'],
  mastodon: {
    options: {
      server: "<example.mastodon.server>"
    }
  }
});

I think that's a plan. Definitely doable, just a matter of carving out some time!

@xplosionmind
Copy link
Author

Hi @gfscott! Jumping back in wondering if there was any progress on this, and if I could help in any way!

@gfscott
Copy link
Owner

gfscott commented Jan 9, 2025

Apologies, no progress to report yet but appreciate the prod! I'll take another run at it.

@xplosionmind
Copy link
Author

This is great, @gfscott! Thank you ❤️🚀

@gfscott
Copy link
Owner

gfscott commented Feb 18, 2025

OK, package is now published — give it a try and let me know if you run into any issues!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants