docs(quickstart): only use full file path in the code title

Author: brandyscarney

docs/angular/quickstart.md

@@ -79,7 +79,7 @@ Let's walk through these files to understand the app's structure.
 
 ## View the App Component
 
-The root of your app is defined in `src/app/app.component.ts`:
+The root of your app is defined in `app.component.ts`:
 
 ```ts title="src/app/app.component.ts"
 import { Component } from '@angular/core';
@@ -95,7 +95,7 @@ export class AppComponent {
 }
 ```
 
-And its template in `src/app/app.component.html`:
+And its template in `app.component.html`:
 
 ```html title="src/app/app.component.html"
 <ion-app>
@@ -107,7 +107,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 ## View Routes
 
-Routes are defined in `src/app/app.routes.ts`:
+Routes are defined in `app.routes.ts`:
 
 ```ts title="src/app/app.routes.ts"
 import { Routes } from '@angular/router';
@@ -129,7 +129,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `src/app/home/home.page.ts`, imports the Ionic components it uses:
+The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
 
 ```ts title="src/app/home/home.page.ts"
 import { Component } from '@angular/core';
@@ -146,7 +146,7 @@ export class HomePage {
 }
 ```
 
-And the template, in the `src/app/home/home.page.html` file, uses those components:
+And the template, in the `home.page.html` file, uses those components:
 
 ```html title="src/app/home/home.page.html"
 <ion-header [translucent]="true">
@@ -190,7 +190,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 </ion-content>
 ```
 
-Then, import the `IonButton` component in `src/app/home/home.page.ts`:
+Then, import the `IonButton` component in `home.page.ts`:
 
 ```ts title="src/app/home/home.page.ts"
 import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@@ -209,9 +209,9 @@ To add a new page, generate it with the CLI:
 ionic generate page new
 ```
 
-A route will be automatically added to `src/app/app.routes.ts`.
+A route will be automatically added to `app.routes.ts`.
 
-In `src/app/new/new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -224,7 +224,7 @@ In `src/app/new/new.page.html`, you can add a [Back Button](/docs/api/back-butto
 </ion-header>
 ```
 
-And import `IonBackButton` and `IonButtons` in `src/app/new/new.page.ts`:
+And import `IonBackButton` and `IonButtons` in `new.page.ts`:
 
 ```ts title="src/app/new/new.page.ts"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@@ -239,13 +239,13 @@ The `ion-back-button` will automatically handle navigation back to the previous
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `src/app/home/home.page.html`:
+To navigate to the new page, update the button in `home.page.html`:
 
 ```html title="src/app/home/home.page.html"
 <ion-button [routerLink]="['/new']">Navigate</ion-button>
 ```
 
-Then, import `RouterLink` in `src/app/home/home.page.ts`:
+Then, import `RouterLink` in `home.page.ts`:
 
 ```ts title="src/app/home/home.page.ts"
 import { RouterLink } from '@angular/router';
@@ -262,7 +262,7 @@ Navigating can also be performed using Angular's Router service. See the [Angula
 
 ## Add Icons to the New Page
 
-Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `src/app/new/new.page.html`:
+Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
 
 ```html title="src/app/new/new.page.html"
 <ion-content>
@@ -273,7 +273,7 @@ Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. Y
 </ion-content>
 ```
 
-You'll also need to import and register these icons in `src/app/new/new.page.ts`:
+You'll also need to import and register these icons in `new.page.ts`:
 
 ```ts title="src/app/new/new.page.ts"
 // ...existing imports...
@@ -299,15 +299,15 @@ export class NewPage implements OnInit {
 }
 ```
 
-Alternatively, you can register icons in `src/app/app.component.ts` to use them throughout your app.
+Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
 For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
 ## Call Component Methods
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update the `ion-content` in your `src/app/new/new.page.html` to include a button and some items after the existing icons:
+Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons:
 
 ```html title="src/app/new/new.page.html"
 <ion-content [fullscreen]="true" #content>

docs/javascript/quickstart.md

@@ -120,7 +120,7 @@ This copies the necessary Ionic files that Capacitor will need to work with lazy
 
 ## Initialize Ionic
 
-Replace the contents of `src/main.js` with the following:
+Replace the contents of `main.js` with the following:
 
 ```js title="src/main.js"
 // Load Ionic
@@ -230,7 +230,7 @@ This creates a custom element called `home-page` that contains the layout for yo
 For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
 :::
 
-Next, add a `<script>` tag before the `src/main.js` import in `index.html` to import the Home page:
+Next, add a `<script>` tag before the `main.js` import in `index.html` to import the Home page:
 
 ```html title="index.html"
 <script type="module">
@@ -246,7 +246,7 @@ At this point your browser should be displaying the Home page.
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `src/pages/HomePage.js`:
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
 
 ```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
@@ -314,7 +314,7 @@ Next, update the `<script>` tag which imports the Home page in the `index.html`
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `src/pages/HomePage.js` to be inside of an `ion-router-link`:
+To navigate to the new page, update the button in `HomePage.js` to be inside of an `ion-router-link`:
 
 ```html title="src/pages/HomePage.js"
 <ion-router-link href="/new">
@@ -332,7 +332,7 @@ Navigating can also be performed programmatically using `document.querySelector(
 
 Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To use icons, you need to import them, register them with `addIcons`, and then use them with the `ion-icon` component.
 
-Add the necessary imports and register the icons in `src/main.js`:
+Add the necessary imports and register the icons in `main.js`:
 
 ```js title="src/main.js"
 // ...Ionic initialization
@@ -346,7 +346,7 @@ addIcons({ heart, logoIonic });
 // ...CSS imports
 ```
 
-Next, update `src/pages/NewPage.js` to include the icons:
+Next, update `NewPage.js` to include the icons:
 
 ```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
@@ -377,7 +377,7 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 ## Call Component Methods
 
-Let's add a button that can scroll the content area to the bottom. Update `src/pages/NewPage.js` to include scrollable content and a scroll button:
+Let's add a button that can scroll the content area to the bottom. Update `NewPage.js` to include scrollable content and a scroll button:
 
 ```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {

docs/react/quickstart.md

@@ -75,7 +75,7 @@ Let's walk through these files to understand the app's structure.
 
 ## View the App Component
 
-The root of your app is defined in `src/App.tsx`:
+The root of your app is defined in `App.tsx`:
 
 ```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
@@ -109,7 +109,7 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 ## View Routes
 
-Routes are defined within the `IonRouterOutlet` in `src/App.tsx`:
+Routes are defined within the `IonRouterOutlet` in `App.tsx`:
 
 ```tsx title="src/App.tsx"
 <IonRouterOutlet>
@@ -126,7 +126,7 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `src/pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `Home.tsx`, imports the Ionic components and defines the page template:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -164,7 +164,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `src/pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -192,7 +192,7 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `src/pages/New.tsx`:
+Create a new page at `New.tsx`:
 
 ```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -230,7 +230,7 @@ When creating your own pages, always use `IonPage` as the root component. This i
 
 ## Navigate to the New Page
 
-To navigate to the new page, create a route for it by first importing it at the top of `src/App.tsx` after the `Home` import:
+To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
 
 ```tsx title="src/App.tsx"
 import New from './pages/New';
@@ -252,7 +252,7 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `src/pages/Home.tsx`:
+Once that is done, update the button in `Home.tsx`:
 
 ```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
@@ -266,7 +266,7 @@ Navigating can also be performed programmatically using React Router's `history`
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `src/pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
 ```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -288,7 +288,7 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `src/pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
 ```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>

docs/vue/quickstart.md

@@ -73,7 +73,7 @@ Let's walk through these files to understand the app's structure.
 
 ## View the App Component
 
-The root of your app is defined in `src/App.vue`:
+The root of your app is defined in `App.vue`:
 
 ```vue title="src/App.vue"
 <template>
@@ -91,7 +91,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout
 
 ## View Routes
 
-Routes are defined in `src/router/index.ts`:
+Routes are defined in `router/index.ts`:
 
 ```ts title="src/router/index.ts"
 import { createRouter, createWebHistory } from '@ionic/vue-router';
@@ -122,7 +122,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `src/views/HomePage.vue`, imports the Ionic components and defines the page template:
+The Home page component, defined in `HomePage.vue`, imports the Ionic components and defines the page template:
 
 ```vue title="src/views/HomePage.vue"
 <template>
@@ -188,7 +188,7 @@ import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from
 
 ## Add a New Page
 
-Create a new page at `src/views/NewPage.vue`:
+Create a new page at `NewPage.vue`:
 
 ```vue title="src/views/NewPage.vue"
 <template>
@@ -225,7 +225,7 @@ When creating your own pages, always use `ion-page` as the root component. This
 
 ## Navigate to the New Page
 
-To navigate to the new page, create a route for it by first importing it at the top of `src/router/index.ts` after the `HomePage` import:
+To navigate to the new page, create a route for it by first importing it at the top of `router/index.ts` after the `HomePage` import:
 
 ```ts title="src/router/index.ts"
 import NewPage from '../views/NewPage.vue';
@@ -252,7 +252,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 ```
 
-Once that is done, update the button in `src/views/HomePage.vue`:
+Once that is done, update the button in `HomePage.vue`:
 
 ```vue title="src/views/HomePage.vue"
 <ion-button router-link="/new">Navigate</ion-button>
@@ -266,7 +266,7 @@ Navigating can also be performed programmatically using Vue Router, and routes c
 
 Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `ion-icon` component.
 
-Update the imports in `src/views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
 ```vue title="src/views/NewPage.vue"
 <script setup lang="ts">
@@ -290,7 +290,7 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `src/views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
+Update `NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
 ```vue title="src/views/NewPage.vue"
 <ion-content ref="content">