fix(cnwebsite): fix build for Docusaurus 3.10

- Add markdown.format: 'detect' to avoid MDX parsing of .md files
- Remove HTML comments in versioned docs (invalid in MDX v3)
- Remove custom heading ID {#imageview-example} (invalid MDX expression)
- Remove orphaned sidebar entries (metro, codegen, create-module-library)
- Reorder getting-started tabs: React Native CLI before Expo
- Update default guide to 'native' in TabsConstants

Author: sunnylqm

cndocs/getting-started.md

@@ -11,6 +11,88 @@ import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import Gui
 欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。
 
 <Tabs groupId="guide" defaultValue={constants.defaultGuide} values={constants.guides}>
+<TabItem value="native">
+
+根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。
+
+如果`阅读完本文档`后还碰到很多环境搭建的问题，我们建议你还可以再看看[求助讨论区](https://github.com/reactnativecn/react-native-website/issues)。注意！视频教程或者其他网络上的博客和文章可能和本文档有所出入，请以最新版本的本文档所述为准！
+
+#### 开发平台
+
+<Tabs groupId="os" defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
+<TabItem value="macos">
+
+#### 目标平台
+
+<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
+<TabItem value="android">
+
+[//]: # 'macOS, Android'
+
+<GuideMacOSAndroid/>
+
+</TabItem>
+<TabItem value="ios">
+
+[//]: # 'macOS, iOS'
+
+<GuideMacOSIOS/>
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+<TabItem value="windows">
+
+#### 目标平台
+
+<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
+<TabItem value="android">
+
+[//]: # 'Windows, Android'
+
+<GuideWindowsAndroid/>
+
+</TabItem>
+<TabItem value="ios">
+
+[//]: # 'Windows, iOS'
+
+## 暂不支持
+
+> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+<TabItem value="linux">
+
+#### 目标平台
+
+<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
+<TabItem value="android">
+
+[//]: # 'Linux, Android'
+
+<GuideLinuxAndroid/>
+
+</TabItem>
+<TabItem value="ios">
+
+[//]: # 'Linux, iOS'
+
+## 暂不支持
+
+> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
+</TabItem>
 <TabItem value="quickstart">
 
 > 译注：沙盒环境大量依赖于国外网络环境，也不能直接安装第三方原生组件。不建议国内用户使用
@@ -104,87 +186,5 @@ Expo CLI configures your project to use the most recent React Native version tha
 
 If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
 
-</TabItem>
-<TabItem value="native">
-
-根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。
-
-如果`阅读完本文档`后还碰到很多环境搭建的问题，我们建议你还可以再看看[求助讨论区](https://github.com/reactnativecn/react-native-website/issues)。注意！视频教程或者其他网络上的博客和文章可能和本文档有所出入，请以最新版本的本文档所述为准！
-
-#### 开发平台
-
-<Tabs groupId="os" defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
-<TabItem value="macos">
-
-#### 目标平台
-
-<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
-<TabItem value="android">
-
-[//]: # 'macOS, Android'
-
-<GuideMacOSAndroid/>
-
-</TabItem>
-<TabItem value="ios">
-
-[//]: # 'macOS, iOS'
-
-<GuideMacOSIOS/>
-
-</TabItem>
-</Tabs>
-
-</TabItem>
-<TabItem value="windows">
-
-#### 目标平台
-
-<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
-<TabItem value="android">
-
-[//]: # 'Windows, Android'
-
-<GuideWindowsAndroid/>
-
-</TabItem>
-<TabItem value="ios">
-
-[//]: # 'Windows, iOS'
-
-## 暂不支持
-
-> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
-
-</TabItem>
-</Tabs>
-
-</TabItem>
-<TabItem value="linux">
-
-#### 目标平台
-
-<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
-<TabItem value="android">
-
-[//]: # 'Linux, Android'
-
-<GuideLinuxAndroid/>
-
-</TabItem>
-<TabItem value="ios">
-
-[//]: # 'Linux, iOS'
-
-## 暂不支持
-
-> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
-
-</TabItem>
-</Tabs>
-
-</TabItem>
-</Tabs>
-
 </TabItem>
 </Tabs>

cndocs/legacy/native-components-android.md

@@ -16,7 +16,7 @@ import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecat
 您还可以通过一个命令来配置生成包含原生组件的本地库模板。阅读[本地库设置](local-library-setup)指南以获取更多详细信息。
 :::
 
-## ImageView 示例 {#imageview-example}
+## ImageView 示例
 
 在这个例子里，我们来看看为了让 JavaScript 中可以使用 ImageView，需要做哪些准备工作。
 
@@ -863,4 +863,4 @@ export const MyView = ({ style }) => {
 };
 ```
 
-如果您想使用公开属性设置器 `@ReactProp` (or `@ReactPropGroup`) 详见上面的 [ImageView 示例](#imageview-example)。
+如果您想使用公开属性设置器 `@ReactProp` (or `@ReactPropGroup`) 详见上面的 [ImageView 示例](#imageview-example)。

cnwebsite/core/TabsConstants.tsx

@@ -58,10 +58,10 @@ const jsDebuggers = [
 const defaultJsDebugger = 'flipper';
 
 const guides = [
-  {label: 'Expo Go Quickstart', value: 'quickstart'},
   {label: 'React Native CLI Quickstart', value: 'native'},
+  {label: 'Expo Go Quickstart', value: 'quickstart'},
 ];
-const defaultGuide = 'quickstart';
+const defaultGuide = 'native';
 
 const platforms = [
   {label: 'Android', value: 'android'},

cnwebsite/docusaurus.config.ts

@@ -32,6 +32,7 @@ const isDeployPreview =
 const config: Config = {
   markdown: {
     mermaid: true,
+    format: 'detect',
   },
   themes: ['@docusaurus/theme-mermaid'],
   future: {

cnwebsite/sidebars.ts

@@ -24,7 +24,6 @@ export default {
     开发流程: [
       'running-on-device',
       'fast-refresh',
-      'metro',
       'libraries',
       'typescript',
       'strict-typescript-api',
@@ -84,11 +83,7 @@ export default {
       'profiling',
     ],
     'JavaScript 运行环境': ['javascript-environment', 'timers', 'hermes'],
-    Codegen: [
-      'the-new-architecture/what-is-codegen',
-      'the-new-architecture/using-codegen',
-      'the-new-architecture/codegen-cli',
-    ],
+    Codegen: ['the-new-architecture/codegen-cli'],
     原生开发: [
       {
         type: 'doc',
@@ -149,10 +144,6 @@ export default {
             id: 'appendix',
             label: '附录',
           },
-          {
-            type: 'doc',
-            id: 'the-new-architecture/create-module-library',
-          },
         ],
       },
     ],

cnwebsite/versioned_docs/version-0.70/colors.md

@@ -53,8 +53,6 @@ React Native 还支持将颜色表示为`int`值（以 RGB 颜色模式）：
 
 你还可以使用颜色名称来作为颜色值. React Native 遵循[CSS3 规范](http://www.w3.org/TR/css3-color/#svg-color)：
 
-<!-- alex ignore black white -->
-
 - <ins style={{background: '#f0f8ff'}} className="color-box" /> aliceblue (<code>#f0f8ff</code>)
 - <ins style={{background: '#faebd7'}} className="color-box" /> antiquewhite (<code>#faebd7</code>)
 - <ins style={{background: '#00ffff'}} className="color-box" /> aqua (<code>#00ffff</code>)

cnwebsite/versioned_docs/version-0.70/new-architecture-library-intro.md

@@ -54,8 +54,8 @@ export default (TurboModuleRegistry.get<Spec>('<MODULE_NAME>'): ?Spec);
 <TabItem value="TypeScript">
 
 ```ts
-import type { TurboModule } from 'react-native';
-import { TurboModuleRegistry } from 'react-native';
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
 
 export interface Spec extends TurboModule {
   readonly getConstants: () => {};
@@ -102,16 +102,16 @@ export default (codegenNativeComponent<NativeProps>(
 <TabItem value="TypeScript">
 
 ```ts
-import type { ViewProps } from 'ViewPropTypes';
-import type { HostComponent } from 'react-native';
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
   // add other props here
 }
 
 export default codegenNativeComponent<NativeProps>(
-  '<FABRIC COMPONENT>'
+  '<FABRIC COMPONENT>',
 ) as HostComponent<NativeProps>;
 ```
 
@@ -122,8 +122,6 @@ export default codegenNativeComponent<NativeProps>(
 
 When using Flow or TypeScript, you will be using [type annotations](https://flow.org/en/docs/types/) to define your spec. Keeping in mind that the goal of defining a JavaScript spec is to ensure the generated native interface code is type safe, the set of supported types will be those that can be mapped one-to-one to a corresponding type on the native platform.
 
-<!-- alex ignore primitive -->
-
 In general, this means you can use primitive types (strings, numbers, booleans), as well as function types, object types, and array types. Union types, on the other hand, are not supported. All types must be read-only. For Flow: either `+` or `$ReadOnly<>` or `{||}` objects. For TypeScript: `readonly` for properties, `Readonly<>` for objects, and `ReadonlyArray<>` for arrays.
 
 > See Appendix [I. Flow Type to Native Type Mapping](#i-flow-type-to-native-type-mapping).
@@ -150,8 +148,6 @@ If your existing native module has methods with the same name on multiple platfo
 
 ## Make sure _autolinking_ is enabled
 
-<!-- alex ignore master -->
-
 [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) is a feature of the React Native CLI that simplifies the installation of third-party React Native libraries. Instructions to enable _autolinking_ are available at https://github.com/react-native-community/cli/blob/master/docs/autolinking.md.
 
 ### Android
@@ -501,10 +497,10 @@ return <RNTMyNativeViewNativeComponent />;
 ```
 
 ```js title="RNTMyNativeViewNativeComponent.js"
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
 
 const RNTMyNativeViewNativeComponent = requireNativeComponent(
-  'RNTMyNativeView'
+  'RNTMyNativeView',
 );
 
 export default RNTMyNativeViewNativeComponent;

cnwebsite/versioned_docs/version-0.70/running-on-device.md

@@ -80,8 +80,6 @@ $ npx react-native run-android
 
 你可以在**System Preferences** → **Network**中找到 IP 地址。
 
-<!-- alex ignore host -->
-
 1.  首先确保你的电脑和手机设备在**同一个 Wi-Fi 环境**下。
 2.  在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
 3.  你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
@@ -157,8 +155,6 @@ $ npx react-native run-android
 
 你可以在**System Preferences** → **Network**中找到 IP 地址。
 
-<!-- alex ignore host -->
-
 1.  首先确保你的电脑和手机设备在**同一个 Wi-Fi 环境**下。
 2.  在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
 3.  你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
@@ -234,8 +230,6 @@ $ npx react-native run-android
 
 你可以在**System Preferences** → **Network**中找到 IP 地址。
 
-<!-- alex ignore host -->
-
 1.  首先确保你的电脑和手机设备在**同一个 Wi-Fi 环境**下。
 2.  在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
 3.  你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。

cnwebsite/versioned_docs/version-0.71/colors.md

@@ -53,8 +53,6 @@ React Native 还支持将颜色表示为`int`值（以 RGB 颜色模式）：
 
 你还可以使用颜色名称来作为颜色值. React Native 遵循[CSS3 规范](http://www.w3.org/TR/css3-color/#svg-color)：
 
-<!-- alex ignore black white -->
-
 - <ins style={{background: '#f0f8ff'}} className="color-box" /> aliceblue (<code>#f0f8ff</code>)
 - <ins style={{background: '#faebd7'}} className="color-box" /> antiquewhite (<code>#faebd7</code>)
 - <ins style={{background: '#00ffff'}} className="color-box" /> aqua (<code>#00ffff</code>)

cnwebsite/versioned_docs/version-0.71/new-architecture-library-intro.md

@@ -122,8 +122,6 @@ export default codegenNativeComponent<NativeProps>(
 
 When using Flow or TypeScript, you will be using [type annotations](https://flow.org/en/docs/types/) to define your spec. Keeping in mind that the goal of defining a JavaScript spec is to ensure the generated native interface code is type-safe, the set of supported types will be those that can be mapped one-to-one to a corresponding type on the native platform.
 
-<!-- alex ignore primitive -->
-
 In general, this means you can use primitive types (strings, numbers, booleans), function types, object types, and array types. Union types, on the other hand, are not supported. All types must be read-only. For Flow: either `+` or `$ReadOnly<>` or `{||}` objects. For TypeScript: `readonly` for properties, `Readonly<>` for objects, and `ReadonlyArray<>` for arrays.
 
 > See Appendix [II. Flow Type to Native Type Mapping](new-architecture-appendix#ii-flow-type-to-native-type-mapping).
@@ -150,8 +148,6 @@ If your existing native module has methods with the same name on multiple platfo
 
 ## Make Sure _autolinking_ is Enabled
 
-<!-- alex ignore master -->
-
 [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) is a feature of the React Native CLI that simplifies the installation of third-party React Native libraries. Instructions to enable _autolinking_ are available in the [React Native CLI docs](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).
 
 ### Android