Lint rule docs: link to playground with rule enabled?

[JoshuaKGoldberg]

One of the best parts of having an online playground like https://playground.oxc.rs is being able to quickly check how a lint rule behaves. It'd be nice if each lint rule's docs linked to the playground configured to have just that rule enabled. Would you be open to adding this to rule docs?

Example:

• Lint rule page: https://oxc.rs/docs/guide/usage/linter/rules/typescript/prefer-namespace-keyword
• Playground target: https://playground.oxc.rs/?lintRules=typescript%2Fprefer-namespace-keyword&code=%2F%2F+...

A nice followup / "bonus" feature would be to have each rule docs page example link to the equivalent code (and rule options, if configured) in the playground.

• "Incorrect" example: https://oxc.rs/docs/guide/usage/linter/rules/typescript/prefer-namespace-keyword.html#examples
• Playground target: https://playground.oxc.rs/?lintRules=typescript%2Fprefer-namespace-keyword&code=module+Example+%7B%7D

For reference, typescript-eslint rule docs such as https://typescript-eslint.io/rules/prefer-namespace-keyword do both of those. See that page's "Try this rule in the playground" and "Open in Playground" links.

[connorshea]

This should be pretty easy to add, I think it makes sense! Though tsgolint rules can't be used in the playground currently.

[connorshea]

This may be a good excuse to replace the bottom part of the generated rule docs with a static Vue component, otherwise we'd need to update the oxc website generator to generate these for us... I think it'd be good to make the How to Use and Rule Source sections fully controlled on the website side of things

[connorshea]

I have partially implemented this now with #1010, updating the invalid code blocks will be a more complicated endeavor.