diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 1bd1de1af2f..94a20211254 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -179,14 +179,63 @@ module.exports = function(eleventyConfig) { `.trim(); } + /** + * Encodes text in the base 64 format used in playground URL params. + * @param {string} text Text to be encoded to base 64. + * @see https://github.com/eslint/eslint.org/blob/1b2f2aabeac2955a076d61788da8a0008bca6fb6/src/playground/utils/unicode.js + * @returns {string} The base 64 encoded equivalent of the text. + */ + function encodeToBase64(text) { + /* global btoa -- It does exist, and is what the playground uses. */ + return btoa(unescape(encodeURIComponent(text))); + } + + /** + * Creates markdownItContainer settings for a playground-linked codeblock. + * @param {string} name Plugin name and class name to add to the code block. + * @returns {[string, object]} Plugin name and options for markdown-it. + */ + function withPlaygroundRender(name) { + return [ + name, + { + render(tokens, index) { + if (tokens[index].nesting !== 1) { + return ""; + } + + // See https://github.com/eslint/eslint.org/blob/ac38ab41f99b89a8798d374f74e2cce01171be8b/src/playground/App.js#L44 + const parserOptions = tokens[index].info?.split("correct ")[1]?.trim(); + const { content } = tokens[index + 1]; + const state = encodeToBase64( + JSON.stringify({ + ...(parserOptions && { options: { parserOptions: JSON.parse(parserOptions) } }), + text: content + }) + ); + const prefix = process.env.CONTEXT && process.env.CONTEXT !== "deploy-preview" + ? "" + : "https://eslint.org"; + + return ` +
+ + Open in Playground + + `.trim(); + } + } + ]; + } + const markdownIt = require("markdown-it"); const md = markdownIt({ html: true, linkify: true, typographer: true, highlight: (str, lang) => highlighter(md, str, lang) }) .use(markdownItAnchor, { slugify: s => slug(s) }) .use(markdownItContainer, "img-container", {}) - .use(markdownItContainer, "correct", {}) - .use(markdownItContainer, "incorrect", {}) + .use(markdownItContainer, ...withPlaygroundRender("correct")) + .use(markdownItContainer, ...withPlaygroundRender("incorrect")) .use(markdownItContainer, "warning", { render(tokens, idx) { return generateAlertMarkup("warning", tokens, idx); diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js index bf3268266f4..80168a136c9 100644 --- a/docs/src/assets/js/main.js +++ b/docs/src/assets/js/main.js @@ -192,24 +192,6 @@ } })(); -// add "Open in Playground" button to code blocks -// (function() { -// let blocks = document.querySelectorAll('pre[class*="language-"]'); -// if (blocks) { -// blocks.forEach(function(block) { -// let button = document.createElement("a"); -// button.classList.add('c-btn--playground'); -// button.classList.add('c-btn'); -// button.classList.add('c-btn--secondary'); -// button.setAttribute("href", "#"); -// button.innerText = "Open in Playground"; -// block.appendChild(button); -// }); -// } -// })(); - - - // add utilities var util = { keyCodes: { diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss index ee40123891d..98d6de83d45 100644 --- a/docs/src/assets/scss/docs.scss +++ b/docs/src/assets/scss/docs.scss @@ -142,13 +142,14 @@ pre[class*="language-"] { .c-btn.c-btn--playground { position: absolute; font-size: var(--step--1); - bottom: 0.5rem; - right: 0.5rem; + bottom: -1rem; + right: 1rem; offset-block-end: 0.5rem; offset-inline-end: 0.5rem; + z-index: 1; - @media all and (max-width: 768px) { - display: none; + @media all and (min-width: 768px) { + bottom: 1.5rem; } } diff --git a/docs/src/rules/no-implicit-globals.md b/docs/src/rules/no-implicit-globals.md index 1e5c5fad723..6a479a0a765 100644 --- a/docs/src/rules/no-implicit-globals.md +++ b/docs/src/rules/no-implicit-globals.md @@ -44,7 +44,7 @@ This rule disallows `var` and `function` declarations at the top-level script sc Examples of **incorrect** code for this rule: -::: incorrect +::: incorrect { "sourceType": "script" } ```js /*eslint no-implicit-globals: "error"*/ @@ -58,7 +58,7 @@ function bar() {} Examples of **correct** code for this rule: -::: correct +::: correct { "sourceType": "script" } ```js /*eslint no-implicit-globals: "error"*/ @@ -79,7 +79,7 @@ window.bar = function() {}; Examples of **correct** code for this rule with `"parserOptions": { "sourceType": "module" }` in the ESLint configuration: -::: correct +::: correct { "sourceType": "script" } ```js /*eslint no-implicit-globals: "error"*/ @@ -100,7 +100,7 @@ This does not apply to ES modules since the module code is implicitly in `strict Examples of **incorrect** code for this rule: -::: incorrect +::: incorrect { "sourceType": "script" } ```js /*eslint no-implicit-globals: "error"*/ @@ -127,7 +127,7 @@ or in a `/*global */` comment. Examples of **incorrect** code for this rule: -::: incorrect +::: incorrect { "sourceType": "script" } ```js /*eslint no-implicit-globals: "error"*/ @@ -155,7 +155,7 @@ If the variable is intended to be local to the script, wrap the code with a bloc Examples of **correct** code for this rule with `"lexicalBindings"` option set to `false` (default): -::: correct +::: correct { "sourceType": "script" } ```js /*eslint no-implicit-globals: ["error", {"lexicalBindings": false}]*/ @@ -171,7 +171,7 @@ class Bar {} Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`: -::: incorrect +::: incorrect { "sourceType": "script" } ```js /*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ @@ -187,7 +187,7 @@ class Bar {} Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`: -::: correct +::: correct { "sourceType": "script" } ```js /*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ @@ -221,7 +221,7 @@ Even the `typeof` check is not safe from TDZ reference exceptions. Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`: -::: incorrect +::: incorrect { "sourceType": "script" } ```js /*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ @@ -239,7 +239,7 @@ const MyGlobalFunction = (function() { Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`: -::: correct +::: correct { "sourceType": "script" } ```js /*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/ @@ -261,7 +261,7 @@ You can use `/* exported variableName */` block comments in the same way as in [ Examples of **correct** code for `/* exported variableName */` operation: -::: correct +::: correct { "sourceType": "script" } ```js /* exported global_var */ diff --git a/docs/src/rules/no-restricted-imports.md b/docs/src/rules/no-restricted-imports.md index ece0ceb5490..9040170ed13 100644 --- a/docs/src/rules/no-restricted-imports.md +++ b/docs/src/rules/no-restricted-imports.md @@ -130,7 +130,7 @@ To restrict the use of all Node.js core imports (via