docs: add playground links to correct and incorrect code blocks

[JoshuaKGoldberg]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

What changes did you make? (Give an overview)

Adds a markdown-it-container render method for :::correct and :::incorrect blocks that adds a playground link. That link is hidden when not focused or hovered.

Is there anything you'd like reviewers to focus on?

• Is this a visual design that brings you joy?
• From Suggestion: add a quick-link that allows you to open a rule in the playground #17018 (comment) - specifying parser options & other important rule bits

[github-actions]

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

[Rec0iL99]

Not stale. @mdjermanovic there is a comment for you to look into #17306 (comment). Thanks.

[mdjermanovic]

I'll close-reopen to see if that will now generate a preview.

[mdjermanovic]

It didn't trigger a preview. Perhaps it will appear after the next commit.

[harish-sethuraman]

Im guessing its because its still in draft? may be moving out of draft will generate a preview?

[mdjermanovic]

Im guessing its because its still in draft? may be moving out of draft will generate a preview?

I think it creates previews for drafts, for example: #17053

I'd expect the preview to appear after the next commit, but we'll see.

[mdjermanovic]

As for the visual design, per #17018 (comment) it seems we already have some styles prepared:

eslint/docs/src/assets/js/main.js

Lines 201 to 203 in cdd063c

	// button.classList.add('c-btn--playground');
	// button.classList.add('c-btn');
	// button.classList.add('c-btn--secondary');

[netlify]

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	538ec30
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/64aed66ab64cf500080119fa
😎 Deploy Preview	https://deploy-preview-17306--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[JoshuaKGoldberg]

This would be an accessibility issue. Users on less-wide screens, such as mobile phones and zoomed-in desktop displays, still would want to be able to access the Open in Playground button.

[mdjermanovic]

For this, I'll have to ask @nzakas what the original intention was.

The Playground is quite good on small screens, but this button is very likely to cover the code:

Though that can happen on wider screens too, depending on the text. Perhaps the button should be below the code block?

[JoshuaKGoldberg]

I like the idea of moving the button below in mobile screens, yeah. Will wait to implement until directed to 👍

[nzakas]

Yeah, the intent was that smaller screens (mobile) would probably not want to use the playground as it's a bit clunky without a keyboard.

However, I'm not opposed to moving the button underneath the code block. That seems like a nice compromise to keep the functionality available without disrupting the UI too much.

[JoshuaKGoldberg]

Super, that's two votes in favor - I had a 💡 moment and moved the button to be half overlapping, half under the code block. That way it takes up much less vertical space and doesn't overlap lines of code.

[JoshuaKGoldberg]

Note that this hits what looks like an existing bug in the playground: eslint/eslint.org#450. My intuition is that it'd be better to fix the bug there and allow smaller URLs, rather than backfill in playground-specific default information here.

[kecrily]

Maybe we can make this configuration as the default value to reduce duplicate definitions?

[JoshuaKGoldberg]

Amusingly, right now there are exactly equal amounts of manual "sourceType": "module" as "sourceType": "script".

eslint/docs/src/rules/no-implicit-globals.md
  61,1: ::: correct { "parserOptions": { "sourceType": "script" } }
  82,1: ::: correct { "parserOptions": { "sourceType": "script" } }
  158,1: ::: correct { "parserOptions": { "sourceType": "script" } }
  190,1: ::: correct { "parserOptions": { "sourceType": "script" } }
  242,1: ::: correct { "parserOptions": { "sourceType": "script" } }
  264,1: ::: correct { "parserOptions": { "sourceType": "script" } }

eslint/docs/src/rules/no-restricted-imports.md
  271,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  282,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  294,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  304,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  318,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  331,1: ::: correct { "parserOptions": { "sourceType": "module" } }
  344,1: ::: correct { "parserOptions": { "sourceType": "module" } }

...and a few more incorrects with "module":

eslint/docs/src/rules/no-implicit-globals.md
  47,1: ::: incorrect { "parserOptions": { "sourceType": "script" } }
  103,1: ::: incorrect { "parserOptions": { "sourceType": "script" } }
  130,1: ::: incorrect { "parserOptions": { "sourceType": "script" } }
  174,1: ::: incorrect { "parserOptions": { "sourceType": "script" } }
  224,1: ::: incorrect { "parserOptions": { "sourceType": "script" } }

eslint/docs/src/rules/no-restricted-imports.md
  133,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  143,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  153,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  163,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  173,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  183,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  197,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  215,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  229,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  242,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }
  255,1: ::: incorrect { "parserOptions": { "sourceType": "module" } }

[JoshuaKGoldberg]

Ah, looking at https://github.com/eslint/eslint.org/pull/451/files#r1257245140, sourceType: "script" is the default in the playground & we can go with that!

[nzakas]

Thanks so much for doing this!

The one thing I'd like to change is to remove the blue arrow to the right of "Open in Playground". Because it always appears inside of code blocks with a big red X or big green checkmark, this is creating a visually busy area on the right. I think the button and text alone will suffice.

[nzakas]

Some visual stuff:

1. When there's a horizontal scrollbar the button is very tight against it vertically. Can we add a bit of padding?
2. Let's remove that arrow icon. :)

[harish-sethuraman]

While on mobile this open in playground seems to be very near to the code. Just wanted to confirm on that alone.
Other than that everything else LGTM.

[JoshuaKGoldberg]

very near to the code

Yeah. I was torn on this - on the one hand, I didn't want to (nearly/slightly) overlap the code. But on the other hand, I didn't want to add extra vertical space below the code block that increased the overall height of the page...

[harish-sethuraman]

LGTM 👍🏻

note: move eslint/eslint.org#451 to prod before this

[nzakas]

This is looking pretty good overall. I think we may want to tweak it further for mobile browsers, but this is a good first step that we can iterate on in the future.

[nzakas]

Thanks @JoshuaKGoldberg for doing this and sorting through the playground issues.