Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(mdx): use mdx exts for c-d folders #3456

Merged
merged 19 commits into from
Apr 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/cli/configuration.md → docs/cli/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
The CLI will look for the following environment variables:

- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md).
- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx).
- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).

## Flags
Expand Down
2 changes: 1 addition & 1 deletion docs/cli/livereload.md → docs/cli/livereload.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Live Reload

Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.

## Terms

Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!

## Contributing Etiquette

Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.

## Creating an Issue

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th

An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.

One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.

Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.

Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
/>
</head>

Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.

For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Guides

### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)

Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.

### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)

Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Next, create a local, native build of the app.

## Android Builds

Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:

```shell
ionic cordova build android --prod
Expand All @@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi

## iOS Builds

iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:

```shell
ionic cordova build ios --prod
```

Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.

## Add the Native App to Your Local Device

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova
:::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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $ ionic cordova platform add android

These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.

There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling.

Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).

Expand Down
File renamed without changes.
10 changes: 5 additions & 5 deletions docs/developing/config.md → docs/developing/config.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte

The following example disables ripple effects and default the mode to Material Design:

import GlobalExample from '@site/docs/developing/config/global/index.md';
import GlobalExample from '@site/docs/developing/config/global/index.mdx';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to update the path to use the new extension.


<GlobalExample />

## Per-Component Config

Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.

import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';

<PerComponentExample />

Expand All @@ -31,23 +31,23 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y

In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.

import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';

<PerPlatformExample />

### Fallbacks

The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:

import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';

<PerPlatformFallbackExample />

### Overrides

This final example allows you to accumulate a config object based upon different platform requirements.

import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';

<PerPlatformOverridesExample />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem';
:::note
Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.

See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect.
See the [Angular Platform Documentation](../../angular/platform.mdx) for the types of platforms you can detect.
:::

```ts title="app.module.ts"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ The table below shows how hardware back button support varies by environment.

### Hardware Back Button in a Browser or a PWA

Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.

Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).

Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ title: Previewing

There are many different options to test native functionality depending on your target platforms and needs.

- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
- [Deploy to iOS](ios.md)
- [Deploy to Android](android.md)
- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
- [Deploy to iOS](ios.mdx)
- [Deploy to Android](android.mdx)

## Run Locally in a Web Browser

Expand Down Expand Up @@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter

:::

When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md).
When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx).

## Simulating a Mobile Viewport

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`.

The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md).
The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx).

### Project Configuration File

Expand Down Expand Up @@ -42,7 +42,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
The CLI will look for the following environment variables:

- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md).
- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx).
- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).

## Flags
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Live Reload

One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices.
One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices.

## Terms

Expand Down Expand Up @@ -61,6 +61,6 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl

## Tips

- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md).
- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx).
- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`.
- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!

## Contributing Etiquette

Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.

## Creating an Issue

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th

An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.

One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.

Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import DocsCards from '@components/global/DocsCards';

# Deploying a Progressive Web App

Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.

For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Guides

### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)

Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.

### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)

Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Next, create a local, native build of the app.

## Android Builds

Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:

```shell
ionic cordova build android --prod
Expand All @@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi

## iOS Builds

iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:

```shell
ionic cordova build ios --prod
```

Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.

## Add the Native App to Your Local Device

Expand Down
Loading