Add codeblock language as title remark plugin (#4418)

* chore: update dependencies and add remark-codeblock-language-as-title plugin

* feat: add README for languageAsTitleRemarkPlugin with features and usage details

* fix: rename plugin to codeblockLanguageAsTitleRemarkPlugin for consistency

plugins/remark-codeblock-language-as-title/README.md

@@ -0,0 +1,9 @@
+# codeblockLanguageAsTitleRemarkPlugin
+
+A custom [remark](https://github.com/remarkjs/remark) plugin that automatically sets the `title` metadata for code blocks in Markdown files based on the block's language.
+
+## Features
+
+- **Adds `title` Metadata**: For code blocks with a specified language (e.g., `js`, `python`), the plugin sets the `title` metadata to match the language.
+- **Preserves Existing Metadata**: If the code block already contains metadata (`meta`) but lacks a `title`, the plugin appends the `title` without removing the existing metadata.
+- **Ignores Code Blocks with Existing `title`**: If the `meta` field already includes a `title` property, the plugin does nothing to avoid overwriting it.

plugins/remark-codeblock-language-as-title/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@react-native-website/remark-codeblock-language-as-title",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Remark plugin for using codeblock language as title",
+  "main": "src/index.js",
+  "type": "module",
+  "keywords": [
+    "remark",
+    "react-native",
+    "lint"
+  ],
+  "files": [
+    "src/*"
+  ],
+  "scripts": {
+    "prettier": "prettier --write '{src}/**/*.{md,js,jsx,ts,tsx}'"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "remark": "^15.0.1"
+  }
+}

plugins/remark-codeblock-language-as-title/src/index.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default function codeblockLanguageAsTitleRemarkPlugin() {
+  /**
+   * @param {import('mdast').Root} root - The root node of the Markdown AST
+   * @returns {Promise<void>}
+   */
+  return async root => {
+    const {visit} = await import('unist-util-visit');
+    visit(root, 'code', node => {
+      if (node.lang) {
+        if (node.meta) {
+          if (node.meta.includes('title=')) {
+            return;
+          }
+          node.meta = `title="${node.lang}" ${node.meta}`;
+        } else {
+          node.meta = `title="${node.lang}"`;
+        }
+      }
+    });
+  };
+}

plugins/remark-lint-no-dead-urls/package.json

@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "got": "^13.0.0",
-    "unified-lint-rule": "^2.1.1",
-    "unist-util-visit": "^4.1.2"
+    "unified-lint-rule": "^3.0.0",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "dedent": "^0.7.0",
+    "dedent": "^1.5.3",
     "jest": "^29.4.3",
-    "remark": "^12.0.1"
+    "remark": "^15.0.1"
   }
 }

plugins/remark-snackplayer/package.json

@@ -19,12 +19,12 @@
     "test": "yarn tape tests/index.js"
   },
   "dependencies": {
-    "dedent": "^0.7.0",
+    "dedent": "^1.5.3",
     "object.fromentries": "^2.0.3",
     "unist-util-visit-parents": "^3.1.1"
   },
   "devDependencies": {
-    "remark": "^14.0.3",
+    "remark": "^15.0.1",
     "tape": "^5.7.0"
   }
 }

website/docusaurus.config.ts

@@ -21,7 +21,10 @@ const commonDocsOptions = {
   showLastUpdateTime: true,
   editUrl:
     'https://github.com/facebook/react-native-website/blob/main/website/',
-  remarkPlugins: [require('@react-native-website/remark-snackplayer')],
+  remarkPlugins: [
+    require('@react-native-website/remark-snackplayer'),
+    require('@react-native-website/remark-codeblock-language-as-title'),
+  ],
 };
 
 const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';