🐛 Bug: Allowed DOM elements and attributes less permissive than npm

[JoshuaKGoldberg]

I noted this on the Discord (https://discord.com/channels/1464542801676206113/1464926468751753269/1466189688338518016): all my repos have fancy centered text and floating images that aren't (yet?) supported.

https://www.npmjs.com/package/create-typescript-app	https://npmx.dev/package/create-typescript-app

@danielroe sent a link to:

npmx.dev/server/utils/readme.ts

Lines 139 to 155 in 88e5b89

	const ALLOWED_ATTR: Record<string, string[]> = {
	a: ['href', 'title', 'target', 'rel'],
	img: ['src', 'alt', 'title', 'width', 'height'],
	source: ['src', 'srcset', 'type', 'media'],
	th: ['colspan', 'rowspan', 'align'],
	td: ['colspan', 'rowspan', 'align'],
	h3: ['id', 'data-level'],
	h4: ['id', 'data-level'],
	h5: ['id', 'data-level'],
	h6: ['id', 'data-level'],
	blockquote: ['data-callout'],
	details: ['open'],
	code: ['class'],
	pre: ['class', 'style'],
	span: ['class', 'style'],
	div: ['class', 'style', 'align'],
	}

I'll send a PR in a moment, just filing this issue for easier tracking. 🙂 It's more work than I'd hoped!

[JoshuaKGoldberg]

Well, I poked around at this and it's harder than I thought. The create-typescript-app README uses inline HTML:

<h1 align="center">...</h1>

...whereas the current npmx logic is in the marked.Renderer, which deals only with #-style Markdown headings:

npmx.dev/server/utils/readme.ts

Lines 295 to 300 in 18bcb8a

	// Track heading hierarchy to ensure sequential order for accessibility
	// Page h1 = package name, h2 = "Readme" section heading
	// So README starts at h3, and we ensure no levels are skipped
	// Visual styling preserved via data-level attribute (original depth)
	let lastSemanticLevel = 2 // Start after h2 (the "Readme" section heading)
	renderer.heading = function ({ tokens, depth }: Tokens.Heading) {

I think readme.md / renderReadmeHtml would need to be refactored a good bit to get those two intermixed. But maybe I'm wrong? I'm new here 😅

[alexdln]

Hi @JoshuaKGoldberg. Similar issues were fixed in #886, but It seems like this issue was created later. Could you please tell - is the bug still exists?

[alexdln]

I couldn't find any differences now. If the problem still exists for any other packages besides the example, please feel free to reopen it

Thanks for the issue with package example 🩵

[JoshuaKGoldberg]

@alexdln the "create-typescript-app" h1 visible in your screenshots is plain next on npmx but a full heading on npmjs. This is what I was talking about in #1093 (comment).

I don't have permissions to reopen, but maybe this should be a dedicated issue for unified html/markdown heading support?

[alexdln]

Oh, I see, thanks for clarifying

We rather deliberately excluded this element, as 2 h1-s are bad for both A11Y and SEO, but the styles should be retained for sure. It might be better to make it h2, but with the styles from h1

I'll look into it

[JoshuaKGoldberg]

❤️ beautiful, thank you!