Replace blockquote with admonition

Author: ltm

docs/angular/lifecycle.md

@@ -21,7 +21,9 @@ Ionic embraces the life cycle events provided by Angular. The two Angular events
 
 For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks).
 
-> Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly.
+:::note
+Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly.
+:::
 
 ## Ionic Page Events
 

docs/angular/navigation.md

@@ -110,7 +110,9 @@ export class LoginComponent {
 
 Both options provide the same navigation mechanism, just fitting different use cases.
 
-> A note on navigation with relative URLs: Currently, to support multiple navigation stacks, relative URLs are something not supported
+:::note
+A note on navigation with relative URLs: Currently, to support multiple navigation stacks, relative URLs are something not supported
+:::
 
 ## Lazy loading routes
 
@@ -151,7 +153,9 @@ import { LoginComponent } from './login.component';
 })
 ```
 
-> We're excluding some additional content and only including the necessary parts.
+:::note
+We're excluding some additional content and only including the necessary parts.
+:::
 
 
 Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component.

docs/angular/performance.md

@@ -54,4 +54,6 @@ For more information on how Angular manages change propagation with `ngFor` see
 
 [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
 
-> Do you have a guide you'd like to share? Click the *Edit this page* button below.
+:::note
+Do you have a guide you'd like to share? Click the *Edit this page* button below.
+:::

docs/angular/pwa.md

@@ -18,10 +18,14 @@ $ ng add @angular/pwa
 
 Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA.
 
-> By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::note
+By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::
 
 
-> Note: Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::note
+Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::
 
 ## Service Worker configuration
 
@@ -75,7 +79,9 @@ Next, in a Terminal, install the Firebase CLI:
 $ npm install -g firebase-tools
 ```
 
-> Note: If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+:::note
+If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+:::
 
 With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
 
@@ -85,7 +91,9 @@ With the Firebase CLI installed, run `firebase init` within your Ionic project.
 
 **"What do you want to use as your public directory?"** Enter "www".
 
-> Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::note
+Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::
 
 **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
 

docs/angular/slides.md

@@ -138,7 +138,9 @@ export class SlidesExample {
 </swiper>
 ```
 
-> Importing `swiper-bundle.min.css` imports styles for all modules. When using the SCSS or Less styles, you will need to import the styles for each module. See <a href="https://swiperjs.com/angular#styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#styles</a> for a full list of stylesheets.
+:::note
+Importing `swiper-bundle.min.css` imports styles for all modules. When using the SCSS or Less styles, you will need to import the styles for each module. See <a href="https://swiperjs.com/angular#styles" target="_blank" rel="noopener noreferrer">https://swiperjs.com/angular#styles</a> for a full list of stylesheets.
+:::
 ## Properties
 
 Swiper options are provided as props directly on the `<swiper>` component rather than via the `options` object in `ion-slides`.

docs/angular/your-first-app.md

@@ -10,7 +10,9 @@ Here’s the finished app running on all 3 platforms:
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/0ASQ13Y1Rk4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
-> Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+:::note
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+:::
 
 ## What We'll Build
 
@@ -35,15 +37,19 @@ Download and install these right away to ensure an optimal Ionic development exp
 ## Install Ionic Tooling
 Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
 
-> To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
 
 ```shell
 $ npm install -g @ionic/cli native-run cordova-res
 ```
 
-> The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
->
-> Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
 
 ## Create an App
 Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:

docs/angular/your-first-app/6-deploying-mobile.md

@@ -39,7 +39,9 @@ $ ionic cap sync
 
 ## iOS Deployment
 
-> To build an iOS app, you’ll need a Mac computer.
+:::note
+To build an iOS app, you’ll need a Mac computer.
+:::
 
 Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete.
 

docs/cli.md

@@ -26,9 +26,11 @@ $ ionic <command> --help
 $ ionic <command> <subcommand> --help
 ```
 
-> Be sure to run `ionic <command> --help` in your project directory.
->
-> For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
+:::note
+Be sure to run `ionic <command> --help` in your project directory.
+
+For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
+:::
 
 <!-- TODO: image? -->
 

docs/cli/configuration.md

@@ -111,9 +111,11 @@ module.exports = function(ctx) {
 
 The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
 
-> These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework.
->
-> If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
+:::note
+These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework.
+
+If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples.
+:::
 
 ### Setup Steps
 
@@ -192,7 +194,9 @@ $ ionic start "My New App" --no-deps
 
 If an app was created in a way other than `ionic start`, for example by using a prebuilt template, use `ionic init` to register the existing app with the multi-app project.
 
-> Make sure the app doesn't have an existing `ionic.config.json`.
+:::note
+Make sure the app doesn't have an existing `ionic.config.json`.
+:::
 
 ```shell
 $ cd apps/existing-app/

docs/cli/livereload.md

@@ -23,7 +23,9 @@ $ ionic capacitor run ios -l --external
 $ ionic capacitor run android -l --external
 ```
 
-> Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::note
+Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::
 
 ### Cordova
 
@@ -41,7 +43,9 @@ $ ionic cordova run android -l
 
 For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server.
 
-> You can track [this issue](https://github.com/ionic-team/native-run/issues/20) for progress on iOS port forwarding with Ionic.
+:::note
+You can track [this issue](https://github.com/ionic-team/native-run/issues/20) for progress on iOS port forwarding with Ionic.
+:::
 
 In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network.
 
@@ -51,7 +55,9 @@ The following all-in-one command will start a live-reload server on **all addres
 $ ionic cordova run ios -l --external
 ```
 
-> Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::note
+Remember, with the `--external` option, others on your Wi-Fi network will be able to access your app.
+:::
 
 ## Tips
 

docs/deployment/app-store.md

@@ -62,4 +62,6 @@ An app can be updated by either submitting a new version to Apple, or by using a
 
 With <strong>Live Updates</strong>, app changes can be pushed in realtime directly to users from the Appflow dashboard, without waiting for App Store approvals.
 
-> In order for the iOS App Store to accept the updated build, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the same instructions above.
+:::note
+In order for the iOS App Store to accept the updated build, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the same instructions above.
+:::

docs/deployment/play-store.md

@@ -27,7 +27,9 @@ $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg
 
 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.
 
-> WARNING: Save this file and keep it somewhere safe. If it is lost the Google Play Store will not accept updates for this app!
+:::caution
+Save this file and keep it somewhere safe. If it is lost the Google Play Store will not accept updates for this app!
+:::
 
 To sign the unsigned APK, run the jarsigner tool which is also included in the Android SDK:
 
@@ -51,7 +53,9 @@ Now that a release APK has been generated, a Play Store listing can be written a
 
 To start, visit the [Google Play Store Developer Console](https://play.google.com/apps/publish) and create a new developer account.
 
-> Making a developer account with Google Play costs $25 USD.
+:::note
+Making a developer account with Google Play costs $25 USD.
+:::
 
 Once a developer account has been created, go ahead and click the `Create an Application`
 
@@ -65,4 +69,6 @@ When ready, upload the signed release APK that was generated and publish the app
 
 As an app evolves, it will need to be updated with new features and fixes. An app can be updated by either submitting a new version to the Google Play Store, or by using a live update service like Appflow's Live Update feature. Using Live Updates, changes can be pushed directly to users from the Appflow dashboard, without submitting changes to the Play Store. Learn more about Live Updates <a href="https://ionic.io/docs/appflow/deploy/intro" target="_blank">here</a>.
 
-> In order for the Google Play Store to accept updated APKs, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the instructions above.
+:::note
+In order for the Google Play Store to accept updated APKs, the config.xml file will need to be edited to increment the version value, then rebuild the app for release following the instructions above.
+:::

docs/developer-resources/guides/first-app-v4/intro.md

@@ -21,9 +21,11 @@ Run the following in the command line:
 $ npm install -g @ionic/cli cordova
 ```
 
-> The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
->
-> Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+:::
 
 ## Create an App
 Next, create an Ionic Angular app using our “Tabs” app template:

docs/developing/android.md

@@ -12,7 +12,9 @@ This guide covers how to run and debug Ionic apps on Android emulators and devic
 
 Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device).
 
-> We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
+:::note
+We don't recommend using Android Studio for _developing_ Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices.
+:::
 
 ### Installing Android Studio
 
@@ -97,7 +99,9 @@ Additional setup is required for Cordova to support programmatic builds. This se
 
 Native Android apps are compiled with the <a href="https://java.com/en/" target="_blank">Java</a> programming language. Download JDK8 from the <a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">download page</a>.
 
-> Unfortunately, Cordova is not compatible with the latest version of Java.
+:::note
+Unfortunately, Cordova is not compatible with the latest version of Java.
+:::
 
 ### Gradle
 
@@ -173,15 +177,19 @@ Once an app is running on an Android device or emulator, it can be debugged with
 
 Chrome has web developer tool support for Android simulators and devices. Go to `chrome://inspect` in Chrome while the simulator is running or a device is connected to the computer and **Inspect** the app that needs to be debugged.
 
-> Make sure your application is running on the device or simulator, or it will not show up in the list.
+:::note
+Make sure your application is running on the device or simulator, or it will not show up in the list.
+:::
 
 ![Android Chrome DevTools](/img/running/android-chrome-devtools.png)
 
 ### Viewing Native Logs
 
 If running with Android Studio, native logs can be found in **Logcat**.
 
-> If the **Logcat** window is hidden, you can enable it in **View** &raquo; **Tool Windows** &raquo; **Logcat**.
+:::note
+If the **Logcat** window is hidden, you can enable it in **View** &raquo; **Tool Windows** &raquo; **Logcat**.
+:::
 
 ![Android Studio Logcat](/img/running/android-studio-logcat.png)
 

docs/developing/hardware-back-button.md

@@ -5,7 +5,9 @@ import TabItem from '@theme/TabItem';
 
 The hardware back button is found on most Android devices. In native applications it can be used to close modals, navigate to the previous view, exit an app, and more. By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed. If no previous view exists in the navigation stack, nothing will happen. This guide will show how to customize the behavior of the hardware back button.
 
-> The hardware back button refers to the physical back button on an Android device and should not be confused with either the browser back button or `ion-back-button`. The information in this guide only applies to Android devices.
+:::note
+The hardware back button refers to the physical back button on an Android device and should not be confused with either the browser back button or `ion-back-button`. The information in this guide only applies to Android devices.
+:::
 
 ## Hardware Back Button in Capacitor and Cordova
 
@@ -21,7 +23,9 @@ When running your app in a mobile browser or as a PWA, hardware back button cust
 
 For complete hardware back button support, we recommend using Capacitor or Cordova.
 
-> The `ionBackButton` event will not be emitted when running an app in a browser or as a PWA.
+:::note
+The `ionBackButton` event will not be emitted when running an app in a browser or as a PWA.
+:::
 
 ## Basic Usage