Website: Consider aligning to eslint.org 'Open in Website'

[JoshuaKGoldberg]

Before You File a Documentation Request Please Confirm You Have Done The Following...

• I have looked for existing open or closed documentation requests that match my proposal.
• I have read the FAQ and my problem is not listed.

Suggested Changes

eslint/eslint#17018 -> eslint/eslint#17306 added playground links to correct and incorrect code blocks in the ESLint playground. The design the ESLint team asked for is different from ours:

• We (typescript-eslint.io) have a single Try this rule in the playground ↗ link on a rules page, floating underneath the config example
• eslint.org instead has an Open in Playground link in the bottom-right of each rule (in)correct code snippet

I very much like how the eslint.org approach lets users directly try out code snippets (thanks @nzakas! ref: eslint/eslint#17018 (comment)). How about we add the same type to our website?

I'm actually leaning towards keeping the existing Try this rule in the playground ↗ link -perhaps de-emphasizing it visually- so that folks still get the link above the fold & in a consistent location.

Affected URL(s)

https://typescript-eslint.io/rules/*

[bradzacher]

I very much like how the eslint.org approach lets users directly try out code snippets

That was actually my original thought with the feature - but as a v0 opening the playground with the rule configured was "good enough".

[bradzacher]

Slightly off-topic but one other feature I'd love: interactive examples.

For example the Vue plugin embeds Monaco for each example!
https://eslint.vuejs.org/rules/multi-word-component-names.html

A lighter thought was maybe we do something like twoslash and pre-calculate the errors to render statically for each example.

[nzakas]

Slightly off-topic but one other feature I'd love: interactive examples.

This was actually how we envisioned the rules documentation working but we ran out of time so designed a fallback with "Open in Playground".