docs: remove "Open in Playground" buttons for removed rules (#17791)

fasttime · web-flow · commit fffca5c362bc · 2023-11-26T22:46:36.000+01:00
diff --git 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 `<div class="${type}">`;
+            }
 
             // 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
@@ -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
@@ -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
@@ -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)) {

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,8 @@ div.incorrect {`
`113`	`113`	`offset-block-start: -22px;`
`114`	`114`	`}`
`115`	`115`
`116`		`- pre.line-numbers-mode {`
	`116`	`+ // Add space to the bottom if there is a Playground button.`
	`117`	`+ .c-btn.c-btn--playground ~ pre.line-numbers-mode {`
`117`	`118`	`padding-bottom: 4.5rem;`
`118`	`119`	`}`
`119`	`120`	`}`