docs(mdx): convert md to mdx

.editorconfig

@@ -10,6 +10,6 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.md]
+[{*.md,*.mdx}]
 insert_final_newline = false
 trim_trailing_whitespace = false

CONTRIBUTING.md

@@ -118,10 +118,10 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c
 The content of the Ionic docs is written as [Markdown](https://commonmark.org/) in `docs/`. Each Markdown file corresponds to a route unless explicitly changed in the frontmatter.
 
 ```
-/docs/                  =>  src/pages/index.md
-/docs/intro/cli         =>  src/pages/intro/cli.md
-/docs/theming/advanced  =>  src/pages/theming/advanced.md
-/docs/theming           =>  src/pages/theming.md
+/docs/                  =>  src/pages/index.mdx
+/docs/intro/cli         =>  src/pages/intro/cli.mdx
+/docs/theming/advanced  =>  src/pages/theming/advanced.mdx
+/docs/theming           =>  src/pages/theming.mdx
 ```
 
 You can make copy edits to the site by [editing the Markdown files directly on GitHub](https://help.github.com/articles/editing-files-in-another-user-s-repository/). In your pull request, please explain what was missing from or inaccurate about the content.

_templates/README.md

@@ -21,12 +21,12 @@ If you need a component for multiple versions of Ionic Framework, you (currently
 
 ## Usage
 
-Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.mdx)) by doing something similar to the following example:
+Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.mdx](../docs/api/button.mdx)) by doing something similar to the following example:
 
 ```
 ## Feature
 
-import Feature from '@site/static/usage/v8/button/feature/index.md';
+import Feature from '@site/static/usage/v8/button/feature/index.mdx';
 
 <Feature />
 ```

docs/angular/your-first-app.mdx

@@ -66,7 +66,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App

versioned_docs/version-v7/api.md → docs/api.mdx

@@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList';
   />
 </head>
 
-Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
+Each Ionic [component](components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
 
 <APIList sidebar={require('@site/sidebars.js').default} />

docs/api/picker-column-option.md

@@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column option in a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 <Props />

docs/api/picker-column.md

@@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+An individual column within a picker. Visit the [`ion-picker`](./picker.mdx) documentation for more details.
 
 ## Properties
 <Props />

docs/api/picker-legacy.md

@@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 :::warning Deprecation Notice
 
-`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible.
+`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.mdx) as soon as possible.
 
 :::
 

docs/cli.md → docs/cli.mdx

@@ -11,7 +11,7 @@ sidebar_label: Overview
   />
 </head>
 
-The Ionic command-line interface ([CLI](/docs/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps.
+The Ionic command-line interface ([CLI](reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps.
 
 ## Installation
 
@@ -37,18 +37,18 @@ Be sure to run `ionic <command> --help` in your project directory.
 For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
 :::
 
-<!-- TODO: image? -->
+{/* TODO: image? */}
 
 ## Architecture
 
-The Ionic CLI is built with [TypeScript](/docs/reference/glossary.mdx#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.
+The Ionic CLI is built with [TypeScript](reference/glossary.mdx#typescript) and [Node.js](reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.
 
 ## Troubleshooting
 
 To troubleshoot issues with the Ionic CLI, the following may be useful:
 
 - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`.
-- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment.mdx#node-npm) environment setup.
+- Make sure the latest Node LTS is installed. See [Node & npm](intro/environment.mdx#node-&-npm) environment setup.
 - The `--verbose` flag prints debugging messages, which may narrow down the issue.
-- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying.
-- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables).
+- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](cli/using-a-proxy.mdx) to configure request proxying.
+- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](cli/configuration.mdx#environment-variables).

docs/components.md → docs/components.mdx

@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component.
 
 <intro-end />
 
@@ -41,7 +41,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <!-- prettier-ignore -->
+  {/* prettier-ignore */}
   <p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
 </DocsCard>
 

docs/core-concepts/cross-platform.mdx

@@ -12,7 +12,7 @@ In a native application, it's common to make API calls to communicate with the d
 
 ### Ionic Native
 
-[Ionic Native](../native.md) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
+[Ionic Native](../native.mdx) has its own internal logic to detect if it is inside of a native environment. Instead of throwing a runtime error, it will print a warning if it is not a native environment and there are no Cordova plugins available. The app won’t break and it will continue to work, although without the native functionality.
 
 ### Platform Detection
 

docs/developing/tips.mdx

@@ -132,7 +132,7 @@ The iOS simulator enables testing and debugging of an app before it reaches an a
 
 Before it can be used, [Xcode](https://developer.apple.com/xcode/download/), Apple's IDE, must be installed.
 
-The [Ionic CLI](../cli.md) can then be used to run the app in the current directory on the simulator:
+The [Ionic CLI](../cli.mdx) can then be used to run the app in the current directory on the simulator:
 
 ```shell
 ionic cordova emulate ios -lc

docs/index.md → docs/index.mdx

@@ -121,7 +121,7 @@ Support for other frameworks will be considered in future releases.
 
 ## Ionic CLI
 
-The official [Ionic CLI](cli.md), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
+The official [Ionic CLI](cli.mdx), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account.
 
 ## Appflow
 
@@ -139,7 +139,7 @@ Ionic is actively developed and maintained full-time by a core team, and its eco
 
 There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 - <a href="https://forum.ionicframework.com/" target="_blank">Forum:</a> A great place for asking questions and sharing ideas.
 - <a href="https://twitter.com/ionicframework" target="_blank">Twitter:</a> Where we post updates and share content from the Ionic community.
 - <a href="https://github.com/ionic-team/ionic" target="_blank">GitHub:</a> For reporting bugs or requesting new features, create an issue here. PRs welcome!

docs/intro/cli.mdx

@@ -37,7 +37,7 @@ $ npm install -g @ionic/cli
 
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Start an App
@@ -50,7 +50,7 @@ ionic start
 
 ![start app thumbnails](/img/installation/start-app-thumbnails.png)
 
-To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
+To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.mdx).
 
 ## Run the App
 
@@ -61,4 +61,4 @@ $ cd myApp
 $ ionic serve
 ```
 
-There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.md).
+There are a number of other ways to run an app, it's recommended to start with this workflow. To develop and test apps on devices and emulators, see the [Running an App Guide](../developing/previewing.mdx).

docs/intro/environment.mdx

@@ -41,7 +41,7 @@ $ npm --version
 ```
 
 :::note
-Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors).
+Permission errors are common on macOS when installing global packages with `npm`. If you get an `EACCES` error, see [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors).
 :::
 
 ## Git

docs/react/your-first-app.mdx

@@ -62,7 +62,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App

docs/reference/browser-support.mdx

@@ -14,7 +14,7 @@ Ionic's earliest goal was to make it easy to develop mobile apps using web techn
 
 ## Mobile Platforms
 
-In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
 
 | Framework |        Android         |  iOS  |
 | :-------: | :--------------------: | :---: |

docs/theming/advanced.mdx

@@ -62,8 +62,8 @@ While the application and stepped variables in the themes section are useful for
 | `--ion-safe-area-right`     | Adjust the safe area inset right of the app                                                          |
 | `--ion-safe-area-bottom`    | Adjust the safe area inset bottom of the app                                                         |
 | `--ion-safe-area-left`      | Adjust the safe area inset left of the app                                                           |
-| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin)              |
-| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding)           |
+| `--ion-margin`              | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin)             |
+| `--ion-padding`             | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding)          |
 | `--ion-placeholder-opacity` | Adjust the opacity of the placeholders used in the input, textarea, searchbar, and select components |
 
 ### Grid Variables

docs/theming/css-shadow-parts.mdx

@@ -103,11 +103,11 @@ There are some known limitations with [vendor prefixed pseudo-elements](#vendor-
 
 ## Ionic Framework Parts
 
-All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md).
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.mdx).
 
 In order to have parts a component must meet the following criteria:
 
-- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
+- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped) or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx).
 - It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
 - The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.