From 6af75afeb4a49f8a5389acdc06943a919aa3291f Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 1 Sep 2026 15:55:25 -0700 Subject: [PATCH] chore(scripts): generate CLI and native pages as .mdx --- docs/angular/your-first-app.mdx | 4 ++-- docs/angular/your-first-app/2-taking-photos.mdx | 2 +- docs/angular/your-first-app/3-saving-photos.mdx | 2 +- docs/angular/your-first-app/4-loading-photos.mdx | 2 +- docs/cli/configuration.mdx | 2 +- docs/cli/livereload.mdx | 2 +- docs/developing/scaffolding.mdx | 4 ++-- docs/native-setup.mdx | 2 +- docs/react/your-first-app.mdx | 4 ++-- docs/react/your-first-app/2-taking-photos.mdx | 2 +- docs/react/your-first-app/3-saving-photos.mdx | 2 +- docs/react/your-first-app/4-loading-photos.mdx | 2 +- docs/vue/your-first-app.mdx | 4 ++-- docs/vue/your-first-app/2-taking-photos.mdx | 2 +- docs/vue/your-first-app/3-saving-photos.mdx | 2 +- docs/vue/your-first-app/4-loading-photos.mdx | 2 +- scripts/cli.mjs | 2 +- scripts/native.mjs | 2 +- versioned_docs/version-v8/angular/your-first-app.mdx | 4 ++-- .../version-v8/angular/your-first-app/2-taking-photos.mdx | 2 +- .../version-v8/angular/your-first-app/3-saving-photos.mdx | 2 +- .../version-v8/angular/your-first-app/4-loading-photos.mdx | 2 +- versioned_docs/version-v8/cli/configuration.mdx | 2 +- versioned_docs/version-v8/cli/livereload.mdx | 2 +- versioned_docs/version-v8/developing/scaffolding.mdx | 4 ++-- versioned_docs/version-v8/native-setup.mdx | 2 +- versioned_docs/version-v8/react/your-first-app.mdx | 4 ++-- .../version-v8/react/your-first-app/2-taking-photos.mdx | 2 +- .../version-v8/react/your-first-app/3-saving-photos.mdx | 2 +- .../version-v8/react/your-first-app/4-loading-photos.mdx | 2 +- versioned_docs/version-v8/vue/your-first-app.mdx | 4 ++-- .../version-v8/vue/your-first-app/2-taking-photos.mdx | 2 +- .../version-v8/vue/your-first-app/3-saving-photos.mdx | 2 +- .../version-v8/vue/your-first-app/4-loading-photos.mdx | 2 +- 34 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index a1e5363b11b..24a55a9da3d 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -38,7 +38,7 @@ Highlights include: - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub. @@ -104,7 +104,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index ee52853881c..d99b1f934af 100644 --- a/docs/angular/your-first-app/2-taking-photos.mdx +++ b/docs/angular/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Service diff --git a/docs/angular/your-first-app/3-saving-photos.mdx b/docs/angular/your-first-app/3-saving-photos.mdx index 4eb1fdfef95..d8bed67ff42 100644 --- a/docs/angular/your-first-app/3-saving-photos.mdx +++ b/docs/angular/your-first-app/3-saving-photos.mdx @@ -86,7 +86,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/angular/your-first-app/4-loading-photos.mdx b/docs/angular/your-first-app/4-loading-photos.mdx index f5ea15d6ed6..8dba9303247 100644 --- a/docs/angular/your-first-app/4-loading-photos.mdx +++ b/docs/angular/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/docs/cli/configuration.mdx b/docs/cli/configuration.mdx index 7bebbae6846..48c56086070 100644 --- a/docs/cli/configuration.mdx +++ b/docs/cli/configuration.mdx @@ -14,7 +14,7 @@ title: Configuration 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. Run `ionic config --help` or refer to 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. Run `ionic config --help` or refer to the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx). ### Project Configuration File diff --git a/docs/cli/livereload.mdx b/docs/cli/livereload.mdx index db6b96ff5fb..e8baecdb272 100644 --- a/docs/cli/livereload.mdx +++ b/docs/cli/livereload.mdx @@ -59,7 +59,7 @@ 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 (refer to `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. - If you are using a development container with Angular, live reload may not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`. diff --git a/docs/developing/scaffolding.mdx b/docs/developing/scaffolding.mdx index 9098949889b..b1ba4685af7 100644 --- a/docs/developing/scaffolding.mdx +++ b/docs/developing/scaffolding.mdx @@ -50,7 +50,7 @@ This command is only supported in Ionic Angular. ::: -The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. +The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. ```shell-session $ ionic generate @@ -96,4 +96,4 @@ The Ionic CLI uses the underlying framework tooling to stay close to best practi After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving. -For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](../cli/commands/generate.md). +For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](../cli/commands/generate.mdx). diff --git a/docs/native-setup.mdx b/docs/native-setup.mdx index 8e77bb84a7f..03a10ea2864 100644 --- a/docs/native-setup.mdx +++ b/docs/native-setup.mdx @@ -37,7 +37,7 @@ $ npm install @capacitor/camera Once installed, plugins can be imported into a component and you can call the native functionality directly from your code. -Using the [Camera plugin](native/camera.md) as an example, first install it: +Using the [Camera plugin](native/camera.mdx) as an example, first install it: ````mdx-code-block -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Hook diff --git a/docs/react/your-first-app/3-saving-photos.mdx b/docs/react/your-first-app/3-saving-photos.mdx index b8fa334d414..3be5237e5fe 100644 --- a/docs/react/your-first-app/3-saving-photos.mdx +++ b/docs/react/your-first-app/3-saving-photos.mdx @@ -93,7 +93,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/react/your-first-app/4-loading-photos.mdx b/docs/react/your-first-app/4-loading-photos.mdx index 1fa9e9c3ad7..75958791b42 100644 --- a/docs/react/your-first-app/4-loading-photos.mdx +++ b/docs/react/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx index 7245297ac81..981c5ed8a36 100644 --- a/docs/vue/your-first-app.mdx +++ b/docs/vue/your-first-app.mdx @@ -32,7 +32,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-vue) referenced in this guide on GitHub. @@ -92,7 +92,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/docs/vue/your-first-app/2-taking-photos.mdx b/docs/vue/your-first-app/2-taking-photos.mdx index 80e0e8d98fd..e383d9abbcb 100644 --- a/docs/vue/your-first-app/2-taking-photos.mdx +++ b/docs/vue/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Composable diff --git a/docs/vue/your-first-app/3-saving-photos.mdx b/docs/vue/your-first-app/3-saving-photos.mdx index c674e7c7d1a..23ab4798711 100644 --- a/docs/vue/your-first-app/3-saving-photos.mdx +++ b/docs/vue/your-first-app/3-saving-photos.mdx @@ -92,7 +92,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/vue/your-first-app/4-loading-photos.mdx b/docs/vue/your-first-app/4-loading-photos.mdx index 50841a176a6..53e340e4ae3 100644 --- a/docs/vue/your-first-app/4-loading-photos.mdx +++ b/docs/vue/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/scripts/cli.mjs b/scripts/cli.mjs index eeb01a3395b..7effc4dde4b 100644 --- a/scripts/cli.mjs +++ b/scripts/cli.mjs @@ -28,7 +28,7 @@ function writePage(page) { renderExamples(page), ].join(''); - const path = `cli/commands/${commandToKebab(page.name)}.md`; + const path = `cli/commands/${commandToKebab(page.name)}.mdx`; writeFileSync(`docs/${path}`, data); writeFileSync(`versioned_docs/version-v8/${path}`, data); } diff --git a/scripts/native.mjs b/scripts/native.mjs index dc20bda9556..1ed5c009d21 100644 --- a/scripts/native.mjs +++ b/scripts/native.mjs @@ -33,7 +33,7 @@ async function buildPluginApiDocs(pluginId) { const [readme, pkgJson] = await Promise.all([getReadme(pluginId), getPkgJsonData(pluginId)]); const apiContent = createApiPage(pluginId, readme, pkgJson); - const fileName = `${pluginId}.md`; + const fileName = `${pluginId}.mdx`; writeFileSync(`docs/native/${fileName}`, apiContent); writeFileSync(`versioned_docs/version-v8/native/${fileName}`, apiContent); diff --git a/versioned_docs/version-v8/angular/your-first-app.mdx b/versioned_docs/version-v8/angular/your-first-app.mdx index 813287bca33..beaaa889c3f 100644 --- a/versioned_docs/version-v8/angular/your-first-app.mdx +++ b/versioned_docs/version-v8/angular/your-first-app.mdx @@ -38,7 +38,7 @@ Highlights include: - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub. @@ -104,7 +104,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx index 5f6ca5307b9..bf357f59e20 100644 --- a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Service diff --git a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx index 4212757730d..72d809be232 100644 --- a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx @@ -86,7 +86,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx index e2b42a6f5eb..1cd887d84d6 100644 --- a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/versioned_docs/version-v8/cli/configuration.mdx b/versioned_docs/version-v8/cli/configuration.mdx index 7bebbae6846..48c56086070 100644 --- a/versioned_docs/version-v8/cli/configuration.mdx +++ b/versioned_docs/version-v8/cli/configuration.mdx @@ -14,7 +14,7 @@ title: Configuration 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. Run `ionic config --help` or refer to 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. Run `ionic config --help` or refer to the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx). ### Project Configuration File diff --git a/versioned_docs/version-v8/cli/livereload.mdx b/versioned_docs/version-v8/cli/livereload.mdx index db6b96ff5fb..e8baecdb272 100644 --- a/versioned_docs/version-v8/cli/livereload.mdx +++ b/versioned_docs/version-v8/cli/livereload.mdx @@ -59,7 +59,7 @@ 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 (refer to `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. - If you are using a development container with Angular, live reload may not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`. diff --git a/versioned_docs/version-v8/developing/scaffolding.mdx b/versioned_docs/version-v8/developing/scaffolding.mdx index 9098949889b..b1ba4685af7 100644 --- a/versioned_docs/version-v8/developing/scaffolding.mdx +++ b/versioned_docs/version-v8/developing/scaffolding.mdx @@ -50,7 +50,7 @@ This command is only supported in Ionic Angular. ::: -The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.md) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. +The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. ```shell-session $ ionic generate @@ -96,4 +96,4 @@ The Ionic CLI uses the underlying framework tooling to stay close to best practi After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving. -For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](../cli/commands/generate.md). +For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](../cli/commands/generate.mdx). diff --git a/versioned_docs/version-v8/native-setup.mdx b/versioned_docs/version-v8/native-setup.mdx index 8e77bb84a7f..03a10ea2864 100644 --- a/versioned_docs/version-v8/native-setup.mdx +++ b/versioned_docs/version-v8/native-setup.mdx @@ -37,7 +37,7 @@ $ npm install @capacitor/camera Once installed, plugins can be imported into a component and you can call the native functionality directly from your code. -Using the [Camera plugin](native/camera.md) as an example, first install it: +Using the [Camera plugin](native/camera.mdx) as an example, first install it: ````mdx-code-block -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Hook diff --git a/versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx b/versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx index f68985fb3cc..1188575ab8d 100644 --- a/versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx +++ b/versioned_docs/version-v8/react/your-first-app/3-saving-photos.mdx @@ -93,7 +93,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx b/versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx index 05c07c73146..a1e33eefb4d 100644 --- a/versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx +++ b/versioned_docs/version-v8/react/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/versioned_docs/version-v8/vue/your-first-app.mdx b/versioned_docs/version-v8/vue/your-first-app.mdx index 7245297ac81..981c5ed8a36 100644 --- a/versioned_docs/version-v8/vue/your-first-app.mdx +++ b/versioned_docs/version-v8/vue/your-first-app.mdx @@ -32,7 +32,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-vue) referenced in this guide on GitHub. @@ -92,7 +92,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx index eeca985368c..b6cc75d03bc 100644 --- a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Composable diff --git a/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx index 2fd905d6d66..bd7c36b4eef 100644 --- a/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx @@ -92,7 +92,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx index 92c2c276f63..1eb05718233 100644 --- a/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API