Codepen link in Readme ends up in Playgrounds

[james-rae]

Describe the bug

It appears that the playgrounds section (aka Try It Out in the right sidebar) will assume a Codepen link in the README body is a working sample for the library.

Probably easier to see it in action: https://npmx.dev/package/tragically-hipsum

The Codepen link being featured in Try It Out is not running the package at all. The url is in the Readme solely to give credit, as code from that pen was used for the project demo.

All considered, a minor glitch.

Additional context

No response

Logs

[maxchang3]

Good catch! Unfortunately, with the current implementation, any CodePen link included in the README will automatically be treated as a playground link and surfaced in the Try It Out section.

npmx.dev/server/utils/readme.ts

Lines 119 to 134 in ad2b174

	function matchPlaygroundProvider(url: string): PlaygroundProvider | null {
	try {
	const parsed = new URL(url)
	const hostname = parsed.hostname.toLowerCase()
	for (const provider of PLAYGROUND_PROVIDERS) {
	for (const domain of provider.domains) {
	if (
	(hostname === domain || hostname.endsWith(`.${domain}`)) &&
	(!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path)))
	) {
	return provider
	}
	}
	}
	} catch {

I guess since it's hard to reliably infer intent from plain README content, there isn’t a robust way to fix this purely on the parsing side. Improving this from the UI side (e.g., clearer labeling or affordances) is probably the more practical direction here.