Replace {{anch}} macro with Markdown links

[queengooborg]

This PR is a continuation off of #13347. This PR replaces all of the calls to the {{arch}} macro with Markdown links, using a simple find-and-replace script. This will allow us to remove the macro from MDN entirely. The script takes into account the second variable passed in as display text as well.

Script used:

import {promises as fs} from "fs";
import path from "path";

// https://gist.github.com/lovasoa/8691344
async function* walk(dir) {
	for await (const d of await fs.opendir(dir)) {
		const entry = path.join(dir, d.name);
		if (d.isDirectory()) yield* walk(entry);
		else if (d.isFile() && d.name != ".DS_Store") yield entry;
	}
}
// END SNIPPET

const re = /([\w"]+>[\w\s]*)?(`)?(?<!\\){{anch\("([^"]*)"(?:, "([^"]*)")?\)}}(?:`)?/g;

const main = async () => {
	for await (const p of walk((`${process.env.HOME}/Developer/Gooborg/mdn-content/files`))) {
		const isHTMLFile = p.endsWith('.html');
		let contents = await fs.readFile(p, 'utf-8');
		let changed = false;

		const matches = [...contents.matchAll(re)];
		for (const match of matches) {
			const isHTML = isHTMLFile || !!match[1];

			let text = match[4] || match[3];
			if (match[2]) text = isHTML ? `<code>${text}</code>` : `\`${text}\``;
			const link = match[3]
				.replace(/\n\//g, '')
				.replace(/[\s\(\)]/g, '_')
				.replace(/_+/g, '_')
				.toLowerCase();
			const anchor = isHTML ? `<a href="#${link}">${text}</a>` : `[${text}](#${link})`;

			changed = true;
			contents = contents.replace(match[0], (match[1] || '') + anchor);
		}

		if (changed) {
			await fs.writeFile(p, contents);
		}
	}
}

await main();

Notice: this is definitely a big PR, and I'm happy to split into smaller chunks if desired.

[wbamberg]

Very nice work! Thanks @queengooborg !

Lots of comments but really only a few categories:

• usages that need to be HTML links, either because the whole page is HTML (devtools) or because the containing element is an HTML table (including the HTML <input> elements, but some other cases too). Ideally we could convert these usages into HTML links.

• usages that are broken, but the original was broken too because anch didn't properly slugify links (e.g. not replacing things like "/" or "()"). It would be good to fix these while we are here.

• usages that are broken, but the original was broken too because of some weird line formatting thing.

• usages like `{{anch(...)}}`, where we we end up with a Markdown link inside a Markdown code element, which doesn't work. Lots of these in <input> elements, and a few in other places.

Ideally I would love it if these updates could only change the files that need to be updated, rather than update the script and redo them all. That way I don't have to re-review all the changes again.

[wbamberg]

Doesn't work but didn't before either.

[queengooborg]

Thank you both for reviewing! I've updated the script and re-ran it, pushing updates in a way that won't clear the review status on all the unaffected files. I'm avoiding any manual fixes for the time being, such as already-bad anchors, to keep the changeset as small as possible.

[wbamberg]

Thanks the the updates! Mostly good now.

• I think we should just leave the meta-doc at https://pr13802.content.dev.mdn.mozit.cloud/en-US/docs/MDN/Structures/Macros/Commonly-used_macros#links_to_in-page_sections untouched and deal with it in Remove meta-docs for {{anch}} macro #13814, don't you?
• it looks like the script that fixes old broken anchors has a bug: I made some suggested fixes.

[rebloor]

Again, looks okay for the web extension content.

[wbamberg]

Just one more left that I can see.

[wbamberg]

lgtm, great work @queengooborg !