Support picking up query string based parameters for MDX integration

[lloydjatkinson]

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]

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

[delucis]

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:

astro-embed/packages/astro-embed-integration/remark-plugin.ts

Lines 18 to 37 in 30e8221

	/**
	* Get the name of the embed component for this URL
	* @param {string} url URL to test
	* @returns Component node for this URL or undefined if none matched
	*/
	function getComponent(url: string) {
	for (const [matcher, componentName] of matchers) {
	const id = matcher(url);
	if (id) {
	// MDX custom component node.
	return {
	type: 'mdxJsxFlowElement',
	name: `${importNamespace}_${componentName}`,
	attributes: [{ type: 'mdxJsxAttribute', name: 'id', value: id }],
	children: [],
	};
	}
	}
	return undefined;
	}

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.