docs(vue): remove period at the end of comments

Author: thetaPC

docs/vue/your-first-app.md

@@ -104,7 +104,7 @@ import App from './App.vue';
 import router from './router';
 
 import { IonicVue } from '@ionic/vue';
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
 /* Ionic styles are not shown in this example to keep it brief but will be included in the Ionic package downloaded for your app. Do not remove them. */
@@ -207,7 +207,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 <script setup lang="ts">
 // CHANGE: Add import from `ionicons/icons`
 import { camera, trash, close } from 'ionicons/icons';
-// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components.
+// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
 import {
   IonPage,
   IonHeader,
@@ -222,7 +222,7 @@ import {
   IonCol,
   IonImg,
 } from '@ionic/vue';
-// CHANGE: Remove or comment out the ExploreContainer import.
+// CHANGE: Remove or comment out the ExploreContainer import
 // import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
@@ -258,7 +258,7 @@ Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellip
 
 <script setup lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-// CHANGE: Update import by removing `ellipse` and adding `images`.
+// CHANGE: Update import by removing `ellipse` and adding `images`
 import { images, square, triangle } from 'ionicons/icons';
 </script>
 ```

docs/vue/your-first-app/2-taking-photos.md

@@ -89,10 +89,10 @@ import {
   IonImg,
 } from '@ionic/vue';
 
-// CHANGE: Add `usePhotoGallery` import.
+// CHANGE: Add `usePhotoGallery` import
 import { usePhotoGallery } from '@/composables/usePhotoGallery';
 
-// CHANGE: Destructure `addNewToGallery` from `usePhotoGallery().
+// CHANGE: Destructure `addNewToGallery` from `usePhotoGallery()
 const { addNewToGallery } = usePhotoGallery();
 </script>
 ```
@@ -114,7 +114,7 @@ export const usePhotoGallery = () => {
   // ...existing code...
 };
 
-// CHANGE: Add the `UserPhoto` interface.
+// CHANGE: Add the `UserPhoto` interface
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;
@@ -125,7 +125,7 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
 
 ```ts
 export const usePhotoGallery = () => {
-  // CHANGE: Add the `photos` array.
+  // CHANGE: Add the `photos` array
   const photos = ref<UserPhoto[]>([]);
 
   // ...existing code...
@@ -146,21 +146,21 @@ export const usePhotoGallery = () => {
       quality: 100,
     });
 
-    // CHANGE: Create the `fileName` with current timestamp.
+    // CHANGE: Create the `fileName` with current timestamp
     const fileName = Date.now() + '.jpeg';
-    // CHANGE: Create `savedImageFile` matching `UserPhoto` interface.
+    // CHANGE: Create `savedImageFile` matching `UserPhoto` interface
     const savedImageFile = {
       filepath: fileName,
       webviewPath: capturedPhoto.webPath,
     };
 
-    // CHANGE: Update the `photos` array with the new photo.
+    // CHANGE: Update the `photos` array with the new photo
     photos.value = [savedImageFile, ...photos.value];
   };
 
   return {
     addNewToGallery,
-    // CHANGE: Update return statement to include `photos` array.
+    // CHANGE: Update return statement to include `photos` array
     photos,
   };
 };
@@ -261,7 +261,7 @@ import {
 
 import { usePhotoGallery } from '@/composables/usePhotoGallery';
 
-// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
+// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`
 const { photos, addNewToGallery } = usePhotoGallery();
 </script>
 ```

docs/vue/your-first-app/3-saving-photos.md

@@ -26,7 +26,7 @@ import { Preferences } from '@capacitor/preferences';
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Add the `savePicture()` method.
+  // CHANGE: Add the `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     return {
       filepath: 'soon...',
@@ -57,7 +57,7 @@ import { Preferences } from '@capacitor/preferences';
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Update the `addNewToGallery()` method.
+  // CHANGE: Update the `addNewToGallery()` method
   const addNewToGallery = async () => {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
@@ -67,14 +67,14 @@ export const usePhotoGallery = () => {
     });
 
     const fileName = Date.now() + '.jpeg';
-    // CHANGE: Add `savedImageFile`.
+    // CHANGE: Add `savedImageFile`
     // Save the picture and add it to photo collection
     const savedImageFile = await savePicture(capturedPhoto, fileName);
 
     photos.value = [savedImageFile, ...photos.value];
   };
 
-  // CHANGE: Add `savePicture()` method.
+  // CHANGE: Add `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     return {
       filepath: 'soon...',
@@ -109,7 +109,7 @@ import { Preferences } from '@capacitor/preferences';
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Update the `savePicture()` method.
+  // CHANGE: Update the `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     // Fetch the photo, read as a blob, then convert to base64 format
     const response = await fetch(photo.webPath!);
@@ -130,7 +130,7 @@ export const usePhotoGallery = () => {
     };
   };
 
-  // CHANGE: Add `convertBlobToBase64()` method.
+  // CHANGE: Add `convertBlobToBase64()` method
   const convertBlobToBase64 = (blob: Blob) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

docs/vue/your-first-app/4-loading-photos.md

@@ -23,7 +23,7 @@ Open `usePhotoGallery.ts` and begin by defining a constant variable that will ac
 export const usePhotoGallery = () => {
   const photos = ref<UserPhoto[]>([]);
 
-  // CHANGE: Add a key for photo storage.
+  // CHANGE: Add a key for photo storage
   const PHOTO_STORAGE = 'photos';
 
   // ...existing code...
@@ -36,7 +36,7 @@ Next, at the end of the `usePhotoGallery()` method, add a call to the `cachePhot
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Add `cachePhotos()` method.
+  // CHANGE: Add `cachePhotos()` method
   const cachePhotos = () => {
     Preferences.set({
       key: PHOTO_STORAGE,
@@ -59,7 +59,7 @@ Add the call to the `watch()` method above the return statement in `usePhotoGall
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Add call to `watch` with `photos` array and `cachePhotos` method.
+  // CHANGE: Add call to `watch` with `photos` array and `cachePhotos` method
   watch(photos, cachePhotos);
 
   return {
@@ -75,7 +75,7 @@ With the photo array data saved, create a new method in the `usePhotoGallery()`
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Add `loadSaved()` method.
+  // CHANGE: Add `loadSaved()` method
   const loadSaved = async () => {
     const photoList = await Preferences.get({ key: PHOTO_STORAGE });
     const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
@@ -96,12 +96,12 @@ On mobile (coming up next!), we can directly set the source of an image tag - `<
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Update `loadSaved()` method.
+  // CHANGE: Update `loadSaved()` method
   const loadSaved = async () => {
     const photoList = await Preferences.get({ key: PHOTO_STORAGE });
     const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
-    // CHANGE: Display the photo by reading into base64 format.
+    // CHANGE: Display the photo by reading into base64 format
     for (const photo of photosInPreferences) {
       const file = await Filesystem.file({
         path: photo.filepath,
@@ -298,7 +298,7 @@ export const usePhotoGallery = () => {
     photos.value = photosInPreferences;
   };
 
-  // CHANGE: Add call to `onMounted()` with the `loadSaved()` method.
+  // CHANGE: Add call to `onMounted()` with the `loadSaved()` method
   onMounted(loadSaved);
   watch(photos, cachePhotos);
 

docs/vue/your-first-app/5-adding-mobile.md

@@ -26,7 +26,7 @@ import { ref, onMounted, watch } from 'vue';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
-// CHANGE: Add imports.
+// CHANGE: Add imports
 import { isPlatform } from '@ionic/vue';
 import { Capacitor } from '@capacitor/core';
 
@@ -40,11 +40,11 @@ First, we’ll update the photo saving functionality to support mobile. In the `
 Update `savePicture()` to look like the following:
 
 ```ts
-// CHANGE: Update the `savePicture()` method.
+// CHANGE: Update the `savePicture()` method
 const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
   let base64Data: string | Blob;
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // "hybrid" will detect mobile - iOS or Android
   if (isPlatform('hybrid')) {
     const file = await Filesystem.readFile({
@@ -82,11 +82,11 @@ import { Capacitor } from '@capacitor/core';
 Then update `savePicture()` to look like the following:
 
 ```ts
-// CHANGE: Update `savePicture()` method.
+// CHANGE: Update `savePicture()` method
 const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
   let base64Data: string | Blob;
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // "hybrid" will detect mobile - iOS or Android
   if (isPlatform('hybrid')) {
     const file = await Filesystem.readFile({
@@ -106,7 +106,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
     directory: Directory.Data,
   });
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   if (isPlatform('hybrid')) {
     // Display the new image by rewriting the 'file://' path to HTTP
     return {
@@ -127,12 +127,12 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method:
 
 ```ts
-// CHANGE: Update `loadSaved` method.
+// CHANGE: Update `loadSaved` method
 const loadSaved = async () => {
   const photoList = await Preferences.get({ key: PHOTO_STORAGE });
   const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // If running on the web...
   if (!isPlatform('hybrid')) {
     for (const photo of photosInPreferences) {

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

@@ -48,7 +48,7 @@ import { Capacitor } from '@capacitor/core';
 export const usePhotoGallery = () => {
   // ...existing code...
 
-  // CHANGE: Add `deletePhoto()` method.
+  // CHANGE: Add `deletePhoto()` method
   const deletePhoto = async (photo: UserPhoto) => {
     // Remove this photo from the Photos reference data array
     photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
@@ -67,7 +67,7 @@ export const usePhotoGallery = () => {
   return {
     photos,
     addNewToGallery,
-    // CHANGE: Add `deletePhoto()` to the return statement.
+    // CHANGE: Add `deletePhoto()` to the return statement
     deletePhoto,
   };
 };
@@ -98,18 +98,18 @@ import {
   IonRow,
   IonCol,
   IonImg,
-  // CHANGE: Add the `actionSheetController` import.
+  // CHANGE: Add the `actionSheetController` import
   actionSheetController,
 } from '@ionic/vue';
 
-// CHANGE: Add `UserPhoto` type import.
+// CHANGE: Add `UserPhoto` type import
 import type { UserPhoto } from '@/composables/usePhotoGallery';
 import { usePhotoGallery } from '@/composables/usePhotoGallery';
 
-// CHANGE: Add `deletePhoto()` method.
+// CHANGE: Add `deletePhoto()` method
 const { photos, addNewToGallery, deletePhoto } = usePhotoGallery();
 
-// CHANGE: Add `showActionSheet()` method.
+// CHANGE: Add `showActionSheet()` method
 const showActionSheet = async (photo: UserPhoto) => {
   const actionSheet = await actionSheetController.create({
     header: 'Photos',

versioned_docs/version-v7/vue/your-first-app.md

@@ -104,7 +104,7 @@ import App from './App.vue';
 import router from './router';
 
 import { IonicVue } from '@ionic/vue';
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
 /* Ionic styles are not shown in this example to keep it brief but will be included in the Ionic package downloaded for your app. Do not remove them. */
@@ -207,7 +207,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 <script setup lang="ts">
 // CHANGE: Add import from `ionicons/icons`
 import { camera, trash, close } from 'ionicons/icons';
-// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components.
+// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
 import {
   IonPage,
   IonHeader,
@@ -222,7 +222,7 @@ import {
   IonCol,
   IonImg,
 } from '@ionic/vue';
-// CHANGE: Remove or comment out the ExploreContainer import.
+// CHANGE: Remove or comment out the ExploreContainer import
 // import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
@@ -258,7 +258,7 @@ Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellip
 
 <script setup lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-// CHANGE: Update import by removing `ellipse` and adding `images`.
+// CHANGE: Update import by removing `ellipse` and adding `images`
 import { images, square, triangle } from 'ionicons/icons';
 </script>
 ```