Support for remark-embedder

[sjwaight]

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

When migrating from another platform which support embeds (Wordpress) I was surprised by the lack of embed support out-of-the-box. I'm not a JavaScript developer and have spent a few hours trying to noodle my way through adding remark-embedder and transformer-oembed to no avail.

Describe the solution you'd like It would be fantastic if these were included in the source already, even if commented out.

Describe alternatives you've considered I've tried hacking away at it myself... but haven't succeeded.

Additional context This is a great project and I'm pleased I found it!

[timlrx]

No plans to add it currently, but if it gets a lot of upvotes - maybe we can consider.

[lucavallin]

@timlrx I upvote this one. I'd like to have something like they do on Hashnode with %[https://github.com/lucavallin/first-issue] which renders to:

:)

[timlrx]

@lucavallin well noted!

Creating something similar to Hashnode is more complicated than remark-embedder, but I can see giving the user more control over where and what to embed to be pretty powerful. It also requires a new syntax %[], which sort of strays one step further from GFM. Maybe the syntax should first be supported by Github and it would naturally find its way to the remark-gfm package :)

On further research it seems like Hashnode uses a custom API to allow the embed functionality - https://github.com/Hashnode/webembeds/blob/master/packages/webembeds-website/pages/api/embed.ts. Webembeds core has a bunch of providers. If we modify the requirements to construct the preview at build time (it might be outdated) instead of when the user lands on the page, we could possibly drop the API component.

I could possibly create a new remark package that does this - i.e. parse the %[] syntax and embed those links based on the Webemed's providers... maybe as a weekend project? The benefit of this approach is that it's a simple remark plugin with no additional configuration required. No guarantees that it would be this weekend though haha

[timlrx]

Actually making it run on the browser side could be a good approach as well... or we can even make it an isomorphic package where you can choose your preferred approach. To implement the client side approach, there would have to be bunch of re-write done to Webembeds as it uses cheerio which only runs on the server. Maybe I can turn to remark-embedder over there for inspiration.

[timlrx]

@sjwaight @lucavallin new package is out - Remark Webembed (npm, github)!

I decided to go with markdown directives instead of introducing a new syntax. To embed a youtube video, you can just do this:

# Hello World
::embed[https://www.youtube.com/watch?v=32I0Qso4sDg]

Compared to remark-embedder, you do not need to write custom code to transform the nodes or insert HTML. The plugin handles it and creates a wrapper div to make the iframe responsive - though let me know if you encounter any edge cases. The plugin runs on the server and browser (though you might encounter CORS issues, depending on the oembed provider API).

You would need to add remark-directive before using this plugin. It supports all oembed and custom components (currently only Github Gist but I would probably try to port all providers from Hashnode over the next few days).

[sjwaight]

I am guessing this is only in the new release?

[timlrx]

I am guessing this is only in the new release?

Nope, it is a generic remark package and should work with mdx-next-remote, mdx-bundler, contentlayer etc. Just add remark-directive and the new plugin (remark-webembed) to the list of remarkPlugins