docs(UST-1374): middleware-headers extension (#7154)

* docs(ust-1374): middleware-headers extension

* docs(ust-1374): copy

* docs: Update 6.headers.md

* Update docs/content/3.middleware/2.guides/6.headers.md

Co-authored-by: Richard Rohrig <[email protected]>

* Update docs/content/3.middleware/2.guides/6.headers.md

Co-authored-by: Richard Rohrig <[email protected]>

* docs(ust-1374): copy

---------

Co-authored-by: Matt Maribojoc <[email protected]>

Co-authored-by: Richard Rohrig <[email protected]>

docs/content/3.middleware/2.guides/6.headers.md

@@ -0,0 +1,113 @@
+# Response Headers
+
+## Overview
+
+The Middleware Response Headers [extension](/middleware/guides/extensions) enables the addition of custom response headers, which can be particularly useful for managing application caching or establishing security rules. 
+
+With this extension, you can overwrite or set headers for individual API methods or apply them globally across your application. 
+It can be implemented for any Unified Alokai backend, and third-party tool integration.
+
+## How it works?
+
+The extension can be used in two ways:
+
+- **Locally**: to set custom headers for individual API methods
+- **Globally**: to set `Cache-Control` header for all the API methods
+
+Internally, the extension will identify all GET-type methods and add/overwrite the headers to their responses using the `afterCall` hook. Read the [Middleware Extensions guide](/middleware/guides/extensions#creating-an-extension) to learn more about the internals of an extension.
+
+## Installation
+
+To install the extension, run the following command in your `apps/storefront-middleware` folder:
+
+```bash
+yarn add @vsf-enterprise/middleware-headers
+```
+
+## Configuration
+
+To configure the extension for a specific integration, add the following code to your `middleware.config.js` file:
+
+```typescript [middleware.config.ts]
+import headersExtension from '@vsf-enterprise/middleware-headers';
+
+import { extensionConfig } from './extensionConfig';
+
+export default {
+  integrations: {
+    // ... other integrations
+    [integrationName]: {
+      extensions: (extensions: ApiClientExtension[]) => [
+        ...extensions,
+        headersExtension({ ...extensionConfig }),
+        // ... other extensions
+      ]
+    }
+  },
+};
+```
+
+## Usage
+
+### Local Usage
+
+Now, in the `extensionConfig.ts` file, you can set up your headers for individual API methods.
+
+```typescript [extensionConfig.ts]
+export const extensionConfig = {
+  methods: {
+    [apiMethodName]: {
+      response: {
+        headers: {
+          'Cache-Control': 'your-rules',
+          // ... other headers
+        }
+      }
+    }
+  }
+};
+```
+
+Here, your IDE will be able to suggest the available API methods and their names. You can also define your custom ones, making sure that the method name matches the one from the API.
+
+To provide proper types inference you can use generic type to define them, like this.
+
+```typescript [middleware.config.ts]
+headersExtension<'fooMethod' | 'barMethod'>({ ...config }),
+```
+
+## Global Usage
+
+To apply global `Cache-Control` rules on every API method, you can set the `cacheControl` property in your extension's configuration.
+
+```typescript [extensionConfig.ts]
+export const extensionConfig = {
+  cacheControl: 'your-rules',
+};
+```
+
+The extension also ships with a predefined `cacheControlRules` value. You can opt-in to using this by setting `cacheControl` to true.
+
+```typescript
+/* This is just for presentation purposes; the code is part of the package internals. */
+
+const SHORT_TTL = 60 * 5; // One hour
+const cacheControlRules = `public, max-age=0, s-maxage=${SHORT_TTL}, must-revalidate`;
+```
+
+```typescript [extensionConfig.ts]
+export const extensionConfig = {
+  cacheControl: true,
+};
+```
+
+## Signature
+
+```typescript
+function extension<T extends string>(
+  config?: ExtensionConfig<T>
+): ApiClientExtension;
+```
+
+
+