docs: migrate to new docs (#6949)

This intentionally has linting errors, as IN-3345 PR will replace all linting anyway.

.gitignore

@@ -25,3 +25,6 @@ coverage
 
 # OS generated files
 .DS_STORE
+
+# Nuxt generated files
+.nuxt

docs/README.md

@@ -0,0 +1,22 @@
+# Vue Storefront Docs Starter
+
+Welcome to the Vue Storefront Docs Boilerplate! If you're creating a new Vue Storefront integration, this is the place to start. 
+
+This Nuxt project can help you preview your content locally and get it ready to be merged into the Vue Storefront docs.
+
+It extends our [Base Layer](https://docs.vuestorefront.io/community/contributing/docs/base-layer) to give you all of the modules, components, and features available in the deployed Vue Storefront docs.
+
+Then, when you're ready to publish your content, we'll work with you to get add the `content` folder of this project as a remote Git source for the Vue Storefront docs.
+
+## Tips
+
+You can use the rest of this project to preview your content locally, but any components/layouts/composables/etc. will not be available to the published docs.
+
+If you need additional functionality, reach out to us on [Discord](https://discord.vuestorefront.io) and we'll work with you to get it added to the docs base layer and make it available to all of our docs projects.
+
+But remember - if you're publishing through the VSF docs, only your `content` folder will be pulled into the docs.
+
+### Place images directly in the `content` folder
+
+If you need to use images in your content, you can place them directly in the `content` folder. Then, you can reference them in your content using the relative path.
+

docs/components/content/CodeEmbed.vue

@@ -0,0 +1,9 @@
+<template>
+<div>
+  <iframe :src="config" width="100%" height="100%" fetchpriority="low"></iframe>
+</div>
+</template>
+
+<script setup>
+defineProps(['config'])
+</script>

docs/content/1.index.md

@@ -0,0 +1,57 @@
+---
+layout: fullscreen
+hideFromSiteSearch: true
+---
+
+
+::info
+#title
+Looking for Vue Storefront v2 docs?
+#default
+These docs are written for the Vue Storefront SDK, if you're looking for our Nuxt 2 based solutions, please visit our [v2 docs](https://docs.vuestorefront.io/v2).
+::
+
+# [Vue Storefront Docs]{.text-4xl.mt-8.block}
+
+
+Vue Storefront is a Frontend-as-a-Service that provides several tools to help you build performant, scalable, and customizable eCommerce storefronts. From UI libraries and integrations, to deployment and monitoring, we can help you build the ideal headless commerce experience. 
+
+::card{title="Getting Started" icon="IconVsf" }
+
+#description
+Setup new Vue Storefront project or learn more about our architecture, project principles, and all of the ways that the Vue Storefront ecosystem can help you build better storefronts. 
+
+#cta
+:::docs-button{to="/general"}
+Learn more
+:::
+::
+
+## Products and Features
+
+::grid{:columns='3'}
+#section-1
+:card{to="/general" title="What is Vue Storefront?" description="New here? Learn about all the different ways Vue Storefront can help you build with performant websites." icon="ri:book-2-fill"}
+
+#section-2
+:card{to="/integrations" title="Integrations" description="Connect to the third-party services you need to run your storefront, all through one consistent pattern." icon="ri:terminal-box-fill"}
+
+#section-3
+:card{to="https://docs.storefrontui.io" title="Storefront UI" description="Implement your design system with our ready to customize UI elements built for e-commerce" icon="IconStorefrontUi" }
+
+#section-4
+:card{to="/cloud" title="Cloud" description="Deploy with confidence with production-grade cloud hosting for your Vue Storefront applications" icon="ri:cloud-fill"}
+
+#section-5
+:card{to="/console" title="Console" description="Deploy, monitor, and manage your storefront with our cloud hosting platform " icon="ri:community-line"}
+
+#section-6
+:card{to="/enterprise" title="Enterprise" description="Ready to take your storefront next to the next level? Reach out to sales to see how we can help you." icon="ri:store-3-fill"}
+
+#section-7
+:card{to="https://docs.vuestorefront.io/v2" title="VSF v2 Docs" description="Looking for our v2 docs and Nuxt 2 integrations?" icon="IconVsf"}
+
+
+::
+
+

docs/content/2.assistant.md

@@ -0,0 +1,9 @@
+---
+layout: fullscreen
+navigation: false
+---
+
+# AI Assistant (Alpha)
+
+<CodeEmbed :config="https://assistant-red.vercel.app/?cid=e08b598e-3781-43f8-b899-e52bfc9c06cc" />
+

docs/content/2.general/1.index.md

@@ -0,0 +1,97 @@
+---
+title: Overview
+layout: default
+---
+# Overview
+
+::info Want to skip the theory and make your hands dirty?
+
+Learn how to set up your first Vue Storefront project [here](/general/starting-new-project).
+::
+
+**We know that use cases leading to eCommerce excellence are often far from standard ones which involves a lot of custom development. On the other hand delivering tailored solutions costs a lot of money, takes a lot of time and involves a lot of risk. At Vue Storefront we want to bridge this gap by providing opinionated and flexible framework for building eCommerce Storefronts.**
+
+Building a storefront requires solving multiple domain-specific problems separately and ensuring these solutions work well together. It’s not an easy task associated with considerable risk. This is precisely what Vue Storefront was built to help with.
+
+We started in 2017 on Github and we're still true to our Open Source roots. **All of our core products are Open Source** under MIT license. We also have [extended offering for Enterprise customers](/enterprise).
+
+:card{to="/general/basics/philosophy" title="Philosophy" description="Learn what principles we followed when building Vue Storefront." icon="IconVsf"}
+
+
+## What is Vue Storefront
+
+Vue Storefront is not just one product. **We provide an ecosystem of independent developer tools** adressing challenges that you will inevitably encounter when building an eCommerce storefront, such as:
+
+::list{type="success"}
+- Building a scalable **Design System** with accessible components to keep consistency between different user interface elements.
+- Building a fast and reliable **storefront** that delivers excellent User Experience to your customers.
+- **Integrating third-party vendors** into your API orchestration and storefront.
+- **Managing infrastructure, CI/CD pipelines, and deployments** to keep the application fast and reliable even under heavy loads.
+- **Implementing engineering and architecture best practices** ensures that the project remains flexible and maintainable even on a large scale.
+::
+
+We will help you with all of the above and more. Our large ecosystem of developer tools and integrations will accelerate and simplify your development process without compromising quality and flexibility.
+
+
+::grid{:columns="2"}
+#section-1
+:card{to="/general/basics/architecture" title="Architecture" description="Learn about our products, ecosystem and how they implement headless best practices." icon="carbon:reference-architecture"}
+
+#section-2
+:card{to="/general/basics/data-flow" title="Data Flow" description="Understand how Vue Storefront connects your storefront to various services" icon="ph:flow-arrow-bold"}
+::
+
+## Extending Vue Storefront
+
+Vue Storefront is built for custom use cases. It's safe to say that with Vue Storefront you are able to build the same things that you could build from scratch.
+
+:card{to="/general/basics/extensibility" title="Extensibility" description="Learn how Vue Storefront can be adjusted to your needs" icon="fa6-solid:layer-group"}
+
+
+## Our Products
+
+With Vue Storefront's Middleware and SDK, you can connect to different platforms and services. Our Storefront UI Design System and ready Storefronts will save you from repetitive groundwork and set your project for success.
+
+<img src="/3.basics/img/architecture/general.svg" alt="Vue Storefront Architecture" class="mx-auto" />
+
+::grid{:columns="2"}
+#section-1
+:card{to="/sdk" title="SDK" description="Connect to Middleware and bring type-safety to your Storefront" icon="ri:terminal-box-fill"}
+
+#section-2
+:card{to="/middleware" title="Middleware" description="Integrate and orchestrate all your API's" icon="fa6-solid:layer-group"}
+
+#section-3
+:card{to="/storefronts" title="Storefronts" description="Accelerate your development with pre-built, customizable, and fully functional projects" icon="material-symbols:storefront"}
+
+#section-4
+:card{to="https://docs.storefrontui.io" title="Storefront UI" description="Our open-source component library built for e-commerce" icon="IconStorefrontUi"}
+::
+
+## Integrations
+
+Our products are integrated with leading eCommerce and MACH vendors.
+
+:card{to="/integrations" title="Integrations" description="See available integrations" icon="fluent:puzzle-cube-piece-20-filled"}
+
+## Demo
+
+Our demo Storefront is using:
+
+- React/Next.js
+- Commercetools
+- Storefront UI 2
+- Vue Storefront Middleware
+- Vue Storefront SDK
+
+<img src="/img/basics/demo.png" alt="Vue Storefront Demo" class="mx-auto">
+
+
+
+::grid{:columns="2"}
+#section-1
+:card{to="https://demo.vuestorefront.io" title="Demo" description="Check out our demo storefront to see how a generic Vue Storefront project look like" icon="pepicons-pencil:internet"}
+
+#section-2
+:card{to="/storefronts" title="Storefronts" description="Demo Storefront is just one of many. We support leading meta-frameworks from Vue and React ecosystems. See what else is available!" icon="material-symbols:storefront"}
+::

docs/content/2.general/2.starting-new-project.md

@@ -0,0 +1,43 @@
+---
+title: Starting new project
+layout: default
+---
+
+# Starting new project
+
+::info Open Source integrations use old architecture
+
+Temporarily Open Source integrations use old architecture based on Nuxt 2. We are working closely with their maintainers on updating them to the latest version of Nuxt 3 and Vue Storefront SDK. You can find documentation for the old integrations [here](https://docs.vuestorefront.io/v2). Feel free to reach out to us on [Discord](https://discord.vuestorefront.io) if you want to learn more.
+::
+
+To start new Vue Storefront project simply run our CLI.
+```bash
+npx @vue-storefront/cli init
+```
+
+Our friendly configurator will ask a few questions and set up a fresh Vue Storefront project for you. Your project is a fully-functional eCommerce storefront connected to the eCommerce platform of your choice.
+
+```
+┌  Welcome to Vue Storefront 2 CLI! 💚
+│
+◇  🚀  What's your project name?
+│  my-vsf-project
+│
+◆  ⚙️  Choose an integration template:
+│  ● Magento 2 
+│  ○ Shopify
+│  ○ Vendure
+│  ○ Kibo Commerce (beta)
+│  ○ Odoo
+│  ○ Prestashop
+│  ○ Spree
+│  ○ Custom integration
+└
+
+```
+
+Once you're set up, check relevent [integration docs](/integrations) for the next steps.
+
+## Enterprise Integrations
+
+Only Open Source integrations are available in the CLI. If you want to access Enterprise integrations check out our [Enterprise offering](/enterprise).

docs/content/2.general/3.basics/2.philosophy.md

@@ -0,0 +1,55 @@
+# Philosophy
+
+**We know that use cases leading to eCommerce excellence are often far from standard ones which involves a lot of custom development. On the other hand delivering tailored solutions costs a lot of money, takes a lot of time and involves a lot of risk. At Vue Storefront we want to bridge this gap by providing opinionated and flexible framework for building eCommerce Storefronts.**
+
+Building a storefront requires solving multiple domain-specific problems separately and ensuring these solutions work well together. It’s not an easy task associated with considerable risk. This is precisely what Vue Storefront was built to help with.
+
+## Vue Storefront is a Platform
+
+Vue Storefront is not just one product. **We provide an ecosystem of independent developer tools** adressing challenges that you will inevitably encounter when building an eCommerce storefront, such as:
+
+::list{type="success"}
+- Building a scalable **Design System** with accessible components to keep consistency between different user interface elements.
+- Building a fast and reliable **storefront** that delivers excellent User Experience to your customers.
+- **Integrating third-party vendors** into your API orchestration and storefront.
+- **Managing infrastructure, CI/CD pipelines, and deployments** to keep the application fast and reliable even under heavy loads.
+- **Implementing engineering and architecture best practices** ensures that the project remains flexible and maintainable even on a large scale.
+::
+
+We will help you with all of the above and more. Our large ecosystem of developer tools and integrations will accelerate and simplify your development process without compromising quality and flexibility.
+
+:card{to="/general/basics/architecture" title="Architecture" description="Learn about our products, ecosystem and how they implement headless best practices." icon="carbon:reference-architecture"}
+
+## Vue Storefront is built for custom use-cases
+
+Headless and Composable architectures are meant for tailored solutions. Instead of living with trade-offs of your monolithic eCommerce vendor you're choosing more granular tools that are best-suited to your needs. This way you can work more effectvely than your competitors.
+
+Same rule applies to your storefront. This is the part of the system that your customers will interact with the most. Instead of showing them a generic storefront with mediocre performace you have a chance to stand out and deliver outstanding user experience that they'll remember.
+
+After browsing countless landing pages of WYSIWYG Page Builders developers often come to the conslusion that **available tools are too limiting** and the only way to achieve outstanding user experience is building the storefront from scratch.
+
+While this idea could sound tempting at first glance it often leads to the opposite effect. **Developers tend to oversimplify the effort and complexity of building a storefront** and the end result often costs more, takes more time to finish and the final result is far from what they hoped it to be.
+
+We've built Vue Storefront precisely for this kind of developer. **With Vue Storefront you are able to build the same things that you could build from scratch. You build them faster and mitigate the risk that is always high for complex projects.** Every technical decision has major impact on the future of the project and its hard to make them all right for the first time. We spent years on making mistakes so you don't have to.
+
+:card{to="/general/basics/extensibility" title="Extensibility" description="Learn about the flexibility and extensibility of Vue Storefront." icon="fa6-solid:layer-group"}
+
+## We believe in Open Source
+
+We believe that the best solutions are built when people with different skillsets and perspectives can collaborate together. Vue Storefront started in 2017 as Open Source project and quickly became one of the [most popular eCommerce repository on GitHub](https://github.com/topics/ecommerce). All of our core products are free and Open Source under MIT license. 
+
+On top of our Open Source products we offer Enterprise-grade support and integrations for more demainding customers aka. [Vue Storefront Enterprise](/enterprise).
+
+:card{to="https://github.com/vuestorefront" title="See our Github" description="Browse our Open Source repositories. Maybe you'd like to become a Vue Storefront contributor? " icon="grommet-icons:github"}
+
+## We aim for the best Developer Experience on the market
+
+If you ever worked with enterprise-grade software you know very well that it's usually not the most "exciting"" tooling to use. Enterprise-grade software focuses on flexibility and risk mitigation but it often comes with the cost of decreased developer experience and productivity. 
+
+Many of us here at Vue Storefront, including founders worked at eCommerce agencies before. We know the pain of working with such software and we know how much developer experience influences our productivity. 
+
+Our goal at Vue Storefront is to deliver software that is as flexible and reassuring as enterprise-grade software but also as pleasing to work with, simple and versatile as modern developer tools occupying highest slots in GitHub rankings.
+
+We want to take all the repetitive groundwork from you, set solid architectural foundations for your project that will set you for success and let you focus on the custom stuff that will make your project stand out.
+
+**We want developers to say with full confidence after using our software that we deliver the best developer experience in the eCommerce market.** We know that it's an ambitious goal and we know that it's not gonna happen overnight but we will to keep improving our tools until that happens.