fix: Migrate to code-groups

Author: d3xter666

packages/documentation/docs/index.md

@@ -117,9 +117,8 @@ This allows you to rely on UI5 CLI for UI5-specific build functionality and proj
 
 All available APIs are documented in the [UI5 CLI API Reference](https://ui5.github.io/cli/v5/api/index.html).
 
-#### ESM
-
-```js
+::: code-group
+```js [ESM]
 import {graphFromPackageDependencies} from "@ui5/project/graph";
 
 async function buildApp(projectPath, destinationPath) {
@@ -135,9 +134,7 @@ async function buildApp(projectPath, destinationPath) {
 }
 ```
 
-#### CommonJS
-
-```js
+```js [CommonJS]
 async function buildApp(projectPath, destinationPath) {
     const {graphFromPackageDependencies} = 
         await import("@ui5/project/graph");
@@ -152,3 +149,4 @@ async function buildApp(projectPath, destinationPath) {
     });
 }
 ```
+:::

packages/documentation/docs/pages/GettingStarted.md

@@ -50,16 +50,13 @@ If your project is not set up for use with the UI5 CLI yet, follow these steps:
 	```
 
 1. Define the framework you want to use
-	::: info
-	**OpenUI5**
+	:::code-group
 
-	```sh
+	```sh [OpenUI5]
 	ui5 use openui5@latest
 	```
 
-	**SAPUI5**
-
-	```sh
+	```sh [SAPUI5]
 	ui5 use sapui5@latest
 	```
 	:::

packages/documentation/docs/pages/extensibility/CustomServerMiddleware.md

@@ -89,9 +89,9 @@ middleware:
 
 A custom middleware implementation needs to return a function with the following signature:
 
-#### ESM
+:::code-group
 
-```js
+```js [ESM]
 /**
  * Custom UI5 Server middleware API
  * 
@@ -127,9 +127,7 @@ export default function({log, middlewareUtil, options, resources}) {
 };
 ```
 
-#### CommonJS
-
-```js
+```js [CommonJS]
 /**
  * Custom UI5 Server middleware API
  * 
@@ -164,12 +162,13 @@ module.exports = function({log, middlewareUtil, options, resources}) {
     }
 };
 ```
+:::
 
 ### Example: lib/middleware/markdownHandler.(m)js
 
-#### ESM
+:::code-group
 
-```js
+```js [ESM]
 import MarkdownIt from "markdown-it";
 
 export default async function({log, middlewareUtil, options, resources}) {
@@ -201,9 +200,7 @@ export default async function({log, middlewareUtil, options, resources}) {
 ```
 Live demo of the above example: [openui5-sample-app with custom middleware](https://github.com/SAP/openui5-sample-app/tree/demo-server-middleware-extensibility-v3-esm)
 
-#### CommonJS
-
-```js
+```js [CommonJS]
 module.exports = async function({log, middlewareUtil, options, resources}) {
     const MarkdownIt = require("markdown-it");
     const md = new MarkdownIt();
@@ -234,6 +231,8 @@ module.exports = async function({log, middlewareUtil, options, resources}) {
 ```
 Live demo of the above example: [openui5-sample-app with custom middleware](https://github.com/SAP/openui5-sample-app/tree/demo-server-middleware-extensibility-v3)
 
+:::
+
 ## Helper Class `MiddlewareUtil`
 
 Custom middleware defining [Specification Version](../Configuration.md#specification-versions) 2.0 or higher have access to an interface of a [MiddlewareUtil](https://ui5.github.io/cli/v5/api/@ui5_server_middleware_MiddlewareUtil.html) instance.

packages/documentation/docs/pages/index.md

@@ -117,9 +117,8 @@ This allows you to rely on UI5 CLI for UI5-specific build functionality and proj
 
 All available APIs are documented in the [UI5 CLI API Reference](https://ui5.github.io/cli/v5/api/index.html).
 
-#### ESM
-
-```js
+::: code-group
+```js [ESM]
 import {graphFromPackageDependencies} from "@ui5/project/graph";
 
 async function buildApp(projectPath, destinationPath) {
@@ -135,9 +134,7 @@ async function buildApp(projectPath, destinationPath) {
 }
 ```
 
-#### CommonJS
-
-```js
+```js [CommonJS]
 async function buildApp(projectPath, destinationPath) {
     const {graphFromPackageDependencies} = 
         await import("@ui5/project/graph");
@@ -152,3 +149,4 @@ async function buildApp(projectPath, destinationPath) {
     });
 }
 ```
+:::