chore: add sdk and middleware changelog prerequisites

docs/content/3.middleware/2.guides/10.logging.md → docs/content/3.middleware/2.guides/10.logger.md

@@ -1,7 +1,11 @@
-# Logging
+# Logger
 
 The middleware application provides a logger instance that automatically attaches metadata related to the scope of each call. By adding this contextual data, the logger makes it significantly easier to trace the origin of logs or errors, simplifying the debugging and monitoring process across the application.
 
+:::info
+The logger has been available since version 5.1.0. Please refer to the [middleware changelog](https://docs.alokai.com/middleware/reference/change-log#_510) for more details.
+:::
+
 ## Using logger
 
 The middleware application provides access to the logger in various parts of the system, such as in extensions and integrations. This flexibility allows you to log important events, errors, and other data throughout the lifecycle of your application.

docs/content/4.sdk/2.getting-started/4.logger.md

@@ -27,10 +27,9 @@ Create a file `logger.ts` in the `sdk` directory and add the following content:
 ```ts
 // apps/storefront-unified-nextjs/sdk/logger.ts
 
-import { createLogger } from '@vue-storefront/next';
+import { createLogger } from "@vue-storefront/next";
 
 export const logger = createLogger();
-
 ```
 
 #tab-2
@@ -64,37 +63,44 @@ Navigate to the `logger.ts` file in the `sdk` directory and add the configuratio
 ```ts
 // apps/storefront-unified-nextjs/sdk/logger.ts
 
-import { createLogger } from '@vue-storefront/next';
+import { createLogger } from "@vue-storefront/next";
 
 export const logger = createLogger(); // [!code --]
-export const logger = createLogger({ // [!code ++]
-  verbosity: 'debug', // [!code ++]
+export const logger = createLogger({
+  // [!code ++]
+  verbosity: "debug", // [!code ++]
   includeStackTrace: true, // [!code ++]
 }); // [!code ++]
 ```
 
 #tab-2
 
 Navigate to the `nuxt.config.ts` file and add the configuration object to the `@vue-storefront/nuxt` module, e.g.:
+
 ```ts
 // apps/storefront-unified-nuxt/nuxt.config.ts
 
 export default defineNuxtConfig({
   // ...
   modules: [
     // ...
-    '@vue-storefront/nuxt', // [!code --]
-    ['@vue-storefront/nuxt', { // [!code ++]
-      logger: { // [!code ++]
-        verbosity: 'debug', // [!code ++]
-        includeStackTrace: true, // [!code ++]
-      } // [!code ++]
-    }], // [!code ++]
+    "@vue-storefront/nuxt", // [!code --]
+    [
+      "@vue-storefront/nuxt",
+      {
+        // [!code ++]
+        logger: {
+          // [!code ++]
+          verbosity: "debug", // [!code ++]
+          includeStackTrace: true, // [!code ++]
+        }, // [!code ++]
+      },
+    ], // [!code ++]
     // ...
   ],
 });
-
 ```
+
 ::
 
 ## Usage
@@ -106,6 +112,7 @@ You can use the logger similarly as you would use the common `console` object:
 #tab-1
 
 No matter if this is a client or server side code, you can import the logger and use it to log messages the same way, e.g.:
+
 ```tsx
 import { logger } from "@/sdk/logger";
 
@@ -116,7 +123,6 @@ function SomeComponent() {
 }
 ```
 
-
 #tab-2
 
 ```vue
@@ -130,6 +136,7 @@ logger.info('Example log');
 
 Now instead of using `console` you can use the logger to log messages at different levels.
 You can use the following methods:
+
 - `emergency`
 - `alert`
 - `critical`