ionic-team · thetaPC · Jan 16, 2024 · Dec 13, 2023 · Dec 13, 2023 · Dec 13, 2023
@@ -1,10 +1,11 @@
 src/theme/DocItem
-src/theme/DocPage
+src/theme/DocRoot
 legacy-stencil-components
 scripts/bak
 
 docs/api
 docs/native
+versioned_docs/version-v*/native
 docs/cli/commands
 
 static/code/stackblitz

@@ -28,7 +28,7 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for
 
 ### Usage with Standalone-based Applications
 
-:::caution
+:::warning
 All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 
@@ -177,7 +177,7 @@ export class HomePage {}
 
 ### Usage with NgModule-based Applications
 
-:::caution
+:::warning
 All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 

@@ -175,7 +175,7 @@ Here, we have a typical Angular Module setup, along with a RouterModule import,
 
 ## Standalone Components
 
-:::caution Experimental API
+:::warning Experimental API
 
 Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
 

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
  />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
 

@@ -19,9 +19,9 @@ Here’s the finished app running on all 3 platforms:
  width="560"
  height="315"
  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-frameborder="0"
+frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-allowfullscreen
+allowFullScreen
 ></iframe>
 
 :::note

@@ -41,9 +41,8 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
- <p>
- Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
- </p>
+ <!-- prettier-ignore -->
+ <p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
 </DocsCard>
 
 <DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">

@@ -105,7 +105,7 @@ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg R
 
 Once that command has been ran and its prompts have been answered a file called `my-release-key.keystore` will be created in the current directory.
 
-:::caution
+:::warning
 Save this file and keep it somewhere safe. If it is lost the Google Play Store will not accept updates for this app!
 :::
 

@@ -101,11 +101,11 @@ Now comes the fun part: testing out the native app on your device! For iOS, the
  src="https://fast.wistia.net/embed/iframe/s5v4fujv7w?videoFoam=true"
  title="Wistia video player"
  allowtransparency="true"
-frameborder="0"
+frameBorder="0"
  scrolling="no"
  class="wistia_embed"
  name="wistia_embed"
-allowfullscreen
+allowFullScreen
  mozallowfullscreen
  webkitallowfullscreen
  oallowfullscreen
@@ -130,11 +130,11 @@ In the upper right hand corner, click the Play button. Select your connected dev
  src="https://fast.wistia.net/embed/iframe/b2ys5v4sno?videoFoam=true"
  title="Wistia video player"
  allowtransparency="true"
-frameborder="0"
+frameBorder="0"
  scrolling="no"
  class="wistia_embed"
  name="wistia_embed"
-allowfullscreen
+allowFullScreen
  mozallowfullscreen
  webkitallowfullscreen
  oallowfullscreen

@@ -139,18 +139,11 @@ Ionic is actively developed and maintained full-time by a core team, and its eco
 
 There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join:
 
-- <a href="https://forum.ionicframework.com/" target="_blank">
- Forum:
- </a> A great place for asking questions and sharing ideas.
-- <a href="https://twitter.com/ionicframework" target="_blank">
- Twitter:
- </a> Where we post updates and share content from the Ionic community.
-- <a href="https://github.com/ionic-team/ionic" target="_blank">
- GitHub:
- </a> For reporting bugs or requesting new features, create an issue here. PRs welcome!
-- <a href="https://ionicframework.com/contributors" target="_blank">
- Content authoring:
- </a> Write a technical blog or share your story with the Ionic community.
+<!-- prettier-ignore -->
+- <a href="https://forum.ionicframework.com/" target="_blank">Forum:</a> A great place for asking questions and sharing ideas.
+- <a href="https://twitter.com/ionicframework" target="_blank">Twitter:</a> Where we post updates and share content from the Ionic community.
+- <a href="https://github.com/ionic-team/ionic" target="_blank">GitHub:</a> For reporting bugs or requesting new features, create an issue here. PRs welcome!
+- <a href="https://ionicframework.com/contributors" target="_blank">Content authoring:</a> Write a technical blog or share your story with the Ionic community.
 
 ## License
 

@@ -20,8 +20,8 @@ import DocsCards from '@components/global/DocsCards';
 
 <PageStyles>
 
-<div class='flex main-flex'>
- <div class="pull-left">
+<div className='flex main-flex'>
+ <div className="pull-left">
  <h1>One Codebase <br/> Any Platform <br/> <strong>Just React</strong></h1>
 
 - ✓ 100+ mobile optimized React UI components
@@ -32,8 +32,8 @@ import DocsCards from '@components/global/DocsCards';
 
  </div>
 
- <div class="pull-right">
- <img src={require('@site/static/img/frameworks/react-logo.png').default} />
+ <div className="pull-right">
+ <img src="/docs/img/frameworks/react-logo.png" />
  </div>
 </div>
 
@@ -43,9 +43,9 @@ Ionic React is native React version of Ionic Framework, the free, open source SD
 
 It's everything you need to ship award-winning apps for any platform, with React.
 
-<div class="flex" >
+<div className="flex" >
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## Amazing Design
 
@@ -55,15 +55,15 @@ Choose from over 100 beautiful, mobile-ready UI components, animations, and gest
 
 </div>
 
-<div class="pull-right">
+<div className="pull-right">
  <img src="/docs/icons/feature-guide-components-icon.png" />
 </div>
 
 </div>
 
-<div class="flex reverse" >
+<div className="flex reverse" >
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## Familiar tooling
 
@@ -72,40 +72,40 @@ Compatible with React version 16.8 and above.
 
 </div>
 
-<div class="pull-right">
- <img src={require('@site/static/img/frameworks/react-cli.png').default} class="cli" />
+<div className="pull-right">
+ <img src="/docs/img/frameworks/react-cli.png" className="cli" />
 </div>
 
 </div>
 
-<div class="flex">
+<div className="flex">
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## More than mobile
 
 Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase.
 
 </div>
 
-<div class="pull-right">
- <img src={require('@site/static/img/native-platforms/group-shot.png').default} />
+<div className="pull-right">
+ <img src="/docs/img/native-platforms/group-shot.png" />
 </div>
 
 </div>
 
-<div class="flex reverse">
+<div className="flex reverse">
 
- <div class="pull-left">
+ <div className="pull-left">
 
 ## Just React
 
 At the end of the day, it's just React. Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there.
 
  </div>
 
-<div class="pull-right">
- <img src={require('@site/static/img/frameworks/react.svg').default} />
+<div className="pull-right">
+ <img src="/docs/img/frameworks/react.svg" />
 </div>
 
 </div>

@@ -10,7 +10,7 @@ title: Migrating From IonSlides to Swiper.js
  />
 </head>
 
-:::caution Looking for `IonSlides`?
+:::warning Looking for `IonSlides`?
 
 `IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
 

@@ -19,9 +19,9 @@ Here’s the finished app running on all 3 platforms:
  width="560"
  height="315"
  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-frameborder="0"
+frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-allowfullscreen
+allowFullScreen
 ></iframe>
 
 ## What We'll Build

@@ -14,9 +14,9 @@ title: Debugging
  width="560"
  height="315"
  src="https://www.youtube.com/embed/akh6V6Yw1lw"
-frameborder="0"
+frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-allowfullscreen
+allowFullScreen
 ></iframe>
 
 ## Live Reload

@@ -24,9 +24,8 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 
  For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, `<widget>`. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
 
-2. <strong>
- Open the project in <b>Xcode</b>.
- </strong>
+<!-- prettier-ignore -->
+2. <strong>Open the project in <b>Xcode</b>.</strong>
 
  For Capacitor, run the following to open the app in Xcode:
 
@@ -36,18 +35,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
 
  For Cordova, open Xcode. Use **File** &raquo; **Open** and locate the app. Open the app's `platforms/ios` directory.
 
-3. <strong>
- In <b>Project navigator</b>, select the project root to open the project editor. Under the **Identity** section,
- verify that the Package ID that was set matches the Bundle Identifier.
- </strong>
+<!-- prettier-ignore -->
+3. <strong>In <b>Project navigator</b>, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.</strong>
 
  ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
 
-4. <strong>
- In the same project editor, under the <b>Signing</b> section, ensure <b>Automatically manage signing</b> is
- enabled.
- </strong> Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning
- and signing.
+<!-- prettier-ignore -->
+4. <strong>In the same project editor, under the <b>Signing</b> section, ensure <b>Automatically manage signing</b> is enabled.</strong> Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
 
  ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 

@@ -2,6 +2,9 @@
 title: Updating to v4
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Updating to Ionic 4
 
 ## Updating from Ionic 3 to 4

@@ -10,7 +10,7 @@ title: Migrating From ion-slides to Swiper.js
  />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
 

@@ -19,9 +19,9 @@ Here’s the finished app running on all 3 platforms:
  width="560"
  height="315"
  src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-frameborder="0"
+frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-allowfullscreen
+allowFullScreen
 ></iframe>
 
 ## What We'll Build

@@ -38,6 +38,7 @@ module.exports = {
  if (locale != 'en') {
  return 'https://crowdin.com/project/ionic-docs';
  }
+ let match;
  if ((match = docPath.match(/api\/(.*)\.md/)) != null) {
  return `https://github.com/ionic-team/ionic-docs/tree/main/docs/api/${match[1]}.md`;
  }
@@ -275,7 +276,7 @@ module.exports = {
  },
  prism: {
  theme: { plain: {}, styles: [] },
- // https://github.com/FormidableLabs/prism-react-renderer/blob/5a1c93592c6475fb230bfcb8a9666b72b331638b/packages/generate-prism-languages/index.ts#L9-L24
+ // https://github.com/FormidableLabs/prism-react-renderer/blob/e6d323332b0363a633407fabab47b608088e3a4d/packages/generate-prism-languages/index.ts#L9-L25
  additionalLanguages: ['shell-session', 'http'],
  },
  algolia: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; @@
  />
 </head>
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
@@ Expand Down @@