diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index c025b64146..793eb85836 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 11b837ad32..4952eaaf39 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 56d42e45f2..f4e23af807 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 2cd5f5ea77..7f37d53e75 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 704a484e49..c75707bed2 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 58e8391ee3..b3751d6b26 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 d665d50037..3f402472ef 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 72bbf23869..9317b671ca 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 03623e4e05..753926343c 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 adc6485282..8cff7165d6 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 79e2fdb4d6..e483ec7add 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 d89fe23000..006ef17c41 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 70065056ca..13398c4589 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 ad3e0d7dc3..99ae7653ac 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 6f023147ef..cd842c1bd7 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 670c05bbe1..503049fbb8 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 cdb197f2c8..b31c3efc4f 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 5f6ca5307b..bf357f59e2 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 4212757730..72d809be23 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 d8c58c39f7..be6a3b1705 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 d590367a42..5bf5416b56 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 87c9b5e76a..2f3a2f1a95 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 57a3cb740b..4b2a4ae15b 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 8e77bb84a7..03a10ea286 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 f68985fb3c..1188575ab8 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 6b6a42a199..217e36e7fb 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 e49f7852d0..6e6351f230 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 eeca985368..b6cc75d03b 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 2fd905d6d6..bd7c36b4ee 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 73022a5cef..574098f5c9 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