Merge branch 'main' into FW-6803

Author: brandyscarney

docs/angular/your-first-app/7-live-reload.md

@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 
   // delete photo file from filesystem
   const filename = photo.filepath
-                      .substr(photo.filepath.lastIndexOf('/') + 1);
+                      .substring(photo.filepath.lastIndexOf('/') + 1);
 
   await Filesystem.deleteFile({
     path: filename,

docs/deployment/progressive-web-app.md

@@ -19,7 +19,13 @@ Because Ionic Apps are built with web technologies, they can run just as well as
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 
 <DocsCards>
-  <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
-  <DocsCard header="React" href="../react/pwa" img="/img/frameworks/react.svg"></DocsCard>
-  <DocsCard header="Vue" href="../vue/pwa" img="/img/frameworks/vue.svg"></DocsCard>
+  <DocsCard header="Angular" href="../angular/pwa" img="/img/frameworks/angular.svg">
+    Get started with progressive web apps in Angular.
+  </DocsCard>
+  <DocsCard header="React" href="../react/pwa" img="/img/frameworks/react.svg">
+    Get started with progressive web apps in React.
+  </DocsCard>
+  <DocsCard header="Vue" href="../vue/pwa" img="/img/frameworks/vue.svg">
+    Get started with progressive web apps in Vue.
+  </DocsCard>
 </DocsCards>

docs/developing/android.md

@@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy Android guide?
 
-The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android).
+The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android).
 
 :::
 
@@ -30,7 +30,7 @@ The Developing for Android guide has officially migrated to the [Capacitor docum
   </DocsCard>
   <DocsCard
     header="Developing for Android with Cordova (Legacy)"
-    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android"
+    href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.</p>

docs/developing/ios.md

@@ -17,7 +17,7 @@ import DocsCards from '@components/global/DocsCards';
 
 :::info Looking for the legacy iOS guide?
 
-The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios).
+The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios).
 
 :::
 
@@ -31,7 +31,7 @@ The Developing for iOS guide has officially migrated to the [Capacitor documenta
   </DocsCard>
   <DocsCard
     header="Developing for iOS with Cordova (Legacy)"
-    href="https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios"
+    href="https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios"
     icon="/icons/native-cordova-bot.png"
   >
     <p>Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.</p>

docs/react/your-first-app/7-live-reload.md

@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
 
 ```tsx
 import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,

docs/vue/build-options.md

@@ -28,7 +28,7 @@ Also note that locally registered components are not available in subcomponents.
 
 Let's take a look at how local component registration works:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -38,8 +38,8 @@ Let's take a look at how local component registration works:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonPage } from '@ionic/vue';
-  import SubComponent from '@/components/SubComponent.vue';
+import { IonContent, IonPage } from '@ionic/vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -70,7 +70,7 @@ app.component('ion-page', IonPage);
 
 **MyComponent.vue**
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -80,7 +80,7 @@ app.component('ion-page', IonPage);
 </template>
 
 <script setup lang="ts">
-  import SubComponent from '@/components/SubComponent.vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 

docs/vue/lifecycle.md

@@ -21,7 +21,7 @@ These lifecycles are only called on components directly mapped by a router. This
 
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage } from '@ionic/vue';
 
@@ -47,7 +47,7 @@ const ionViewWillLeave = () => {
 
 These lifecycles can also be expressed using Vue 3's Composition API:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 

docs/vue/navigation.md

@@ -103,7 +103,7 @@ Say we start on the `home` route, and we want to add a button that takes us to t
 
 We can also programmatically navigate in our app by using the router API:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -113,10 +113,10 @@ We can also programmatically navigate in our app by using the router API:
 </template>
 
 <script setup lang="ts">
-  import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { useRouter } from 'vue-router';
+import { IonButton, IonContent, IonPage } from '@ionic/vue';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter();
+const router = useRouter();
 </script>
 ```
 
@@ -364,7 +364,7 @@ Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route o
 
 Let's start by taking a look at our `Tabs` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-tabs>
@@ -390,8 +390,8 @@ Let's start by taking a look at our `Tabs` component:
 </template>
 
 <script setup lang="ts">
-  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-  import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+import { ellipse, square, triangle } from 'ionicons/icons';
 </script>
 ```
 
@@ -494,7 +494,7 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -507,7 +507,7 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -550,7 +550,7 @@ Notice that we have now added `:id` to the end of our `detail` path string. URL
 
 Let's look at how to use it in our component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -564,11 +564,11 @@ Let's look at how to use it in our component:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { useRoute } from 'vue-router';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRoute } from 'vue-router';
 
-  const route = useRoute();
-  const { id } = route.params;
+const route = useRoute();
+const { id } = route.params;
 </script>
 ```
 

docs/vue/performance.md

@@ -11,7 +11,7 @@ When using `v-for` with Ionic components, we recommend using Vue's `key` attribu
 
 By using `key` you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to use `key`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -23,14 +23,14 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  const items = ref([
-    { id: 0, value: 'Item 0' },
-    { id: 1, value: 'Item 1' },
-    ...
-  ]);
+import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+
+const items = ref([
+  { id: 0, value: 'Item 0' },
+  { id: 1, value: 'Item 1' },
+  ...
+]);
 </script>
 ```