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