From 1fb80be83f3a8faae816d5ef8db17d940b142906 Mon Sep 17 00:00:00 2001 From: Jonathan Algar Date: Fri, 1 Mar 2024 22:24:03 +0000 Subject: [PATCH 001/115] add alttexter.yml --- .github/workflows/alttexter.yml | 48 +++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 .github/workflows/alttexter.yml diff --git a/.github/workflows/alttexter.yml b/.github/workflows/alttexter.yml new file mode 100644 index 00000000000..5d920c97873 --- /dev/null +++ b/.github/workflows/alttexter.yml @@ -0,0 +1,48 @@ +name: alttexter + +on: + pull_request: + types: [opened, synchronize] + paths: + - '**.md' + +permissions: + contents: write + pull-requests: write + issues: write + +jobs: + alttexter-ghclient: + runs-on: ubuntu-latest + container: + image: ghcr.io/jonathanalgar/alttexter-ghclient:latest + credentials: + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + steps: + - name: Set ref for checkout + id: set_ref + run: | + echo "REF=${{ github.event.pull_request.head.ref }}" >> $GITHUB_ENV + + - name: Checkout + uses: actions/checkout@v4.1.1 + with: + fetch-depth: 1 + ref: ${{ env.REF }} + + - name: Run script + env: + GITHUB_REPOSITORY: ${{ github.repository }} + PR_NUMBER: ${{ github.event.pull_request.number }} + ALTTEXTER_ENDPOINT: ${{ secrets.ALTTEXTER_ENDPOINT }} + ALTTEXTER_TOKEN: ${{ secrets.ALTTEXTER_TOKEN }} + ALTTEXTER_RATEMINUTE: ${{ vars.ALTTEXTER_RATEMINUTE }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + TOOLS_PAT: ${{ secrets.TOOLS_PAT }} + ALTTEXTER_GITHUB_TOKEN_OVERRIDE: ${{ vars.ALTTEXTER_GITHUB_TOKEN_OVERRIDE }} + ALTTEXTER_GITHUB_USERNAME: ${{ vars.ALTTEXTER_GITHUB_USERNAME }} + ALTTEXTER_GITHUB_EMAIL: ${{ vars.ALTTEXTER_GITHUB_EMAIL }} + ALTTEXTER_SILENTMODE: ${{ vars.ALTTEXTER_SILENTMODE }} + run: python /app/alttexter-ghclient.py \ No newline at end of file From 42d8ef4b60caad85939de87f62205e0a0b841fd8 Mon Sep 17 00:00:00 2001 From: Jonathan Algar Date: Fri, 1 Mar 2024 22:29:26 +0000 Subject: [PATCH 002/115] trigger small batch to test --- docs/angular/lifecycle.md | 4 ++-- docs/angular/your-first-app.md | 2 +- docs/angular/your-first-app/2-taking-photos.md | 2 +- docs/angular/your-first-app/6-deploying-mobile.md | 14 +++++++------- docs/core-concepts/webview.md | 2 +- .../guides/first-app-v3/intro.md | 4 ++-- .../first-app-v3/realtime-updates-ionic-deploy.md | 6 +++--- .../guides/first-app-v3/theming.md | 8 ++++---- .../first-app-v3/track-bugs-ionic-monitoring.md | 4 ++-- .../guides/first-app-v4/intro.md | 4 ++-- 10 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 0f981e64dc3..c8ad27c1f60 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -13,7 +13,7 @@ sidebar_label: Lifecycle This guide covers how the page life cycle works in an app built with Ionic and Angular. -![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png) +![](/img/guides/lifecycle/ioniclifecycle.png) ## Angular Life Cycle Events @@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). -![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif) +![](/img/guides/lifecycle/ioniclifecycle.gif) ## How Ionic Handles the Life of a Page diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index b876e2f66c4..efb711fe6d0 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -132,7 +132,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! -![Before and after going through this tutorial](/img/guides/first-app-cap-ng/email-photogallery.gif) +![](/img/guides/first-app-cap-ng/email-photogallery.gif) Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 2c94527390e..f1f87f66f74 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! -![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png) +![](/img/guides/first-app-cap-ng/camera-web.png) _(Your selfie is probably much better than mine)_ diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index e30d8acd79d..e4a107ee91d 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -60,7 +60,7 @@ ionic cap open ios In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." -![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png) +![](/img/guides/first-app-cap-ng/xcode-info-plist.png) Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." @@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin: Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. -![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png) +![](/img/guides/first-app-cap-ng/xcode-signing.png) With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: -![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png) +![](/img/guides/first-app-cap-ng/xcode-build-button.png) Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! -![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png) +![](/img/guides/first-app-cap-ng/ios-permissions-photo.png) ## Android Deployment @@ -92,7 +92,7 @@ ionic cap open android Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. -![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png) +![](/img/guides/first-app-cap-ng/android-manifest.png) Scroll to the `Permissions` section and ensure these entries are included: @@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included: Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. -![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png) +![](/img/guides/first-app-cap-ng/android-device.png) Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. -![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png) +![](/img/guides/first-app-cap-ng/android-permissions-photo.png) Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index a314d09f566..ef99b9b5292 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -22,7 +22,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs. -![webview architecture](/img/building/webview-architecture.png) +![](/img/building/webview-architecture.png) The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device. diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/docs/developer-resources/guides/first-app-v3/intro.md index 844aef86a7e..4baff2c0af3 100644 --- a/docs/developer-resources/guides/first-app-v3/intro.md +++ b/docs/developer-resources/guides/first-app-v3/intro.md @@ -2,7 +2,7 @@ The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: -![Before and after going through this tutorial](/img/guides/first-app-v3/gallery-combined.png) +![](/img/guides/first-app-v3/gallery-combined.png) It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/). @@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! -![Before and after going through this tutorial](/img/guides/first-app-v3/email-photogallery.gif) +![](/img/guides/first-app-v3/email-photogallery.gif) Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see: diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md index da6f9462ecc..6e4272cbff6 100644 --- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md +++ b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md @@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: -![app id location](/img/guides/first-app-v3/app-id-location.png) +![](/img/guides/first-app-v3/app-id-location.png) And we’ll just use “Master” as the channel name. Putting this together looks like: @@ -168,7 +168,7 @@ $ git push ionic master Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: -![deploy channel](/img/guides/first-app-v3/deploy-channel.png) +![](/img/guides/first-app-v3/deploy-channel.png) A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. @@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’ On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. -![deploy channel](/img/guides/first-app-v3/deploy-revertChange.png) +![](/img/guides/first-app-v3/deploy-revertChange.png) This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/docs/developer-resources/guides/first-app-v3/theming.md index 19ef3364069..5cf3b2ce98e 100644 --- a/docs/developer-resources/guides/first-app-v3/theming.md +++ b/docs/developer-resources/guides/first-app-v3/theming.md @@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: -![v3-theming](/img/guides/first-app-v3/v3-theming.png) +![](/img/guides/first-app-v3/v3-theming.png) You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: -![v3-theming-colors](/img/guides/first-app-v3/v3-themeColors.png) +![](/img/guides/first-app-v3/v3-themeColors.png) You can find these colors defined in `src/theme/variables.scss`. @@ -22,7 +22,7 @@ $colors: ( But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: -![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png) +![](/img/guides/first-app-v3/ion-lab-comparison.png) In our app, this is clearly visible in how the header and the icons are styled. @@ -40,7 +40,7 @@ imports: [ Now, the iOS version of our app has a Material Design skin! -![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png) +![](/img/guides/first-app-v3/ion-lab-md-styling.png) Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md index c4fac8c2871..640573fb8f9 100644 --- a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md +++ b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md @@ -75,11 +75,11 @@ ionic serve Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: -![event monitoring](/img/guides/first-app-v3/monitoring-event.png) +![](/img/guides/first-app-v3/monitoring-event.png) Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser. -![event details](/img/guides/first-app-v3/monitoring-details.png) +![](/img/guides/first-app-v3/monitoring-details.png) Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.md index bffc7ea9c28..6fa62f09952 100644 --- a/docs/developer-resources/guides/first-app-v4/intro.md +++ b/docs/developer-resources/guides/first-app-v4/intro.md @@ -2,7 +2,7 @@ The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: -![Before and after going through this tutorial](/img/guides/first-app-v3/gallery-combined.png) +![](/img/guides/first-app-v3/gallery-combined.png) It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). @@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! -![Before and after going through this tutorial](/img/guides/first-app-v3/email-photogallery.gif) +![](/img/guides/first-app-v3/email-photogallery.gif) Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: From 108c95e08dde42e3211c45228164798a7f677830 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:30:06 +0000 Subject: [PATCH 003/115] Update image alt and title attributes in docs/angular/your-first-app.md --- docs/angular/your-first-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index efb711fe6d0..9d1226e2210 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -132,7 +132,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! -![](/img/guides/first-app-cap-ng/email-photogallery.gif) +![Animated GIF showing the live reload feature in the Ionic Photo Gallery app within a code editor and web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif "Ionic Photo Gallery App Live Reload Demonstration") Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: From 7c90a0b098ebaa4d4cdeaf133c8a45eb84e537ab Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:30:08 +0000 Subject: [PATCH 004/115] Update image alt and title attributes in docs/angular/lifecycle.md --- docs/angular/lifecycle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index c8ad27c1f60..f4ac359659e 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -13,7 +13,7 @@ sidebar_label: Lifecycle This guide covers how the page life cycle works in an app built with Ionic and Angular. -![](/img/guides/lifecycle/ioniclifecycle.png) +![Diagram illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png "Ionic Lifecycle Diagram") ## Angular Life Cycle Events @@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). -![](/img/guides/lifecycle/ioniclifecycle.gif) +![Animated demonstration of Ionic page life cycle events in a browser console.](/img/guides/lifecycle/ioniclifecycle.gif "Ionic Lifecycle Animation") ## How Ionic Handles the Life of a Page From 79bd8f26a69b3c54c648a9d3d82b6008bedb516e Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:30:31 +0000 Subject: [PATCH 005/115] Update image alt and title attributes in docs/angular/your-first-app/2-taking-photos.md --- docs/angular/your-first-app/2-taking-photos.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index f1f87f66f74..afcdd49ad2f 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! -![](/img/guides/first-app-cap-ng/camera-web.png) +![Screenshot of a photo gallery app displaying a selfie taken with a webcam.](/img/guides/first-app-cap-ng/camera-web.png "Photo Gallery Selfie Example") _(Your selfie is probably much better than mine)_ From 10187b369ee2e0c000b0aa02b7673f9a3db4007f Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:31:18 +0000 Subject: [PATCH 006/115] Update image alt and title attributes in docs/angular/your-first-app/6-deploying-mobile.md --- docs/angular/your-first-app/6-deploying-mobile.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index e4a107ee91d..13a9e3f938f 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -60,7 +60,7 @@ ionic cap open ios In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." -![](/img/guides/first-app-cap-ng/xcode-info-plist.png) +![Screenshot of the Info.plist file in Xcode showing the NSCameraUsageDescription key.](/img/guides/first-app-cap-ng/xcode-info-plist.png "Xcode Info.plist Configuration") Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." @@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin: Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. -![](/img/guides/first-app-cap-ng/xcode-signing.png) +![Xcode interface displaying the Signing & Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png "Xcode Signing & Capabilities") With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: -![](/img/guides/first-app-cap-ng/xcode-build-button.png) +![Xcode toolbar highlighting the Build button used to compile and run an iOS app.](/img/guides/first-app-cap-ng/xcode-build-button.png "Xcode Build Button") Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! -![](/img/guides/first-app-cap-ng/ios-permissions-photo.png) +![iOS device screen showing the camera permission prompt and a photo taken with the app.](/img/guides/first-app-cap-ng/ios-permissions-photo.png "iOS Permissions and Photo Capture") ## Android Deployment @@ -92,7 +92,7 @@ ionic cap open android Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. -![](/img/guides/first-app-cap-ng/android-manifest.png) +![Android Studio editor showing the AndroidManifest.xml file with camera permissions.](/img/guides/first-app-cap-ng/android-manifest.png "Android Manifest Configuration") Scroll to the `Permissions` section and ensure these entries are included: @@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included: Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. -![](/img/guides/first-app-cap-ng/android-device.png) +![Android Studio interface with the Run button and a connected device selected.](/img/guides/first-app-cap-ng/android-device.png "Android Studio Run Configuration") Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. -![](/img/guides/first-app-cap-ng/android-permissions-photo.png) +![Android device screen displaying the camera permission prompt and a photo taken with the app.](/img/guides/first-app-cap-ng/android-permissions-photo.png "Android Permissions and Photo Capture") Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 From 68631d3ed5611439bac525cc03a589b801326707 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:31:31 +0000 Subject: [PATCH 007/115] Update image alt and title attributes in docs/core-concepts/webview.md --- docs/core-concepts/webview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index ef99b9b5292..c1e089e58b0 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -22,7 +22,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs. -![](/img/building/webview-architecture.png) +![Diagram illustrating the architecture of a Web View, showing the interaction between the app, Web View, bridge, and hardware APIs on native and Ionic apps.](/img/building/webview-architecture.png "Web View Architecture Diagram") The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device. From 2b8bcdf22e55a2c846e870ff7ef130017cc1a6a0 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:32:03 +0000 Subject: [PATCH 008/115] Update image alt and title attributes in docs/developer-resources/guides/first-app-v3/intro.md --- docs/developer-resources/guides/first-app-v3/intro.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/docs/developer-resources/guides/first-app-v3/intro.md index 4baff2c0af3..f377b2615a0 100644 --- a/docs/developer-resources/guides/first-app-v3/intro.md +++ b/docs/developer-resources/guides/first-app-v3/intro.md @@ -2,7 +2,7 @@ The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: -![](/img/guides/first-app-v3/gallery-combined.png) +![Screenshot showing the Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png "Ionic App Before and After Photo Gallery") It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/). @@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! -![](/img/guides/first-app-v3/email-photogallery.gif) +![Animated GIF demonstrating the addition of photo gallery functionality to the Ionic app's 'About' page.](/img/guides/first-app-v3/email-photogallery.gif "Ionic Photo Gallery Functionality") Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see: From 685d6c7b809efe5deb3b905ce3d42a7ad8a17b52 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:32:33 +0000 Subject: [PATCH 009/115] Update image alt and title attributes in docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md --- .../guides/first-app-v3/realtime-updates-ionic-deploy.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md index 6e4272cbff6..f9e14cdfb14 100644 --- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md +++ b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md @@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: -![](/img/guides/first-app-v3/app-id-location.png) +![Screenshot highlighting the location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png "Appflow App ID Location") And we’ll just use “Master” as the channel name. Putting this together looks like: @@ -168,7 +168,7 @@ $ git push ionic master Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: -![](/img/guides/first-app-v3/deploy-channel.png) +![Screenshot showing the Deploy Builds section in Appflow with a commit labeled 'master'.](/img/guides/first-app-v3/deploy-channel.png "Appflow Deploy Channel") A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. @@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’ On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. -![](/img/guides/first-app-v3/deploy-revertChange.png) +![Screenshot of the Appflow dashboard showing how to revert to a previous build by assigning it to a channel.](/img/guides/first-app-v3/deploy-revertChange.png "Appflow Deploy Revert Change") This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. From 2d419e1076b719d3e05f2879a4e193525e70b225 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:33:16 +0000 Subject: [PATCH 010/115] Update image alt and title attributes in docs/developer-resources/guides/first-app-v3/theming.md --- docs/developer-resources/guides/first-app-v3/theming.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/docs/developer-resources/guides/first-app-v3/theming.md index 5cf3b2ce98e..3280c9d69c2 100644 --- a/docs/developer-resources/guides/first-app-v3/theming.md +++ b/docs/developer-resources/guides/first-app-v3/theming.md @@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: -![](/img/guides/first-app-v3/v3-theming.png) +![Screenshot of Ionic default color Sass variables with primary, secondary, danger, light, and dark colors.](/img/guides/first-app-v3/v3-theming.png "Default Ionic Sass Variables") You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: -![](/img/guides/first-app-v3/v3-themeColors.png) +![Code snippet showing customized Ionic Sass variables with additional twitter color base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png "Customized Ionic Sass Variables") You can find these colors defined in `src/theme/variables.scss`. @@ -22,7 +22,7 @@ $colors: ( But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: -![](/img/guides/first-app-v3/ion-lab-comparison.png) +![Comparison of Ionic app interface on iOS and Android platforms showing native styling differences.](/img/guides/first-app-v3/ion-lab-comparison.png "Ionic Platform Specific Styles") In our app, this is clearly visible in how the header and the icons are styled. @@ -40,7 +40,7 @@ imports: [ Now, the iOS version of our app has a Material Design skin! -![](/img/guides/first-app-v3/ion-lab-md-styling.png) +![Ionic app interface demonstrating Material Design styling applied to both iOS and Android versions.](/img/guides/first-app-v3/ion-lab-md-styling.png "Ionic Material Design Styling") Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! From 8e7371fb3d726631738febe15d1d2adddd38bc75 Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:33:38 +0000 Subject: [PATCH 011/115] Update image alt and title attributes in docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md --- .../guides/first-app-v3/track-bugs-ionic-monitoring.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md index 640573fb8f9..269b0a56d8b 100644 --- a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md +++ b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md @@ -75,11 +75,11 @@ ionic serve Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: -![](/img/guides/first-app-v3/monitoring-event.png) +![Screenshot of an Ionic Monitoring event showing an error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png "Ionic Monitoring Event Overview") Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser. -![](/img/guides/first-app-v3/monitoring-details.png) +![Detailed view of an Ionic Monitoring event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png "Detailed Ionic Monitoring Event Log") Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. From ac586bd7e47091832cc7c050f98a9fc43f287cfa Mon Sep 17 00:00:00 2001 From: github-actions Date: Fri, 1 Mar 2024 22:34:11 +0000 Subject: [PATCH 012/115] Update image alt and title attributes in docs/developer-resources/guides/first-app-v4/intro.md --- docs/developer-resources/guides/first-app-v4/intro.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.md index 6fa62f09952..bb4624610a2 100644 --- a/docs/developer-resources/guides/first-app-v4/intro.md +++ b/docs/developer-resources/guides/first-app-v4/intro.md @@ -2,7 +2,7 @@ The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: -![](/img/guides/first-app-v3/gallery-combined.png) +![Before and after screenshots of an Ionic app showing the transformation from a blank Tab Two to a Photo Gallery with images.](/img/guides/first-app-v3/gallery-combined.png "Ionic App Before and After Photo Gallery") It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). @@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! -![](/img/guides/first-app-v3/email-photogallery.gif) +![Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.](/img/guides/first-app-v3/email-photogallery.gif "Ionic LiveReload Feature Demonstration") Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: From 5688802096b5237c93086b0ffb9f51f30164a2f8 Mon Sep 17 00:00:00 2001 From: Jonathan Algar Date: Fri, 1 Mar 2024 23:11:48 +0000 Subject: [PATCH 013/115] trigger the rest with langsmith switched on --- .../guides/first-app-v4/theming.md | 8 ++++---- docs/developing/tips.md | 2 +- docs/intro/cli.md | 2 +- docs/react/quickstart.md | 2 +- docs/react/your-first-app.md | 2 +- docs/react/your-first-app/2-taking-photos.md | 2 +- docs/react/your-first-app/6-deploying-mobile.md | 14 +++++++------- docs/vue/quickstart.md | 2 +- docs/vue/your-first-app.md | 2 +- docs/vue/your-first-app/2-taking-photos.md | 2 +- docs/vue/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v5/angular/lifecycle.md | 4 ++-- .../version-v5/angular/your-first-app.md | 2 +- .../angular/your-first-app/2-taking-photos.md | 2 +- .../angular/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v5/core-concepts/webview.md | 2 +- versioned_docs/version-v5/deployment/play-store.md | 2 +- .../guides/first-app-v3/intro.md | 4 ++-- .../first-app-v3/realtime-updates-ionic-deploy.md | 6 +++--- .../guides/first-app-v3/theming.md | 8 ++++---- .../first-app-v3/track-bugs-ionic-monitoring.md | 4 ++-- .../guides/first-app-v4/intro.md | 4 ++-- .../guides/first-app-v4/theming.md | 8 ++++---- versioned_docs/version-v5/developing/android.md | 12 ++++++------ versioned_docs/version-v5/developing/ios.md | 8 ++++---- versioned_docs/version-v5/developing/tips.md | 2 +- versioned_docs/version-v5/intro/cli.md | 2 +- versioned_docs/version-v5/react/quickstart.md | 2 +- versioned_docs/version-v5/react/your-first-app.md | 2 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v5/vue/quickstart.md | 2 +- versioned_docs/version-v5/vue/your-first-app.md | 2 +- .../vue/your-first-app/2-taking-photos.md | 2 +- .../vue/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v6/angular/lifecycle.md | 4 ++-- .../version-v6/angular/your-first-app.md | 2 +- .../angular/your-first-app/2-taking-photos.md | 2 +- .../angular/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v6/core-concepts/webview.md | 2 +- .../guides/first-app-v3/intro.md | 4 ++-- .../first-app-v3/realtime-updates-ionic-deploy.md | 6 +++--- .../guides/first-app-v3/theming.md | 8 ++++---- .../first-app-v3/track-bugs-ionic-monitoring.md | 4 ++-- .../guides/first-app-v4/intro.md | 4 ++-- .../guides/first-app-v4/theming.md | 8 ++++---- versioned_docs/version-v6/developing/android.md | 12 ++++++------ versioned_docs/version-v6/developing/ios.md | 8 ++++---- versioned_docs/version-v6/developing/tips.md | 2 +- versioned_docs/version-v6/intro/cli.md | 2 +- versioned_docs/version-v6/react/quickstart.md | 2 +- versioned_docs/version-v6/react/your-first-app.md | 2 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v6/vue/quickstart.md | 2 +- versioned_docs/version-v6/vue/your-first-app.md | 2 +- .../vue/your-first-app/2-taking-photos.md | 2 +- .../vue/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v7/angular/lifecycle.md | 4 ++-- .../version-v7/angular/your-first-app.md | 2 +- .../angular/your-first-app/2-taking-photos.md | 2 +- .../angular/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v7/core-concepts/webview.md | 2 +- .../guides/first-app-v3/intro.md | 4 ++-- .../first-app-v3/realtime-updates-ionic-deploy.md | 6 +++--- .../guides/first-app-v3/theming.md | 8 ++++---- .../first-app-v3/track-bugs-ionic-monitoring.md | 4 ++-- .../guides/first-app-v4/intro.md | 4 ++-- .../guides/first-app-v4/theming.md | 8 ++++---- versioned_docs/version-v7/developing/tips.md | 2 +- versioned_docs/version-v7/intro/cli.md | 2 +- versioned_docs/version-v7/react/quickstart.md | 2 +- versioned_docs/version-v7/react/your-first-app.md | 2 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/6-deploying-mobile.md | 14 +++++++------- versioned_docs/version-v7/vue/quickstart.md | 2 +- versioned_docs/version-v7/vue/your-first-app.md | 2 +- .../vue/your-first-app/2-taking-photos.md | 2 +- .../vue/your-first-app/6-deploying-mobile.md | 14 +++++++------- 79 files changed, 200 insertions(+), 200 deletions(-) diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.md index 6170b2d673a..4b0dfa03de0 100644 --- a/docs/developer-resources/guides/first-app-v4/theming.md +++ b/docs/developer-resources/guides/first-app-v4/theming.md @@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: -![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png) +![](/img/guides/first-app-v4/theming-defaults.png) You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: -![v4-theming-properties](/img/guides/first-app-v4/theming-properties.png) +![](/img/guides/first-app-v4/theming-properties.png) You can find these colors defined in `src/theme/variables.scss`. @@ -31,7 +31,7 @@ The easiest and most powerful way to create custom color palettes for your app But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: -![ios and android comparison](/img/guides/first-app-v3/ion-lab-comparison.png) +![](/img/guides/first-app-v3/ion-lab-comparison.png) In our app, this is clearly visible in how the header and the icons are styled. @@ -49,7 +49,7 @@ imports: [ Now, the iOS version of our app has a Material Design skin! -![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png) +![](/img/guides/first-app-v3/ion-lab-md-styling.png) Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. diff --git a/docs/developing/tips.md b/docs/developing/tips.md index 2adf19ea58d..870620461b9 100644 --- a/docs/developing/tips.md +++ b/docs/developing/tips.md @@ -122,7 +122,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac). ::: -![app with a different mode](/img/faq/tips/change-device-platform.png) +![](/img/faq/tips/change-device-platform.png) Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport. diff --git a/docs/intro/cli.md b/docs/intro/cli.md index 0ddf23169d3..c27aeb99e74 100644 --- a/docs/intro/cli.md +++ b/docs/intro/cli.md @@ -48,7 +48,7 @@ Create an Ionic app using one of the pre-made app templates, or a blank one to s ionic start ``` -![start app thumbnails](/img/installation/start-app-thumbnails.png) +![](/img/installation/start-app-thumbnails.png) To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md). diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index f7bef34201b..eba4715f05b 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of Currently, the `Home` component looks like so: -![React home component](/img/guides/react/first-app/home-route.png) +![](/img/guides/react/first-app/home-route.png) ```tsx import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md index d4428b1a5e2..9c01d816f83 100644 --- a/docs/react/your-first-app.md +++ b/docs/react/your-first-app.md @@ -124,7 +124,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! -![Before and after going through this tutorial](/img/guides/react/first-app/live-reload.gif) +![](/img/guides/react/first-app/live-reload.gif) Open `/src/pages/Tab2.tsx`. We see: diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md index ac70c03c26c..4d74a4283b9 100644 --- a/docs/react/your-first-app/2-taking-photos.md +++ b/docs/react/your-first-app/2-taking-photos.md @@ -72,7 +72,7 @@ const Tab2: React.FC = () => { Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! -![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png) +![](/img/guides/first-app-cap-ng/camera-web.png) _(Your selfie is probably much better than mine)_ diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.md index 70b47820eb6..a4c67831faf 100644 --- a/docs/react/your-first-app/6-deploying-mobile.md +++ b/docs/react/your-first-app/6-deploying-mobile.md @@ -53,7 +53,7 @@ ionic cap open ios In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." -![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png) +![](/img/guides/first-app-cap-ng/xcode-info-plist.png) Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." @@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin: Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. -![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png) +![](/img/guides/first-app-cap-ng/xcode-signing.png) With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: -![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png) +![](/img/guides/first-app-cap-ng/xcode-build-button.png) Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! -![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png) +![](/img/guides/first-app-cap-ng/ios-permissions-photo.png) ## Android @@ -85,7 +85,7 @@ ionic cap open android Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. -![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png) +![](/img/guides/first-app-cap-ng/android-manifest.png) Scroll to the `Permissions` section and ensure these entries are included: @@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included: Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. -![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png) +![](/img/guides/first-app-cap-ng/android-device.png) Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. -![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png) +![](/img/guides/first-app-cap-ng/android-permissions-photo.png) Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index 25acbd0062e..c85c2f5cec9 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -189,7 +189,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic Currently, the `Home` component looks like so: -![Vue home component](/img/guides/vue/first-app/home-route.png) +![](/img/guides/vue/first-app/home-route.png) ```html