IN-3632 Migrate SDK docs to core repo (#6957)

* IN-362 Add package.json

* Mitigate IN-3641

See nuxt/content#2254 (comment)

* copy vuestorefront/sdk docs/new branch docs into here

* fix broken link

* remove unused images

* most headers use just "thing" not "Vue Storefront thing"

docs/content/3.middleware/1.index.md

@@ -13,7 +13,7 @@ Our different [integrations](/integrations) add onto the middleware to provide a
 
 ::list{type="success"}
 - Connect multiple services using different technologies and libraries
-- Create and [extend](/integrate/extending-integrations.html) integrations to add new capabilities or modify their behavior
+- Create and [extend](/middleware/guides/extensions) integrations to add new capabilities or modify their behavior
 - Control of the requests sent to the integration platform and responses sent back to the Nuxt.js application
 - Securely store credentials on the server without exposing them to the end-users of your application
 - Improve site performance by moving logic to the server abd shipping less code to the browser

docs/content/4.sdk/1.index.md

@@ -0,0 +1,51 @@
+---
+title: Overview
+---
+
+# SDK
+
+The Vue Storefront SDK simplifies the development process by providing pre-built functionality to enables seamless interaction between your storefront and various Commerce Platforms and third-party services. 
+
+By utilizing the Vue Storefront SDK, you can establish a type-safe contract between your storefront and various APIs with the help of the Server Middleware acting as a proxy.
+
+:card{to="$base/getting-started" title="Get Started" description="Learn how to initialize the SDK in your storefronts" icon="ic:baseline-rocket"}
+
+
+## Key Features
+
+::list{type="success"}
+- **Type-safe** - The SDK is fully typed, so you can use it with confidence.
+- **Plugin architecture** - The SDK is built on a plugin architecture that allows you to extend its functionality with ease.
+- **Modular** - You can use multiple integrations at once, and they won't interfere with each other.
+- **Customizable** - You can extend the SDK to add new methods, modify existing methods, and more
+- **Framework-agnostic** - The SDK is written in TypeScript, so you can use it with any JS framework
+::
+
+
+## Architecture
+
+The SDK has two components:
+
+1. The SDK Core - the core package, `@vue-storefront/sdk`, that initializes all modules and implements the plug-in architecture
+2. Modules - pluggable pieces of code as standalone packages that integrate into the core to add functionality (eg.: `@vsf-enterprise/sapcc-sdk`)
+
+In most cases, these modules will come through our [Integrations](/integrations) - which contain both an SDK Module and an API Client (Middleware) - but you can also create your own modules.
+
+:card{to="/integrations" title="Integrations" description="See all of the available integrations that you can use with the SDK" icon="fluent:puzzle-cube-piece-20-filled"}
+
+## Example Usage
+
+Once a module is initialized, it can be used to interact with the server middleware. 
+
+```ts
+import { sdk } from '~/sdk'
+
+await sdk.exampleModule.doSomething(); // <- fully-typed
+```
+
+These SDK methods will then call a corresponding middleware endpoint. This means that you don't have to worry about creating your own API calls to work a service's API. Instead, you can use the integration SDK to get the data you need.
+
+And since the SDK is written in TypeScript, the data returned from the methods will be fully typed - meaning you can catch some errors earlier. 
+
+
+

docs/content/4.sdk/2.getting-started/1.index.md

@@ -0,0 +1,170 @@
+# Getting Started 
+
+If you're setting your Vue Storefront application from scratch, you'll need to configure the SDK Core to create a type-safe SDK that communicates with your [Server Middleware](/middleware).
+
+::tip
+#title
+Use one of our storefronts to get this out of the box!
+#default
+Our storefronts and boilerplates come with a middleware and frontend app already configured, so you can get started right away.
+
+:::div{class="mt-8 "}
+::::docs-button{to="/storefronts"}
+Take a look
+::::
+:::
+::
+
+## Installation
+
+To install the SDK Core, run the following command:
+
+::code-group
+```bash [npm]
+npm install @vue-storefront/sdk
+```
+```bash [yarn]
+yarn add @vue-storefront/sdk
+```
+```bash [pnpm]
+pnpm install @vue-storefront/sdk
+```
+::
+
+## Initializing the SDK
+
+Next, you have to initialize the SDK, along with any integrations' SDK modules in your frontend project. 
+
+The SDK Core exposes two methods to help with this, `buildModules`, which takes in SDK modules and uses them to extend the SDK Core, and `initSDK`, which takes multiple modules and converts them into a type-safe interface.
+
+```ts [sdk/index.ts]
+import { initSDK, buildModule } from '@vsf-enterprise/sdk';
+
+const { example } = initSDK({
+  example: buildModule(/* imported sdk module*/, {
+    /* module options */
+  }),
+  // additional modules
+})
+
+export example
+```
+
+When it comes to managing multiple SDK modules, there are two options for this:
+
+1. **Individual exports (recommended)** - initialize each integration as a separate SDK instance, allowing for better code-splitting 
+2. **Single Instance** - combine multiple modules in one SDK instance
+
+## Individual Exports (Recommended)
+
+:::tip
+The examples below use the commercetools and Stripe for commercetools modules. However, the same principles apply to all modules.
+:::
+
+To initialize the SDK, follow these steps:
+
+1. Create a new `.ts` file - in most Vue Storefront projects, we use `sdk/index.ts`, but you can create this anywhere in your storefront
+2. Import the `initSDK` and `buildModule` from the SDK Core, along with any imports needed to add additional modules.
+3. Initialize the SDK by selectively importing and building the required modules
+4. Export the initialized modules for usage in your application:
+
+
+```typescript [sdk/index.ts]
+import { initSDK, buildModule } from '@vsf-enterprise/sdk';
+import { ctModule } from '@vsf-enterprise/commercetools-sdk';
+import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
+const { ct } = initSDK({ 
+  ct: buildModule(ctModule, { 
+    apiUrl: 'http://localhost:8181/ct' 
+  }) 
+});
+const { stripeCt } = initSDK({ 
+  stripeCt: buildModule(stripeCtModule, { 
+    apiUrl: 'http://localhost:8181/stripe'
+  })
+});
+
+export { ct, stripeCt };
+```
+
+:::tip
+#title
+You can name the modules anything you want.
+
+#default
+For example, you can rename `ct` to `commerce` and `stripeCt` to `payment`. `initSDK` will return an object with the same keys as the one passed to it.
+:::
+
+### Usage
+
+Once you have initialized the SDK, you can start importing the individual modules in your application. For example, if we wanted to 
+
+```typescript
+// Use the Commercetools module on the Product Page
+import { ct } from "./sdk";
+
+const { products } = await sdk.commerce.getProduct();
+
+// Use the Stripe for Commercetools module on the Checkout Page
+import { ct, stripeCt } from "./sdk";
+
+const cart = await ct.getCart();
+const { paymentElement, elements } = await stripeCt.mountPaymentElement({ cart: cart! });
+```
+
+
+## Combining Modules
+
+Alternatively, you can also combine multiple modules into a single SDK instance. This approach is useful if you want to use multiple modules in your application and don't want to initialize them separately.
+
+To combine multiple modules, follow these steps:
+
+1. Create a new `.ts` file - in most Vue Storefront projects, we use `sdk/index.ts`, but you can create this anywhere in your storefront
+2. Import the `initSDK` and `buildModule` from the SDK Core, along with any imports needed to add additional modules.
+3. Initialize the SDK by selectively importing and building the required modules:
+4. Export the initialized SDK for usage in your application:
+
+```typescript
+import { ctModule } from '@vsf-enterprise/commercetools-sdk';
+import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
+import { initSDK, buildModule } from '@vsf-enterprise/sdk';
+const sdkConfig = {
+  ct: buildModule(ctModule, { apiUrl: 'http://localhost:8181/ct' }),
+  stripeCt: buildModule(stripeCtModule, { apiUrl: 'http://localhost:8181/stripe' })
+};
+
+const sdk = initSDK(sdkConfig);
+export { sdk };
+```
+
+### Usage
+
+Once you have initialized the SDK, you can start utilizing the imported modules in your application. Here's an example of how you can use the commercetools and Stripe for commercetools modules as a single SDK instance:
+
+```typescript
+import { sdk } from "./sdk";
+
+
+const { products } = await sdk.commerce.getProduct();
+// do something with products...
+const cart = await sdk.ct.getCart();
+const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });
+```
+
+This makes it easier to use multiple modules in your application without having to initialize them separately, however, it can lead to performance issues if you're using several large modules.
+
+Experiment with combining the modules that best fit your application's requirements and enjoy the enhanced capabilities of our SDK.
+
+## Next Steps
+
+::grid{:columns="2"}
+#section-1
+:card{to="$base/advanced/extending-module" title="Extending the SDK" description="Learn how to customize, override, or extend any default functionality in the SDK" icon="ri:terminal-box-fill"}
+#section-2
+:card{to="/middleware" title="Middleware Docs" description="Understand more about Vue Storefront Middleware" icon="fa6-solid:layer-group"}
+#section-3
+:card{to="/integrations" title="View all Integrations" description="View our ready-to-use integrations for popular e-commerce services" icon="fluent:puzzle-cube-piece-20-filled"}
+#section-4
+:card{to="/integrations/custom/quick-start" title="Building Custom Integrations" description="Connect to your unique third-party services with custom integrations" icon="gridicons:customize"}
+
+::

docs/content/4.sdk/2.getting-started/_dir.yml

@@ -0,0 +1 @@
+title: Basics

docs/content/4.sdk/4.advanced/_dir.yml

@@ -0,0 +1 @@
+title: Advanced