update Docusaurus to 3.10, perform related changes

docs/_canary-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip Canary 🧪
+:::tip[Canary 🧪]
 
 **This API is currently only available in React Native’s Canary and Experimental channels.**
 

docs/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip Experimental Feature 🧪
+:::tip[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

docs/alertios.md

@@ -3,6 +3,6 @@ id: alertios
 title: '❌ AlertIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use [`Alert`](alert) instead.
 :::

docs/asyncstorage.md

@@ -3,6 +3,6 @@ id: asyncstorage
 title: '❌ AsyncStorage'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=storage) instead.
 :::

docs/checkbox.md

@@ -3,6 +3,6 @@ id: checkbox
 title: '❌ CheckBox'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead.
 :::

docs/clipboard.md

@@ -3,6 +3,6 @@ id: clipboard
 title: '❌ Clipboard'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead.
 :::

docs/datepickerandroid.md

@@ -3,6 +3,6 @@ id: datepickerandroid
 title: '❌ DatePickerAndroid'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
 :::

docs/datepickerios.md

@@ -3,6 +3,6 @@ id: datepickerios
 title: '❌ DatePickerIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
 :::

docs/imagepickerios.md

@@ -3,6 +3,6 @@ id: imagepickerios
 title: '❌ ImagePickerIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=image+picker) instead.
 :::

docs/legacy/native-modules-ios.md

@@ -551,7 +551,7 @@ RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSe
 
 ```
 
-:::info Sharing dispatch queues between modules
+:::info[Sharing dispatch queues between modules]
 The `methodQueue` method will be called once when the module is initialized, and then retained by React Native, so there is no need to keep a reference to the queue yourself, unless you wish to make use of it within your module. However, if you wish to share the same queue between multiple modules then you will need to ensure that you retain and return the same queue instance for each of them.
 :::
 

website/versioned_docs/version-0.79/metro.md → docs/metro.mdx

@@ -20,9 +20,12 @@ In React Native, your Metro config should extend either [`@react-native/metro-co
 
 Below is the default `metro.config.js` file in a React Native template project:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const {
+  getDefaultConfig,
+  mergeConfig,
+} = require('@react-native/metro-config');
 
 /**
  * Metro configuration
@@ -45,23 +48,28 @@ Exporting a config function is an opt-in to managing the final config yourself 
 **From `@react-native/metro-config` 0.72.1**, it is no longer necessary to use a config function to access the complete default config. See the **Tip** section below.
 :::
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const {
+  getDefaultConfig,
+  mergeConfig,
+} = require('@react-native/metro-config');
 
 module.exports = function (baseConfig) {
-  const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
-  const {resolver: {assetExts, sourceExts}} = defaultConfig;
-
-  return mergeConfig(
-    defaultConfig,
-    {
-      resolver: {
-        assetExts: assetExts.filter(ext => ext !== 'svg'),
-        sourceExts: [...sourceExts, 'svg'],
-      },
-    },
+  const defaultConfig = mergeConfig(
+    baseConfig,
+    getDefaultConfig(__dirname),
   );
+  const {
+    resolver: {assetExts, sourceExts},
+  } = defaultConfig;
+
+  return mergeConfig(defaultConfig, {
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  });
 };
 ```
 
@@ -70,7 +78,7 @@ Using a config function is for advanced use cases. A simpler method than the abo
 
 **Alternative**
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 const defaultConfig = getDefaultConfig(__dirname);
 
@@ -87,7 +95,7 @@ module.exports = mergeConfig(defaultConfig, config);
 
 ✅ **Recommended**
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 const config = {
   resolver: {

docs/profiling.md

@@ -33,13 +33,13 @@ After opening the trace in Android Studio or Perfetto, you should see something
 
 ![Example](/docs/assets/SystraceExample.png)
 
-:::note Hint
+:::note[Hint]
 Use the WASD keys to strafe and zoom.
 :::
 
 The exact UI might be different but the instructions below will apply regardless of the tool you're using.
 
-:::info Enable VSync highlighting
+:::info[Enable VSync highlighting]
 Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:
 
 ![Enable VSync Highlighting](/docs/assets/SystraceHighlightVSync.png)
@@ -133,7 +133,7 @@ There isn't a quick way to mitigate this unless you're able to postpone creating
 
 If the problem seems to be on the native side, you can use the [CPU hotspot profiler](https://developer.android.com/studio/profile/record-java-kotlin-methods) to get more details on what's happening. Open the Android Studio Profiler panel and select "Find CPU Hotspots (Java/Kotlin Method Recording)".
 
-:::info Choose the Java/Kotlin recording
+:::info[Choose the Java/Kotlin recording]
 
 Make sure you select "Find CPU Hotspots **(Java/Kotlin Recording)**" rather than "Find CPU Hotspots (Callstack Sample)". They have similar icons but do different things.
 :::

docs/segmentedcontrolios.md

@@ -3,7 +3,7 @@ id: segmentedcontrolios
 title: '❌ SegmentedControlIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=segmentedcontrol) instead.
 :::
 

docs/signed-apk-android.md

@@ -65,11 +65,11 @@ MYAPP_UPLOAD_KEY_PASSWORD=*****
 
 These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app.
 
-:::note Note about using git
+:::note[Note about using git]
 Saving the above Gradle variables in `~/.gradle/gradle.properties` instead of `android/gradle.properties` prevents them from being checked in to git. You may have to create the `~/.gradle/gradle.properties` file in your user's home directory before you can add the variables.
 :::
 
-:::note Note about security
+:::note[Note about security]
 If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`.
 :::
 
@@ -174,7 +174,7 @@ Please note that you will also have to configure distinct version codes, as [sug
 
 Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.
 
-:::caution Important
+:::caution[Important]
 Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`.
 :::
 

docs/statusbarios.md

@@ -3,7 +3,7 @@ id: statusbarios
 title: '❌ StatusBarIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use [`StatusBar`](statusbar.md) for mutating the status bar.
 :::
 

docs/strict-typescript-api.md

@@ -32,15 +32,15 @@ Opting in is a **breaking change**, since some of our new types have updated nam
 }
 ```
 
-:::note Under the hood
+:::note[Under the hood]
 
 This will instruct TypeScript to resolve `react-native` types from our new [`types_generated/`](https://www.npmjs.com/package/react-native?activeTab=code) dir, instead of the previous [`types/`](https://www.npmjs.com/package/react-native?activeTab=code) dir (manually maintained). No restart of TypeScript or your editor is required.
 
 :::
 
 The Strict TypeScript API follows our [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/894) to remove deep imports from React Native. Therefore, some APIs are no longer exported at root. This is intentional, in order to reduce the overall surface area of React Native's API.
 
-:::tip API feedback
+:::tip[API feedback]
 
 **Sending feedback**: We will be working with the community to finalize which APIs we export over (at least) the next two React Native releases. Please share your feedback in our [feedback thread](https://github.com/react-native-community/discussions-and-proposals/discussions/893).
 

website/versioned_docs/version-0.80/the-new-architecture/create-module-library.md → docs/the-new-architecture/create-module-library.mdx

@@ -38,7 +38,11 @@ npx create-react-native-library@latest <Name of Your Library>
 
 Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code:
 
-<img className="half-size" alt="Folder structure after initializing a new library." src="/docs/assets/turbo-native-modules/c++visualstudiocode.webp" />
+<img
+  className="half-size"
+  alt="Folder structure after initializing a new library."
+  src="/docs/assets/turbo-native-modules/c++visualstudiocode.webp"
+/>
 
 Feel free to explore the code that has been created for you. However, the most important parts:
 
@@ -70,7 +74,7 @@ Finally, the library contains already all the infrastructure to let the library
 
 The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or [cross-platform Turbo Native Modules](./pure-cxx-modules). But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update.
 
-<!-- TODO: add links for Turbo Native Modules -->
+{/* TODO: add links for Turbo Native Modules */}
 
 1. **[Not required for legacy architecture modules and components]** Move the code you have in the `specs` folder in your app into the `src` folder created by the `create-react-native-library` folder.
 2. Update the `index.ts` file to properly export the Turbo Native Module spec so that it is accessible from the library. For example:

docs/the-new-architecture/pure-cxx-modules.md

@@ -72,7 +72,7 @@ export default TurboModuleRegistry.getEnforcing<Spec>(
 
 ## 2. Configure Codegen
 
-The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include:
+The next step is to configure [Codegen](what-is-codegen.mdx) in your `package.json`. Update the file to include:
 
 ```json title="package.json"
      "start": "react-native start",

website/versioned_docs/version-0.81/the-new-architecture/using-codegen.md → docs/the-new-architecture/using-codegen.mdx

@@ -19,12 +19,12 @@ The **Codegen** process is tightly coupled with the build of the app, and the sc
 For the sake of this guide, create a project using the React Native CLI as follows:
 
 <CodeBlock language="bash" title="shell">
-{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
+  {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
 </CodeBlock>
 
 **Codegen** is used to generate the glue-code for your custom modules or components. See the guides for Turbo Native Modules and Fabric Native Components for more details on how to create them.
 
-<!-- TODO: add links -->
+{/* TODO: add links */}
 
 ## Configuring **Codegen**
 

website/versioned_docs/version-0.81/the-new-architecture/what-is-codegen.md → docs/the-new-architecture/what-is-codegen.mdx

@@ -4,7 +4,7 @@
 
 React Native invokes Codegen automatically every time an iOS or Android app is built. Occasionally, you would like to manually run the Codegen scripts to know which types and files are actually generated: this is a common scenario when developing [Turbo Native Modules](/docs/turbo-native-modules-introduction) and Fabric Native Components.
 
-<!-- TODO: Add links to TM and FC -->
+{/* TODO: Add links to TM and FC */}
 
 ## How Codegen Works
 

docs/timepickerandroid.md

@@ -3,6 +3,6 @@ id: timepickerandroid
 title: '❌ TimePickerAndroid'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use one of the [community packages](https://reactnative.directory/?search=timepicker) instead.
 :::

docs/turbo-native-modules-android.md

@@ -206,7 +206,7 @@ Finally, we need to tell the React Native in our main application how to find th
 In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method.
 
 :::info
-Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you.
+Later you’ll learn how to distribute your Native Modules as [npm packages](the-new-architecture/create-module-library.mdx#publish-the-library-on-npm), which our build tooling will autolink for you.
 :::
 
 <Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>

eslint.config.js

@@ -161,6 +161,8 @@ export default defineConfig([
           },
         },
       ],
+      // causes false-positive warnings in files with MDX extension
+      '@typescript-eslint/no-unused-vars': 'off',
     },
   },
 ]);

website/blog/2019-11-18-react-native-doctor.md → website/blog/2019-11-18-react-native-doctor.mdx

@@ -10,13 +10,20 @@ tags: [announcement]
 
 After over 20 pull requests from 6 contributors in the React Native Community, we're excited to launch `react-native doctor`, a new command to help you out with getting started, troubleshooting and automatically fixing errors with your development environment. The `doctor` command is heavily inspired by [Expo](https://expo.io/) and [Homebrew](https://brew.sh/)'s own doctor command with a pinch of UI inspired by [Jest](https://jestjs.io/).
 
-<!--truncate-->
+{/* truncate */}
 
 Here it is in action:
 
 <p style={{textAlign: 'center'}}>
-  <video width={700} controls="controls" autoPlay style={{borderRadius: 5}}>
-    <source type="video/mp4" src="/img/homepage/DoctorCommand.mp4" />
+  <video
+    width={700}
+    controls="controls"
+    autoPlay
+    style={{borderRadius: 5}}>
+    <source
+      type="video/mp4"
+      src="/img/homepage/DoctorCommand.mp4"
+    />
   </video>
 </p>
 
@@ -25,7 +32,12 @@ Here it is in action:
 The `doctor` command currently supports most of the software and libraries that React Native relies on, such as CocoaPods, Xcode and Android SDK. With `doctor` we'll find issues with your development environment and give you the option to automatically fix them. If `doctor` is not able to fix an issue, it will display a message and a helpful link explaining how to fix it manually as the following:
 
 <p style={{textAlign: 'center'}}>
-  <img width={700} src="/img/DoctorManualInstallationMessage.png" alt="Doctor command with a link to help on Android SDK's installation" title="Doctor command with a link to help on Android SDK's installation" />
+  <img
+    width={700}
+    src="/img/DoctorManualInstallationMessage.png"
+    alt="Doctor command with a link to help on Android SDK's installation"
+    title="Doctor command with a link to help on Android SDK's installation"
+  />
 </p>
 
 ## Try it now

website/blog/2020-03-26-version-0.62.md → website/blog/2020-03-26-version-0.62.mdx

@@ -10,7 +10,7 @@ tags: [announcement, release]
 
 Today we’re releasing React Native version 0.62 which includes support for Flipper by default.
 
-<!--alex ignore master-->
+{/* alex ignore master */}
 
 This release comes in the midst of a global pandemic. We’re releasing this version today to respect the work of hundreds of contributors who made this release possible and to prevent the release from falling too far behind master. Please be mindful of the reduced capacity of contributors to help with issues and prepare to delay upgrading if necessary.
 

website/blog/2020-07-23-docs-update.md → website/blog/2020-07-23-docs-update.mdx

@@ -21,7 +21,7 @@ Last year we conducted user interviews and sent out [a survey](https://www.surve
 
 Thank you so much to everyone who participated in the interviews, the survey, and our documentation efforts! Your collaboration makes this possible.
 
-<!--truncate-->
+{/* truncate */}
 
 ## What’s next?
 

website/blog/2021-03-12-version-0.64.md → website/blog/2021-03-12-version-0.64.mdx

@@ -56,7 +56,7 @@ More information about Inline Requires is available in the [Performance document
 
 ## View Hermes traces with Chrome
 
-<!--alex ignore fellowship-->
+{/* alex ignore fellowship */}
 
 Over the last year Facebook has sponsored the [Major League Hacking fellowship](https://fellowship.mlh.io/), supporting contributions to React Native. [Jessie Nguyen](https://twitter.com/jessie_anh_ng) and [Saphal Patro](https://twitter.com/saphalinsaan) added the ability to use the Performance tab on Chrome DevTools to visualize the execution of your application when it is using Hermes.
 

website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.md → website/blog/2021-04-08-GAAD-March-Accessibility-Issue-Update.mdx

@@ -10,7 +10,7 @@ While this work continues, the React Native and Accessibility teams at Facebook
 
 Thank you to all the community members who have participated. You are truly moving the needle in making React Native more accessible for everyone!
 
-<!--truncate-->
+{/* truncate */}
 
 ## Closed Pull Requests 🎉
 

website/blog/2021-05-20-GAAD-One-Year-Later.md → website/blog/2021-05-20-GAAD-One-Year-Later.mdx

@@ -18,7 +18,7 @@ We started with 90 outstanding gap analysis issues and from March 2021, when the
 
 We want to recognize and thank the React Native community for the significant progress towards a more accessible React Native over the past year. Every contributor's effort has counted in making progress on improving React Native Accessibility.
 
-<!--truncate-->
+{/* truncate */}
 
 ## Fixes