docs(website): use .mdx extension for every docs (#8490)

website/docs/guides/markdown-features/markdown-features-admonitions.mdx

@@ -259,7 +259,7 @@ There are two kinds of customizations possible with admonitions: **parsing** and
 
 ### Customizing rendering behavior {#customizing-rendering-behavior}
 
-You can customize how each individual admonition type is rendered through [swizzling](../../swizzling.md). You can often achieve your goal through a simple wrapper. For example, in the follow example, we swap out the icon for `info` admonitions only.
+You can customize how each individual admonition type is rendered through [swizzling](../../swizzling.mdx). You can often achieve your goal through a simple wrapper. For example, in the follow example, we swap out the icon for `info` admonitions only.
 
 ```jsx title="src/theme/Admonition.js"
 import React from 'react';

website/docs/guides/markdown-features/markdown-features-assets.mdx

@@ -80,7 +80,7 @@ All of the above result in displaying the image:
 
 :::note
 
-If you are using [@docusaurus/plugin-ideal-image](../../api/plugins/plugin-ideal-image.md), you need to use the dedicated image component, as documented.
+If you are using [@docusaurus/plugin-ideal-image](../../api/plugins/plugin-ideal-image.mdx), you need to use the dedicated image component, as documented.
 
 :::
 
@@ -214,7 +214,7 @@ To toggle the visibility of an image using the path fragment (for GitHub, it's `
 
 ## Static assets {#static-assets}
 
-If a Markdown link or image has an absolute path, the path will be seen as a file path and will be resolved from the static directories. For example, if you have configured [static directories](../../static-assets.md) to be `['public', 'static']`, then for the following image:
+If a Markdown link or image has an absolute path, the path will be seen as a file path and will be resolved from the static directories. For example, if you have configured [static directories](../../static-assets.mdx) to be `['public', 'static']`, then for the following image:
 
 ```md title="my-doc.md"
 ![An image from the static](/img/docusaurus.png)

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -380,7 +380,7 @@ You can disable the default line highlighting comments with `magicComments: []`.
 
 Every magic comment entry will contain three keys: `className` (required), `line`, which applies to the directly next line, or `block` (containing `start` and `end`), which applies to the entire block enclosed by the two comments.
 
-Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through [swizzling](../../swizzling.md).
+Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through [swizzling](../../swizzling.mdx).
 
 ```bash npm2yarn
 npm run swizzle @docusaurus/theme-classic CodeBlock/Line
@@ -751,7 +751,7 @@ Displaying CLI commands in both npm and Yarn is a very common need, for example:
 npm install @docusaurus/remark-plugin-npm2yarn
 ```
 
-Docusaurus provides such a utility out of the box, freeing you from using the `Tabs` component every time. To enable this feature, first install the `@docusaurus/remark-plugin-npm2yarn` package as above, and then in `docusaurus.config.js`, for the plugins where you need this feature (doc, blog, pages, etc.), register it in the `remarkPlugins` option. (See [Docs configuration](../../api/plugins/plugin-content-docs.md#ex-config) for more details on configuration format)
+Docusaurus provides such a utility out of the box, freeing you from using the `Tabs` component every time. To enable this feature, first install the `@docusaurus/remark-plugin-npm2yarn` package as above, and then in `docusaurus.config.js`, for the plugins where you need this feature (doc, blog, pages, etc.), register it in the `remarkPlugins` option. (See [Docs configuration](../../api/plugins/plugin-content-docs.mdx#ex-config) for more details on configuration format)
 
 ```js title="docusaurus.config.js"
 module.exports = {

website/docs/guides/markdown-features/markdown-features-head-metadata.mdx

@@ -47,7 +47,7 @@ This `<head>` declaration has been added to the current Markdown doc as a demo.
 
 :::note
 
-This feature is built on top of the Docusaurus [`<Head>`](./../../docusaurus-core.md#head) component. Refer to [react-helmet](https://github.com/nfl/react-helmet) for exhaustive documentation.
+This feature is built on top of the Docusaurus [`<Head>`](./../../docusaurus-core.mdx#head) component. Refer to [react-helmet](https://github.com/nfl/react-helmet) for exhaustive documentation.
 
 :::
 
@@ -59,14 +59,14 @@ Content plugins (e.g. docs and blog) provide front matter options like `descript
 
 ## Markdown page description {#markdown-page-description}
 
-The Markdown pages' description metadata may be used in more places than the head metadata. For example, the docs plugin's [generated category index](../docs/sidebar/items.md#generated-index-page) uses the description metadata for the doc cards.
+The Markdown pages' description metadata may be used in more places than the head metadata. For example, the docs plugin's [generated category index](../docs/sidebar/items.mdx#generated-index-page) uses the description metadata for the doc cards.
 
 By default, the description is the first content-ful line, with some efforts to convert it to plain text. For example, the following file...
 
 ```md
 # Title
 
-Main content... May contain some [links](./file.md) or **emphasis**.
+Main content... May contain some [links](./file.mdx) or **emphasis**.
 ```
 
 ...will have the default description "Main content... May contain some links or emphasis". However, **it's not designed to be fully functional**. Where it fails to produce reasonable descriptions, you can explicitly provide one through front matter:
@@ -78,5 +78,5 @@ description: This description will override the default.
 
 # Title
 
-Main content... May contain some [links](./file.md) or **emphasis**.
+Main content... May contain some [links](./file.mdx) or **emphasis**.
 ```

website/docs/guides/markdown-features/markdown-features-links.mdx

@@ -10,7 +10,7 @@ There are two ways of adding a link to another page: through a **URL path** and
 
 ```md
 - [URL path to another document](./installation)
-- [file path to another document](./installation.md)
+- [file path to another document](./installation.mdx)
 ```
 
 URL paths are unprocessed by Docusaurus, and you can see them as directly rendering to `<a href="./installation">`, i.e. it will be resolved according to the page's URL location, rather than its file-system location.
@@ -20,21 +20,21 @@ If you want to reference another Markdown file **included by the same plugin**,
 For example, if you are in `docs/folder/doc1.md` and you want to reference `docs/folder/doc2.md`, `docs/folder/subfolder/doc3.md` and `docs/otherFolder/doc4.md`:
 
 ```md title="docs/folder/doc1.md"
-I am referencing a [document](doc2.md).
+I am referencing a [document](doc2.mdx).
 
-Reference to another [document in a subfolder](subfolder/doc3.md).
+Reference to another [document in a subfolder](subfolder/doc3.mdx).
 
-[Relative document](../otherFolder/doc4.md) referencing works as well.
+[Relative document](../otherFolder/doc4.mdx) referencing works as well.
 ```
 
-Relative file paths are resolved against the current file's directory. Absolute file paths, on the other hand, are resolved relative to the **content root**, usually `docs/`, `blog/`, or [localized ones](../../i18n/i18n-tutorial.md) like `i18n/zh-Hans/plugin-content-docs/current`.
+Relative file paths are resolved against the current file's directory. Absolute file paths, on the other hand, are resolved relative to the **content root**, usually `docs/`, `blog/`, or [localized ones](../../i18n/i18n-tutorial.mdx) like `i18n/zh-Hans/plugin-content-docs/current`.
 
 Absolute file paths can also be relative to the site directory. However, beware that links that begin with `/docs/` or `/blog/` are **not portable** as you would need to manually update them if you create new doc versions or localize them.
 
 ```md
-You can write [links](/otherFolder/doc4.md) relative to the content root (`/docs/`).
+You can write [links](/otherFolder/doc4.mdx) relative to the content root (`/docs/`).
 
-You can also write [links](/docs/otherFolder/doc4.md) relative to the site directory, but it's not recommended.
+You can also write [links](/docs/otherFolder/doc4.mdx) relative to the site directory, but it's not recommended.
 ```
 
 Using relative _file_ paths (with `.md` extensions) instead of relative _URL_ links provides the following benefits:
@@ -42,8 +42,8 @@ Using relative _file_ paths (with `.md` extensions) instead of relative _URL_ li
 - Links will keep working on the GitHub interface and many Markdown editors
 - You can customize the files' slugs without having to update all the links
 - Moving files around the folders can be tracked by your editor, and some editors may automatically update file links
-- A [versioned doc](../docs/versioning.md) will link to another doc of the exact same version
-- Relative URL links are very likely to break if you update the [`trailingSlash` config](../../api/docusaurus.config.js.md#trailingSlash)
+- A [versioned doc](../docs/versioning.mdx) will link to another doc of the exact same version
+- Relative URL links are very likely to break if you update the [`trailingSlash` config](../../api/docusaurus.config.js.mdx#trailingSlash)
 
 :::warning
 

website/docs/guides/markdown-features/markdown-features-plugins.mdx

@@ -14,7 +14,7 @@ Sometimes, you may want to extend or tweak your Markdown syntax. For example:
 
 And the answer is: create an MDX plugin! MDX has a built-in [plugin system](https://mdxjs.com/advanced/plugins/) that can be used to customize how the Markdown files will be parsed and transformed to JSX. There are three typical use-cases of MDX plugins:
 
-- Using existing [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) or [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins);
+- Using existing [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.mdx#list-of-plugins) or [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.mdx#list-of-plugins);
 - Creating remark/rehype plugins to transform the elements generated by existing MDX syntax;
 - Creating remark/rehype plugins to introduce new syntaxes to MDX.
 
@@ -121,7 +121,7 @@ If there isn't an existing package that satisfies your customization need, you c
 
 :::note
 
-The writeup below is **not** meant to be a comprehensive guide to creating a plugin, but just an illustration of how to make it work with Docusaurus. Visit the [Remark](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#create-plugins) or [Rehype](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#create-plugins) documentation for a more in-depth explanation of how they work.
+The writeup below is **not** meant to be a comprehensive guide to creating a plugin, but just an illustration of how to make it work with Docusaurus. Visit the [Remark](https://github.com/remarkjs/remark/blob/main/doc/plugins.mdx#create-plugins) or [Rehype](https://github.com/remarkjs/remark/blob/main/doc/plugins.mdx#create-plugins) documentation for a more in-depth explanation of how they work.
 
 :::
 

website/docs/guides/markdown-features/markdown-features-react.mdx

@@ -84,7 +84,7 @@ Since all doc files are parsed using MDX, anything that looks like HTML is actua
 <span style={{backgroundColor: 'red'}}>Foo</span>
 ```
 
-This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](../../migration/migration-manual.md#convert-style-attributes-to-style-objects-in-mdx).
+This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](../../migration/migration-manual.mdx#convert-style-attributes-to-style-objects-in-mdx).
 
 In addition, MDX is not [100% compatible with CommonMark](https://github.com/facebook/docusaurus/issues/3018). Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX.
 
@@ -106,7 +106,7 @@ import BrowserWindow from '@site/src/components/BrowserWindow';
 
 :::tip
 
-The `@site` alias points to your website's directory, usually where the `docusaurus.config.js` file is. Using an alias instead of relative paths (`'../../src/components/BrowserWindow'`) saves you from updating import paths when moving files around, or when [versioning docs](../docs/versioning.md) and [translating](../../i18n/i18n-tutorial.md).
+The `@site` alias points to your website's directory, usually where the `docusaurus.config.js` file is. Using an alias instead of relative paths (`'../../src/components/BrowserWindow'`) saves you from updating import paths when moving files around, or when [versioning docs](../docs/versioning.mdx) and [translating](../../i18n/i18n-tutorial.mdx).
 
 :::
 
@@ -159,9 +159,9 @@ It will be compiled to a React component containing `ul`, `li`, `p`, and `highli
 
 In Docusaurus, this MDX component scope is provided by the `@theme/MDXComponents` component. It's not a React component, _per se_, unlike most other exports under the `@theme/` alias: it is a record from tag names like `ul` and `img` to their custom implementations.
 
-If you [swizzle](../../swizzling.md) this component, you will find all tags that have been re-implemented, and you can further customize our implementation by swizzling the respective sub-component, like `@theme/MDXComponents/Head` (which is used to implement the [`<head>`](./markdown-features-head-metadata.mdx) feature).
+If you [swizzle](../../swizzling.mdx) this component, you will find all tags that have been re-implemented, and you can further customize our implementation by swizzling the respective sub-component, like `@theme/MDXComponents/Head` (which is used to implement the [`<head>`](./markdown-features-head-metadata.mdx) feature).
 
-If you want to register extra tag names (like the `<highlight>` tag above), you should consider [wrapping `@theme/MDXComponents`](../../swizzling.md#wrapping), so you don't have to maintain all the existing mappings. Since the swizzle CLI doesn't allow wrapping non-component files yet, you should manually create the wrapper:
+If you want to register extra tag names (like the `<highlight>` tag above), you should consider [wrapping `@theme/MDXComponents`](../../swizzling.mdx#wrapping), so you don't have to maintain all the existing mappings. Since the swizzle CLI doesn't allow wrapping non-component files yet, you should manually create the wrapper:
 
 ```js title="src/theme/MDXComponents.js"
 import React from 'react';

website/docs/guides/markdown-features/markdown-features-toc.mdx

@@ -49,7 +49,7 @@ A special Markdown syntax lets you set an **explicit heading id**:
 
 :::tip
 
-Use the **[`write-heading-ids`](../../cli.md#docusaurus-write-heading-ids-sitedir)** CLI command to add explicit IDs to all your Markdown documents.
+Use the **[`write-heading-ids`](../../cli.mdx#docusaurus-write-heading-ids-sitedir)** CLI command to add explicit IDs to all your Markdown documents.
 
 :::
 
@@ -73,7 +73,7 @@ toc_max_heading_level: 5
 ---
 ```
 
-To set the heading level for _all_ pages, use the [`themeConfig.tableOfContents`](../../api/themes/theme-configuration.md#table-of-contents) option.
+To set the heading level for _all_ pages, use the [`themeConfig.tableOfContents`](../../api/themes/theme-configuration.mdx#table-of-contents) option.
 
 ```js title="docusaurus.config.js"
 module.exports = {