diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 5a156c21101..01b9c96aaba 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -195,7 +195,12 @@ module.exports = function(eleventyConfig) { // markdown-it plugin options for playground-linked code blocks in rule examples. const ruleExampleOptions = markdownItRuleExample({ - open(type, code, parserOptions) { + open({ type, code, parserOptions, env }) { + const isRuleRemoved = !Object.prototype.hasOwnProperty.call(env.rules_meta, env.title); + + if (isRuleRemoved) { + return `
`; + } // See https://github.com/eslint/eslint.org/blob/ac38ab41f99b89a8798d374f74e2cce01171be8b/src/playground/App.js#L44 const state = encodeToBase64( diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss index a59742475da..e981d8cc6af 100644 --- a/docs/src/assets/scss/docs.scss +++ b/docs/src/assets/scss/docs.scss @@ -113,7 +113,8 @@ div.incorrect { offset-block-start: -22px; } - pre.line-numbers-mode { + // Add space to the bottom if there is a Playground button. + .c-btn.c-btn--playground ~ pre.line-numbers-mode { padding-bottom: 4.5rem; } } diff --git a/docs/tools/markdown-it-rule-example.js b/docs/tools/markdown-it-rule-example.js index 232971879c6..efe8ab90529 100644 --- a/docs/tools/markdown-it-rule-example.js +++ b/docs/tools/markdown-it-rule-example.js @@ -5,10 +5,12 @@ /** * A callback function to handle the opening of container blocks. * @callback OpenHandler - * @param {"correct" | "incorrect"} type The type of the example. - * @param {string} code The example code. - * @param {ParserOptions} parserOptions The parser options to be passed to the Playground. - * @param {Object} codeBlockToken The `markdown-it` token for the code block inside the container. + * @param {Object} data Callback data. + * @param {"correct" | "incorrect"} data.type The type of the example. + * @param {string} data.code The example code. + * @param {ParserOptions} data.parserOptions The parser options to be passed to the Playground. + * @param {Object} data.codeBlockToken The `markdown-it` token for the code block inside the container. + * @param {Object} data.env Additional Eleventy metadata, if available. * @returns {string | undefined} If a text is returned, it will be appended to the rendered output * of `markdown-it`. */ @@ -43,7 +45,7 @@ * * markdownIt() * .use(markdownItContainer, "rule-example", markdownItRuleExample({ - * open(type, code, parserOptions, codeBlockToken) { + * open({ type, code, parserOptions, codeBlockToken, env }) { * // do something * } * close() { @@ -58,7 +60,7 @@ function markdownItRuleExample({ open, close }) { validate(info) { return /^\s*(?:in)?correct(?!\S)/u.test(info); }, - render(tokens, index) { + render(tokens, index, options, env) { const tagToken = tokens[index]; if (tagToken.nesting < 0) { @@ -77,7 +79,7 @@ function markdownItRuleExample({ open, close }) { .replace(/\n$/u, "") .replace(/⏎(?=\n)/gu, ""); - const text = open(type, code, parserOptions, codeBlockToken); + const text = open({ type, code, parserOptions, codeBlockToken, env }); // Return an empty string to avoid appending unexpected text to the output. return typeof text === "string" ? text : ""; diff --git a/tools/check-rule-examples.js b/tools/check-rule-examples.js index bf8c44b3a7f..d4df4ef9cfb 100644 --- a/tools/check-rule-examples.js +++ b/tools/check-rule-examples.js @@ -50,7 +50,7 @@ async function findProblems(filename) { const text = await readFile(filename, "UTF-8"); const problems = []; const ruleExampleOptions = markdownItRuleExample({ - open(type, code, parserOptions, codeBlockToken) { + open({ code, parserOptions, codeBlockToken }) { const languageTag = codeBlockToken.info; if (!STANDARD_LANGUAGE_TAGS.has(languageTag)) {