search

delucis / astro-embed

Low-JavaScript embed components for Astro websites
https://astro-embed.netlify.app
MIT License
172 stars 25 forks source link

Support picking up query string based parameters for MDX integration #58

Open lloydjatkinson opened 10 months ago

lloydjatkinson commented 10 months ago

A nice to have would be turning MDX strings like this:

https://www.youtube.com/embed/PSGEjv3Tqo0?start=301

into this:

<lite-youtube videoid="PSGEjv3Tqo0" params="start=301">

Obviously the <YouTube /> component can be imported and used with all the params you want, but it would be a nice little bonus!

delucis commented 9 months ago

Makes sense! Pretty sure we could update the URL parsing to do that.

delucis commented 9 months ago

Just took a quick look and, while do-able, will need a little re-architecting to achieve.

Currently the system looks like this:

  1. URLs are tested with a matcher() (basically a regular expression that gives us the necessary ID or URL required for each platform).

  2. If a matcher returns an ID, we create a node for that component and pass it the ID.

Source code:

https://github.com/delucis/astro-embed/blob/30e8221a20cfc0c56e3c32c3b38a63a06bb4de3e/packages/astro-embed-integration/remark-plugin.ts#L18-L37

Matchers are “owned” by each service’s package, while the remark integration is generic — it just waits for a service to match the URL and then handles creating the component. So we’d want to update the contract so that matchers can return a props object I guess instead of just a string ID.