docs: use new GitHub blockquote highlighting options

* https://github.com/orgs/community/discussions/16925

docs/concepts/authentication.md

@@ -54,8 +54,7 @@ To add or change the functionality of an identity provider, the following steps
    }
    ```
 
-   > **Note**
-   >
+   > [!NOTE]
    > If a identity provider is using the OAuthService for authentication, then the identity provider have to inject the OAuthService with a new instance.
    > Otherwise difficult side effects with the [TokenService](../../src/app/core/services/token/token.service.ts) will occur.
    > Please checkout the [Auth0IdentityProvider](../../src/app/core/identity-provider/auth0.identity-provider.ts) for an example.

docs/concepts/configuration.md

@@ -13,7 +13,8 @@ In addition, the PWA, when run with Angular Universal, consists of a server-side
 
 ## Ways of Configuring Angular Applications
 
-> :warning: If available, always prefer configuration via system environment variables and running the PWA with Universal Rendering.
+> [!WARNING]
+> If available, always prefer configuration via system environment variables and running the PWA with Universal Rendering.
 
 ### Angular CLI Environments
 

docs/concepts/hybrid-approach.md

@@ -27,7 +27,8 @@ However, this way they cannot be deployed together with a combined Helm chart.
 - ICM 7.10.32.16-LTS or 7.10.38.6-LTS
 - PWA 2.3.0
 
-> :exclamation: **NOTE:** This feature relies on the PWA and ICM being able to read and write each other's `apiToken` cookies.
+> [!NOTE]
+> This feature relies on the PWA and ICM being able to read and write each other's `apiToken` cookies.
 >
 > This means that cookies written by the PWA and ICM must have the same domain and the same path. This works since all Responsive Starter Store requests and responses are proxied through the PWA SSR, simulating a common domain (an actual common domain for PWA and ICM is not required).
 >
@@ -79,11 +80,19 @@ INTERSHOP_WEBSERVERSECUREURL: https://<icm-web>
 
 The server-side rendering process must be started with `SSR_HYBRID=1`.
 
-> :warning: **Only for development environments**: The PWA must also be run with secure URLs if NGINX to handle `https` access to the PWA is not deployed.
+> [!WARNING]
+>
+> **Only for development environments**
+>
+> The PWA must also be run with secure URLs if NGINX to handle `https` access to the PWA is not deployed.
 >
 > See [SSR Startup - Development](../guides/ssr-startup.md#development) for a reference on how you to achieve this locally.
 
-> :warning: **Only for development environments**: It might be necessary to set `TRUST_ICM=1` if the used development ICM is deployed with an insecure certificate.
+> [!WARNING]
+>
+> **Only for development environments**
+>
+> It might be necessary to set `TRUST_ICM=1` if the used development ICM is deployed with an insecure certificate.
 
 Also, the **Service Worker must be disabled** for the PWA, as it installs itself in the browser of the client device and takes over the routing process, making it impossible to break out of the PWA and delegate to the ICM.
 The Service Worker is disabled by default.
@@ -126,7 +135,8 @@ For this reason, the PWA must be configured to know which application to use to
 - Configure `hybridApplication` setting to denote the Responsive Starter Store application (this is usually `-`).
 - Follow the Hybrid configuration setup
 
-> **NOTE:** If for some reason the CMS content of the Responsive Starter Store is to be reused directly in the PWA in a Hybrid Approach, the PWA needs some code adaptions and has to use the same application as the Responsive Starter Store. For more details see the older version of this documentation - [Hybrid Approach - PWA Adaptions (3.0.0)](https://github.com/intershop/intershop-pwa/blob/3.0.0/docs/concepts/hybrid-approach.md#pwa-adaptions).
+> [!NOTE]
+> If for some reason the CMS content of the Responsive Starter Store is to be reused directly in the PWA in a Hybrid Approach, the PWA needs some code adaptions and has to use the same application as the Responsive Starter Store. For more details see the older version of this documentation - [Hybrid Approach - PWA Adaptions (3.0.0)](https://github.com/intershop/intershop-pwa/blob/3.0.0/docs/concepts/hybrid-approach.md#pwa-adaptions).
 
 ## Development Environment
 
@@ -194,7 +204,8 @@ The configurations relevant to the Hybrid Approach for running the PWA are:
 - `LOGGING=true` helps with analysis and debugging
 - Setting the port of the SSR process to `7200`
 
-> **NOTE:** The PWA SSR process itself does not need to run with SSL/https.
+> [!NOTE]
+> The PWA SSR process itself does not need to run with SSL/https.
 > This is taken care of by the NGINX container to provide the secure access to the PWA.
 
 A local PWA built from the current PWA project sources can be run in a number of ways:
@@ -217,7 +228,8 @@ ICM_BASE_URL=https://hybrid.local:7443 TRUST_ICM=true SSR_HYBRID=true LOGGING=tr
 ICM_BASE_URL=https://hybrid.local:7443 TRUST_ICM=true SSR_HYBRID=true LOGGING=true npm run start:ssr-dev -- --port 7200
 ```
 
-> **NOTE:** A development Hybrid Approach setup can also be tested without NGINX.
+> [!NOTE]
+> A development Hybrid Approach setup can also be tested without NGINX.
 > In this case, the PWA SSR process must run with SSL.
 > This can be achieved by using `--ssl` as an additional parameter.
 > The PWA with Hybrid Approach would then be reachable at `https://hybrid.local:7200`.
@@ -241,7 +253,8 @@ To start the NGINX container from the project sources with Docker:
 docker build -t dev_nginx nginx && docker run -it -p 443:443 -e UPSTREAM_PWA=http://hybrid.local:7200 -e SSL=true -e CACHE=false --name hybrid-nginx dev_nginx
 ```
 
-> **NOTE:** The NGINX of PWA releases prior to 3.1.0 does not support the `SSL=true` configuration.
+> [!NOTE]
+> The NGINX of PWA releases prior to 3.1.0 does not support the `SSL=true` configuration.
 > Previous versions needed the `UPSTREAM_PWA` to be configured with `https` and the the files `server.key` and `server.crt` had to be supplied in the container folder `/etx/nginx` to start the NGINX with SSL.
 
 ```bash

docs/concepts/localization.md

@@ -96,7 +96,8 @@ Refer to [this explanation](https://www.gnu.org/savannah-checkouts/gnu/gettext/m
 
 Have a look at the spec for [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.spec.ts) for an overview of supported methods.
 
-> :warning: Translations with large values (> 1000 characters) will not be compiled to improve performance. We recommend using CMS components instead. If you _really_ need to increase this limit, adapt the `MAX_COMPILATION_LENGTH` variable of [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.ts).
+> [!WARNING]
+> Translations with large values (> 1000 characters) will not be compiled to improve performance. We recommend using CMS components instead. If you _really_ need to increase this limit, adapt the `MAX_COMPILATION_LENGTH` variable of [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.ts).
 
 ### Localization with Formatted Dates
 
@@ -249,12 +250,14 @@ Here is how:
 2. Upload and import each `.xliff` file to ICM. Please mind below warning to select the correct application type and target locale.
 3. Refer to [Localization Management](https://docs.intershop.com/icm/7.10/olh/icm/en/operation_maintenance/topic_localization_management.html) in the ICM online help for further details.
 
-:warning: Make sure to select the correct application type for which you want to import generated XLIFF data.
-This has to fit to your PWA environment.
+> [!WARNING]
+> Make sure to select the correct application type for which you want to import generated XLIFF data.
+> This has to fit to your PWA environment.
 
-:warning: The generated `.xliff` files prefix translation keys with `pwa-`.
-This allows to enable easy filtering.
-The prefixes will be removed when the translations are loaded into the PWA.
+> [!WARNING]
+> The generated `.xliff` files prefix translation keys with `pwa-`.
+> This allows to enable easy filtering.
+> The prefixes will be removed when the translations are loaded into the PWA.
 
 ## External Localization Sources
 

docs/concepts/multi-site-handling.md

@@ -21,7 +21,8 @@ The aforementioned scenario can now be run with just one PWA instance and a reve
 
 ## Configuration
 
-:warning: Refer to [Multi-Site Configurations](../guides/multi-site-configurations.md) for an explanation of what is possible with multi-site configurations and how to define them.
+> [!WARNING]
+> Refer to [Multi-Site Configurations](../guides/multi-site-configurations.md) for an explanation of what is possible with multi-site configurations and how to define them.
 
 To set ICM channels and applications dynamically, you have to use URL rewriting in a reverse proxy running in front of the PWA instances.
 The values have to be provided as URL parameters (not to be confused with query parameters).

docs/concepts/pwa-building-blocks.md

@@ -74,7 +74,8 @@ Read on for a step-by-step walkthrough of the initial connection request.
 
 Deployment without using nginx is theoretically possible, even though many useful features of an nginx deployment are obviously not available.
 
-> :warning: Enabling [service workers](progressive-web-app.md#service-worker) is not possible without using nginx. The Intershop PWA will not function as intended if you do.
+> [!WARNING]
+> Enabling [service workers](progressive-web-app.md#service-worker) is not possible without using nginx. The Intershop PWA will not function as intended if you do.
 
 ## Hiding the ICM Backend
 

docs/guides/angular-change-detection.md

@@ -80,7 +80,7 @@ For all of those aspects – Design View, Service Workers and Universal renderin
 If not, those aspects will not work properly, e.g.
 Universal rendering will never return the rendered HTML and the Design View will never render the component tree view.
 
-> **Note**  
+> [!NOTE]
 > Avoid long-running timers and intervals. If this is unavoidable, make sure the async tasks do not start before the zone has become stable once.
 
 If you have any intervals in the application, wait for zone stability first before starting them.

docs/guides/authentication_punchout.md

@@ -27,7 +27,8 @@ identityProviders: {
 },
 ```
 
-> :warning: **NOTE:** This configuration enables the `Punchout` identity provider as the one and only configured global identity provider, meaning the standard ICM identity provider used for the standard login is no longer configured and the standard login will no longer work. As said this configuration example is only relevant for punchout development purposes.
+> [!WARNING]
+> This configuration enables the `Punchout` identity provider as the one and only configured global identity provider, meaning the standard ICM identity provider used for the standard login is no longer configured and the standard login will no longer work. As said this configuration example is only relevant for punchout development purposes.
 
 For production like deployments, the PWA has to be be configured to use the `Punchout` identity provider only when the user enters the `punchout` route.
 This can be configured with the `OVERRIDE_IDENTITY_PROVIDERS` environment variable (see [Override Identity Providers by Path][nginx-startup]) for the NGINX container.
@@ -70,7 +71,8 @@ cache:
             type: Punchout
 ```
 
-> :exclamation: **NOTE:** Be aware that the `OVERRIDE_IDENTITY_PROVIDERS` configuration has to match a potentially used `multiChannel` configuration.
+> [!IMPORTANT]  
+> Be aware that the `OVERRIDE_IDENTITY_PROVIDERS` configuration has to match a potentially used `multiChannel` configuration.
 
 ```yaml
 environment:

docs/guides/code-documentation.md

@@ -94,7 +94,10 @@ searchProducts(
  */
 ```
 
-> :warning: **Indentation Warning**  
+> [!WARNING]
+>
+> **Indentation Warning**
+>
 > TypeScript has an internal margin for new lines. If you want to keep a level of indentation, put a minimum of 13 space characters as shown in the example:
 
 **Example with Indentation Keeping**
@@ -128,7 +131,7 @@ searchProducts(
  */
 ```
 
-## :warning: Document only if documentation is needed!
+## Document only if documentation is needed!
 
 This is not a project with obligatory documentation, so: Do not document the obvious! For example, if behavior and requirements can be implied by a method signature, no additional documentation is needed.
 Instead **pay attention to useful names**.

docs/guides/cookie-consent.md

@@ -122,7 +122,7 @@ In addition, the `cookies` route should be removed from [`app-routing.module.ts`
 { path: 'cookies', loadChildren: () => import('./cookies/cookies-page.module').then(m => m.CookiesPageModule) },
 ```
 
-> **Warning**
+> [!IMPORTANT]
 > When disabling the integrated cookie consent handling, the `cookieConsentFor()` check will no longer work as intended and must be adapted to suit the alternative cookie consent implementation used.
 > To still use the internal `cookieConsentFor()` checks of the current implementation, it may be possible to have the alternative cookie consent implementation store the same `"enabledOptions"` information.
 

docs/guides/customizations.md

@@ -59,7 +59,8 @@ It will:
 - change the project prefix for new Angular artifacts from `ish` to `custom`
 - customize ESLint in `.eslintrc.json` to support your new theme files (specifically, the `project-structure` rule)
 
-> **NOTE:** If only one theme is active, PM2 will run the theme-specific SSR process in cluster mode on the default port (see [Building Multiple Themes](../guides/ssr-startup.md#building-multiple-themes)).
+> [!NOTE]
+> If only one theme is active, PM2 will run the theme-specific SSR process in cluster mode on the default port (see [Building Multiple Themes](../guides/ssr-startup.md#building-multiple-themes)).
 
 After that we recommend to additionally use the prefix `custom` in every component to further help identifying customized components.
 
@@ -172,7 +173,8 @@ There are two approaches to apply a theme-specific styling:
 Just putting a theme override file next to the original file in the `src/styles` folder will not lead to the expected results.
 The lookup starts with the file `style.scss` in the theme-specific folder.
 
-> **Note:** You should
+> [!NOTE]
+> You should
 >
 > - not change global `*.scss` files in `src/styles` and only apply style changes in your theme folder by copying files into the this folder and adjusting file references
 > - not delete the standard theme folders to prevent merge conflicts when migrating the PWA (changes in standard files but deleted in your project).
@@ -186,9 +188,11 @@ You can re-use variables from the global styling on component level by importing
 @import 'variables';
 ```
 
-> **Note:** Be aware that Visual Studio Code will not resolve all import references correctly but it works in the build PWA version anyways.
+> [!NOTE]
+> Be aware that Visual Studio Code will not resolve all import references correctly but it works in the build PWA version anyways.
 
-> **Note:** For bundled styles optimization PurgeCSS is used. Please read [the additional documentation](./optimizations.md#purgecss) regarding the usage and configuration of PurgeCSS in the Intershop PWA.
+> [!NOTE]
+> For bundled styles optimization PurgeCSS is used. Please read [the additional documentation](./optimizations.md#purgecss) regarding the usage and configuration of PurgeCSS in the Intershop PWA.
 
 ### Static Assets
 

docs/guides/data-handling-with-mappers.md

@@ -39,7 +39,8 @@ The mapper should be a class with static methods that will be used in the corres
 In special cases, the mapper class might need some dependencies to transform data correctly.
 In that case, you can declare it as an `Injectable` and use Angular's dependency injection mechanism to provide an instance in your service.
 
-> :warning: If the mapper needs no dependencies, always use static methods!
+> [!WARNING]
+> If the mapper needs no dependencies, always use static methods!
 
 **category.mapper.ts**
 

docs/guides/development.md

@@ -10,7 +10,8 @@ kb_sync_latest_only
 Developing with the Intershop PWA requires to download and install [Node.js](https://nodejs.org) with the included npm package manager.
 Check the project's `package.json` in the `engines` section for the recommended node version.
 
-> **Note:** If you will work with different Node.js based projects or different PWA versions we recommend using a Node Version Manager (see [NVM](https://github.com/nvm-sh/nvm) or [NVM for Windows](https://github.com/coreybutler/nvm-windows)).
+> [!NOTE]
+> If you will work with different Node.js based projects or different PWA versions we recommend using a Node Version Manager (see [NVM](https://github.com/nvm-sh/nvm) or [NVM for Windows](https://github.com/coreybutler/nvm-windows)).
 
 Clone or download the Intershop PWA GitHub project to your computer, e.g.
 
@@ -25,7 +26,8 @@ Run `npm install -g @angular/cli` once to globally install Angular CLI on your d
 
 Use `ng serve --open` to start up the development server and open the Progressive Web app in your browser.
 
-> **Note:** The project is configured to work by default against a publicly available Intershop Commerce Management server (see `environment.model.ts`).
+> [!NOTE]
+> The project is configured to work by default against a publicly available Intershop Commerce Management server (see `environment.model.ts`).
 >
 > ```
 > icmBaseURL: 'https://pwa-ish-demo.test.intershop.com',
@@ -75,7 +77,8 @@ The different start options can be combined.
 
 Further options of the development server can be found running `ng serve --help`.
 
-> **Warning:** DO NOT USE the webpack-dev-server IN PRODUCTION environments!
+> [!CAUTION]
+> DO NOT USE the webpack-dev-server IN PRODUCTION environments!
 
 The project can alternatively be run in server side rendering mode, see [Building and Running Server-Side Rendering](ssr-startup.md).
 

docs/guides/field-library.md

@@ -32,7 +32,8 @@ Formly naturally facilitates the reuse of forms through its configuration-based,
 In the Intershop PWA, there are a number of ways to enhance this reusability and provide developers with the ability to centrally define common form field configurations that can be used throughout the app.
 This article showcases the different ways this can be done.
 
-> **Note:** To understand this documentation, a basic understanding of [Formly](./formly.md) is required.
+> [!NOTE]
+> To understand this documentation, a basic understanding of [Formly](./formly.md) is required.
 
 ## The Field Library
 
@@ -115,7 +116,8 @@ To define a new reusable field configuration, use the `field-library-configurati
 It will generate a `.configuration.ts` file and register the configuration in the `providers` array of the module. <br/> Populate the file with whatever logic you need and let the `getConfiguration()` method return a `FormlyFieldConfig`.
 You can return a static value or inject services and create a dynamic, smart configuration.
 
-> **Note:** A field library configuration is a typescript file. If you need to adapt these configurations in a project, consider using a [theme-specific override](./customizations.md#theme-specific-overrides) for maximum flexibility.
+> [!NOTE]
+> A field library configuration is a typescript file. If you need to adapt these configurations in a project, consider using a [theme-specific override](./customizations.md#theme-specific-overrides) for maximum flexibility.
 
 #### Defining a FieldLibraryConfigurationGroup
 
@@ -168,7 +170,8 @@ For example, defining a new label text works like this:
 
 This is equivalent to the example given in [Retrieving configurations](#retrieving-configurations) but doesn't require you to inject the library.
 
-> **Note:** Currently, it is not possible to use configuration groups with this shorthand syntax. This is a known limitation and might be addressed in future versions.
+> [!NOTE]
+> Currently, it is not possible to use configuration groups with this shorthand syntax. This is a known limitation and might be addressed in future versions.
 
 ## Address Forms