From a1af0721d3875883851688e6eae421a0c7d21214 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 1 Sep 2026 16:16:17 -0700 Subject: [PATCH] chore(i18n, 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 c025b641463..793eb858360 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -36,7 +36,7 @@ Ionic 4 および Cordova をカバーした前のバージョンのガイドを - Ionic Framework の[UI コンポーネント](../components.mdx)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。 - Ionic の公式ネイティブアプリランタイムである[Capacitor](https://capacitorjs.com)を使用して、ネイティブ iOS および Android モバイルアプリとしてデプロイ。 -- Capacitor の[Camera](../native/camera.md)、[Filesystem](../native/filesystem.md)、[Preferences](../native/preferences.md) API によって提供される Photo Gallery 機能。 +- Capacitor の[Camera](../native/camera.mdx)、[Filesystem](../native/filesystem.mdx)、[Preferences](../native/preferences.mdx) API によって提供される Photo Gallery 機能。 このガイドで参照されている[完全なアプリコード](https://github.com/ionic-team/tutorial-photo-gallery-angular)を GitHub で見つけてください。 @@ -98,7 +98,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -[Camera API](../native/camera.md)を含む一部の Capacitor プラグインは、Ionic の[PWA Elements ライブラリ](https://github.com/ionic-team/pwa-elements)を介して Web ベースの機能と UI を提供します。 +[Camera API](../native/camera.mdx)を含む一部の Capacitor プラグインは、Ionic の[PWA Elements ライブラリ](https://github.com/ionic-team/pwa-elements)を介して Web ベースの機能と UI を提供します。 これは別の依存関係なので、次にインストールします： diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index 11b837ad321..4952eaaf39a 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: カメラ撮影 /> -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 56d42e45f2d..f4e23af8076 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 2cd5f5ea77b..7f37d53e759 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: 写真の読み込み 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 704a484e497..c75707bed27 100644 --- a/docs/cli/configuration.mdx +++ b/docs/cli/configuration.mdx @@ -14,7 +14,7 @@ title: 設定 設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。 -CLI は、プロジェクトの設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定・表示するコマンドを提供します。`ionic config --help` を実行するか、[`ionic config get`](commands/config-get.md) および [`ionic config set`](commands/config-set.md) の使用方法に関するドキュメントを参照してください。 +CLI は、プロジェクトの設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定・表示するコマンドを提供します。`ionic config --help` を実行するか、[`ionic config get`](commands/config-get.mdx) および [`ionic config set`](commands/config-set.mdx) の使用方法に関するドキュメントを参照してください。 ### プロジェクト設定ファイル diff --git a/docs/cli/livereload.mdx b/docs/cli/livereload.mdx index 58e8391ee37..b3751d6b26c 100644 --- a/docs/cli/livereload.mdx +++ b/docs/cli/livereload.mdx @@ -55,7 +55,7 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl ## Tips -- Cordova では、`--device`、`--emulator`、および`--target`オプションを使用してターゲットデバイスを絞り込みます。`--list`オプションを使用すると、すべてのターゲットを一覧表示できます。使用方法は[コマンドドキュメント](commands/cordova-run.md)を参照してください。 +- Cordova では、`--device`、`--emulator`、および`--target`オプションを使用してターゲットデバイスを絞り込みます。`--list`オプションを使用すると、すべてのターゲットを一覧表示できます。使用方法は[コマンドドキュメント](commands/cordova-run.mdx)を参照してください。 - `ionic serve`および`ionic cordova run`または`ionic capacitor run`の`--livereload-url`オプションを使用することで、開発サーバープロセスとデプロイプロセスを分離できます。 - Android の場合、[adb](https://developer.android.com/studio/command-line/adb)を設定して、adb サーバー実行中に常にポートを転送することが可能です（`adb reverse`を参照）。ポート転送が設定されると、外部アドレスは不要になります。また、後続のデプロイに USB ケーブルを使用しなくても、TCP 経由で adb ブリッジを設定することもできます。 - Angular を使用した開発コンテナでは、ライブリロードが動作しない場合があります。これを修正するには、`angular.json`内で`projects.app.architect.serve.configurations.development.poll`を`1`に設定してください。 diff --git a/docs/developing/scaffolding.mdx b/docs/developing/scaffolding.mdx index d665d500376..3f402472ef5 100644 --- a/docs/developing/scaffolding.mdx +++ b/docs/developing/scaffolding.mdx @@ -48,7 +48,7 @@ src/ This command is only supported in Ionic Angular. ::: -Ionic CLI は、[`ionic generate`](../cli/commands/generate.md)コマンドを使用して新しいアプリ機能を生成できます。コマンドラインで`ionic generate`を実行すると、生成可能な利用可能な機能をリストする選択プロンプトが表示されます。 +Ionic CLI は、[`ionic generate`](../cli/commands/generate.mdx)コマンドを使用して新しいアプリ機能を生成できます。コマンドラインで`ionic generate`を実行すると、生成可能な利用可能な機能をリストする選択プロンプトが表示されます。 ```shell-session $ ionic generate @@ -92,4 +92,4 @@ Ionic CLI は、ベストプラクティスに近づけるために、基礎と 新しいページ用のファイルとディレクトリを作成した後、CLI は新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。 -詳細については、コマンドラインから`ionic g --help`を実行するか、[`ionic generate` documentation](../cli/commands/generate.md)を参照してください。 +詳細については、コマンドラインから`ionic g --help`を実行するか、[`ionic generate` documentation](../cli/commands/generate.mdx)を参照してください。 diff --git a/docs/native-setup.mdx b/docs/native-setup.mdx index 72bbf238691..9317b671ca5 100644 --- a/docs/native-setup.mdx +++ b/docs/native-setup.mdx @@ -37,7 +37,7 @@ $ npm install @capacitor/camera 一度インストールすれば、プラグインをコンポーネントにインポートし、コードから直接ネイティブ機能を呼び出すことができます。 -[Camera plugin](native/camera.md)を例にして、まずインストールしてみましょう： +[Camera plugin](native/camera.mdx)を例にして、まずインストールしてみましょう： ````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 03623e4e05f..753926343cc 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 adc6485282d..8cff7165d6f 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: 写真の読み込み 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 79e2fdb4d66..e483ec7add0 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. @@ -88,7 +88,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 d89fe23000c..006ef17c41d 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: カメラ撮影 /> -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 70065056cab..13398c45896 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 ad3e0d7dc37..99ae7653aca 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: 写真の読み込み 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 6f023147ef8..cd842c1bd7b 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-v6/${path}`, data); writeFileSync(`versioned_docs/version-v7/${path}`, data); diff --git a/scripts/native.mjs b/scripts/native.mjs index 670c05bbe14..503049fbb89 100644 --- a/scripts/native.mjs +++ b/scripts/native.mjs @@ -34,7 +34,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-v6/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 cdb197f2c89..b31c3efc4f3 100644 --- a/versioned_docs/version-v8/angular/your-first-app.mdx +++ b/versioned_docs/version-v8/angular/your-first-app.mdx @@ -36,7 +36,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. @@ -98,7 +98,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 d8c58c39f7d..be6a3b1705d 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 d590367a42e..5bf5416b569 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 87c9b5e76a6..2f3a2f1a951 100644 --- a/versioned_docs/version-v8/cli/livereload.mdx +++ b/versioned_docs/version-v8/cli/livereload.mdx @@ -55,7 +55,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 57a3cb740ba..4b2a4ae15b5 100644 --- a/versioned_docs/version-v8/developing/scaffolding.mdx +++ b/versioned_docs/version-v8/developing/scaffolding.mdx @@ -48,7 +48,7 @@ The `src/app/` directory contains the root app component and module as well as a 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 @@ -92,4 +92,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 6b6a42a1996..217e36e7fb3 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 e49f7852d0b..6e6351f2304 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. @@ -88,7 +88,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 73022a5cefd..574098f5c9b 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