make it embeddable

[smeijer]

How awesome would it be if we had an embed-mode, so users can embed the playground in the blogs they write about testing / testing-library?

---

Resources:

• https://twitter.com/edouardr_/status/1264474482116354048?s=19

[MichaelDeBoey]

Let me know whenever this is possible, so I can add it as a built-in transformer for gatsby-rark-embedder 👊

[smeijer]

@MichaelDeBoey, do you have idea's about how it should look? What kind of functionality you would want in embed mode?

[MichaelDeBoey]

@smeijer If you look at @codesandbox or @codepen, you see it's always a miniature version of the real app.

They're both providing an oembed endpoint, which returns an object with an html key that has the embeddable iframe.

[smeijer]

Thanks, I have something to read tomorrow 👍 Never heard of oembed before.

[smeijer]

@MichaelDeBoey , embed mode is almost done. But I'm not sure how soon I will have oembed implemented. As that requires a server side (beyond static hosting), I need to figure a few things out.

Maybe it's possible via netlify functions, but I've never worked with those before.

Preview can be seen here: https://codepen.io/smeijer/pen/yLYWZmK

[smeijer]

Been working a bit more on it, I don't think that oembed will be that hard after all :)

[MichaelDeBoey]

@smeijer It really looks nice!
This would be something entirely inside of an iframe I think?

[smeijer]

@MichaelDeBoey , embeddable is done!

We support oembed as well as "custom" embed:

The custom embedding can be seen here:

https://codepen.io/smeijer/pen/yLYWZmK?editors=1000

The oembed isn't really visible yet, as I don't know of any oembed validators that can render the thing without requiring a submission first, but it passes the embed.ly validator:

[smeijer]

To answer your question, yes, it renders the thing in an iframe. It would be possible to render it in a div instead though. Would that be preferable?

The reason I used an iframe is because the playground contains user-generated HTML. So if we would render it in a div, then there might be id-attribute collisions.

[MichaelDeBoey]

@smeijer Providing an iframe is perfect for me! 👊

I'll check it out later today and I'll let you know if I need some extra info or I think something isn't working like it should be 😉

[smeijer]

Please let me know when you have something working as well 😇 , can't wait to see it in action.

[MichaelDeBoey]

I've created MichaelDeBoey/gatsby-remark-embedder#123 with the reason to drop it soon 😉

[MichaelDeBoey]

@smeijer If you wanna take a go on it yourself btw, it can be yours 😉

[smeijer]

Do you know how to get iframely to render the embedded thing?

I know that for embed.ly we must submit an application. But I can't find anything for iframely.

@smeijer If you wanna take a go on it yourself btw, it can be yours

I can take a look. But don't wait for me if you can do it faster.

[MichaelDeBoey]

Do you know how to get iframely to render the embedded thing?

I haven't worked with iframely yet, so would have to look it up myself.

I can take a look. But don't wait for me if you can do it faster.

I can probably do it faster, but I like to help people getting into the plugin.
So if you want, be my guest 😉

[smeijer]

Not really, I have plenty of other things to do. So if you can do that, it would be much appreciated.

I've just completed the application at embed.ly. Let's see how that goes.

[MichaelDeBoey]

Gonna eat and I'll create a PR for Testing Playground support 🙂

[smeijer]

Support Request is running for iframely.

[smeijer]

we're whitelisted on iframely!

[MichaelDeBoey]

Wooohooo!! 🎉🎉🎉