Merge branch 'main' into feat/GH-222

.changeset/green-avocados-yell.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add payment description and logo

.changeset/lovely-pots-begin.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Remove ref from the menu element (temporary)

.changeset/small-camels-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Readme enhancements

.changeset/tame-guests-push.md

@@ -0,0 +1,5 @@
+---
+"blank-playground": patch
+---
+
+Add session persitance

.changeset/thick-kings-allow.md

@@ -0,0 +1,26 @@
+---
+"eslint-config-shopware": patch
+"product-detail-page": patch
+"responsive-images": patch
+"blank-playground": patch
+"express-checkout": patch
+"exampler-builder": patch
+"use-add-to-cart": patch
+"vue-demo-store": patch
+"vue-vite-blank": patch
+"use-checkout": patch
+"@shopware-pwa/nuxt3-module": patch
+"@shopware-pwa/composables-next": patch
+"@shopware-pwa/vue3-plugin": patch
+"login-form": patch
+"@shopware-pwa/api-client": patch
+"vue-blank": patch
+"use-cart": patch
+"@shopware-pwa/cms-base": patch
+"@shopware-pwa/helpers-next": patch
+"shopware-astro": patch
+"@shopware-pwa/typer": patch
+"docs": patch
+---
+
+bump dependencies

.github/workflows/code-examples.yml

@@ -1,10 +1,10 @@
 name: Code examples
 
 run-name: Playwright is testing code examples 🚀
-on: 
+on:
   workflow_dispatch:
   schedule:
-    - cron: '59 23 * * *'
+    - cron: "59 23 * * *"
 jobs:
   run-code_examples-tests:
     runs-on: ubuntu-latest
@@ -33,4 +33,4 @@ jobs:
 
       - name: Run tests
         working-directory: ./apps/e2e-test/
-        run: npx playwright test checkCodeExamples.spec.ts --project=chromium
+        run: npx playwright test checkCodeExamples.spec.ts --project=chromium

.github/workflows/e2e-tests.yml

@@ -35,3 +35,11 @@ jobs:
         run: pnpm run test:e2e
         env:
           BASE_E2E_URL: ${{ github.event.deployment_status.target_url }}
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() }}
+        with:
+          name: reports
+          path: apps/e2e-tests/reports/
+          retention-days: 7

apps/docs/.vitepress/config.ts

@@ -15,29 +15,119 @@ export const sidebar = [
   },
   {
     text: "FRAMEWORK",
+    link: "/framework/",
     items: [
       { text: "Requirements", link: "/framework/requirements" },
       { text: "Internal Structure", link: "/framework/internal-structure" },
+      {
+        text: "Composables",
+        link: "/framework/composables",
+        items: [
+          {
+            text: "Context Composables",
+            link: "/framework/composables/context-composables",
+          },
+          {
+            text: "Shared Composables",
+            link: "/framework/composables/shared-composables",
+          },
+          {
+            text: "Overwriting Composables",
+            link: "/framework/composables/overwriting-composables",
+          },
+        ],
+      },
       { text: "Shopping Experiences", link: "/framework/shopping-experiences" },
       { text: "Styling", link: "/framework/styling" },
-      { text: "Context Composables", link: "/framework/context-composables" },
-      { text: "Shared Composables", link: "/framework/shared-composables" },
-      { text: "Images", link: "/framework/images" },
-      { text: "Associations", link: "/framework/associations" },
-      { text: "Storefront url", link: "/framework/storefront-url" },
     ],
   },
   {
     text: "BUILDING",
+    link: "/getting-started/",
     items: [
-      { text: "Setup Templates", link: "/getting-started/templates" },
+      {
+        text: "Setup Templates",
+        link: "/getting-started/templates",
+        items: [
+          {
+            text: "Demo Store",
+            link: "/getting-started/templates/demo-store-template",
+          },
+          {
+            text: "Blank Template",
+            link: "/getting-started/templates/blank-template",
+          },
+          {
+            text: "Custom Project",
+            link: "/getting-started/templates/custom-project",
+          },
+          {
+            text: "Astro Template",
+            link: "/getting-started/templates/astro-template",
+          },
+        ],
+      },
       { text: "Routing", link: "/getting-started/routing" },
-      { text: "CMS", link: "/getting-started/cms/index" },
-      { text: "E-Commerce", link: "/getting-started/e-commerce/index" },
-      { text: "Page elements", link: "/getting-started/page-elements/index" },
       {
-        text: "Overwriting and extending composables",
-        link: "/getting-started/overwriting-composables",
+        text: "CMS",
+        link: "/getting-started/cms/",
+        items: [
+          { text: "Content Pages", link: "/getting-started/cms/content-pages" },
+          {
+            text: "Customize Components",
+            link: "/getting-started/cms/customize-components",
+          },
+          { text: "Create Blocks", link: "/getting-started/cms/create-blocks" },
+          {
+            text: "Create Elements",
+            link: "/getting-started/cms/create-elements",
+          },
+          {
+            text: "Overwriting CMS",
+            link: "/getting-started/cms/overwriting-cms",
+          },
+        ],
+      },
+      {
+        text: "E-Commerce",
+        link: "/getting-started/e-commerce/",
+        items: [
+          {
+            text: "Product listing",
+            link: "/getting-started/e-commerce/product-listing",
+          },
+          {
+            text: "Product detail page",
+            link: "/getting-started/e-commerce/product-detail-page",
+          },
+          { text: "Prices", link: "/getting-started/e-commerce/prices" },
+          { text: "Cart", link: "/getting-started/e-commerce/cart" },
+          { text: "Checkout", link: "/getting-started/e-commerce/checkout" },
+          { text: "Payments", link: "/getting-started/e-commerce/payments" },
+          {
+            text: "Custome Payment",
+            link: "/getting-started/e-commerce/custom-payment",
+          },
+        ],
+      },
+      {
+        text: "Page elements",
+        link: "/getting-started/page-elements/",
+        items: [
+          {
+            text: "Breadcrumbs",
+            link: "/getting-started/page-elements/breadcrumbs",
+          },
+          { text: "Images", link: "/getting-started/page-elements/images" },
+          {
+            text: "Login Form",
+            link: "/getting-started/page-elements/login-form",
+          },
+          {
+            text: "Navigation",
+            link: "/getting-started/page-elements/navigation",
+          },
+        ],
       },
       {
         text: "Sitemap",
@@ -48,27 +138,68 @@ export const sidebar = [
   },
   {
     text: "BEST PRACTICES",
+    link: "/best-practices/",
     items: [
       { text: "Deployment", link: "/best-practices/deployment" },
-      { text: "Error Handling", link: "/best-practices/error-handling" },
+      {
+        text: "Error Handling",
+        link: "/best-practices/error-handling",
+        items: [
+          {
+            text: "API Client Error Handling",
+            link: "/best-practices/error-handling/api-client-error-handling",
+          },
+        ],
+      },
       { text: "Images", link: "/best-practices/images" },
       { text: "Performance", link: "/best-practices/performance" },
       { text: "Testing", link: "/best-practices/testing" },
     ],
   },
   {
     text: "PACKAGE REFERENCE",
+    link: "/packages/",
     items: [
       { text: "Composables", link: "/packages/composables" },
-      { text: "API Client", link: "/packages/api-client" },
+      {
+        text: "API Client",
+        link: "/packages/api-client",
+        items: [
+          {
+            text: "Associations",
+            link: "/packages/api-client/docs/associations",
+          },
+          {
+            text: "Storefront URL",
+            link: "/packages/api-client/docs/storefront-url",
+          },
+        ],
+      },
       { text: "Types", link: "/packages/types" },
       { text: "Helpers", link: "/packages/helpers" },
     ],
   },
   {
     text: "RESOURCES",
+    link: "/resources/",
     items: [
-      { text: "Examples", link: "/resources/examples/" },
+      {
+        text: "Examples",
+        link: "/resources/examples/",
+        items: [
+          { text: "Navigation", link: "/resources/examples/navigation/" },
+          { text: "Cart", link: "/resources/examples/cart/" },
+          { text: "Product listing", link: "/resources/examples/listing/" },
+          {
+            text: "Product Detail Page",
+            link: "/resources/examples/product-detail-page/",
+          },
+          {
+            text: "Footer Navigation",
+            link: "/resources/examples/footer-navigation/",
+          },
+        ],
+      },
       { text: "Community Modules", link: "/resources/community-modules/" },
     ],
   },

apps/docs/.vitepress/theme/custom.css

@@ -14,4 +14,12 @@
 .VPPluginSearch-search-item:hover,
 .DocSearch-Button:hover .DocSearch-Button-Placeholder {
     color: var(--vt-c-blue);
+}
+
+.group .VPSidebarGroup .VPSidebarGroup {
+    margin-left: .6rem;
+}
+
+.group .VPSidebarGroup .VPSidebarGroup h2.title-text {
+    font-size: 11px;
 }

apps/docs/README.md

@@ -0,0 +1,40 @@
+# Documentation guide
+
+_Just some thoughts and guides about how the documentation should work._
+
+## Checklist
+
+- Check to which section your content belongs to (see sections list below)
+- Check if there is already a page that has the same topic
+- When you add smth to the sidebar make sure it is in same section and needed
+- Make sure every entry in the sidebar has an link (without next/prev nav breaks)
+- To not messup the sidebar try to work with sub-pages
+- In your content use headlines, info blocks and stackblitz
+- Make sure your content follows the same structure that other similar pages
+- Test every link on your new page or when you move pages
+
+## Documentation sections
+
+- **Framework**
+  _Documentation about internals and packages_
+  - **Composables**
+- **Building** (getting-started)
+  _Guides about how to build something (business use-case)_
+  _Should be a connection between framework and examples_
+  - **CMS**
+    _Sub-pages about CMS blocks, elements and pages._
+  - **E-Commerce**
+    _Sub-pages about E-Commerce related components like prices and so on._
+  - **Page-Elements**
+    _Sub-pages about Page-Elements that are not related to CMS and E-Commerce._
+  - **Templates**
+    _Sub-pages about how to setup the different templates we currently have._
+- **Best Practices**
+  _Sub-pages can be related to frontends but sometimes are also more general or eco-system related._
+- **Package Reference**
+  _Only references about the packages we have (mostly no guides)._
+- **Resources**
+  - **Examples**
+    _Just for copy and past examples strictly no guides here._
+  - **Community Modules**
+    _List of know community Modules for Fronteds._

apps/docs/package.json

@@ -14,17 +14,17 @@
     "@shopware-pwa/helpers-next": "workspace:*",
     "flexsearch": "^0.7.31",
     "markdown-it": "^13.0.1",
-    "vitepress": "1.0.0-alpha.75",
+    "vitepress": "1.0.0-beta.1",
     "vitepress-plugin-search": "1.0.4-alpha.20",
     "vitepress-shopware-docs": "0.3.0-beta.44",
-    "vue": "^3.3.2"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@shopware-pwa/typer": "workspace:*",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.16.12",
+    "@types/node": "^18.16.16",
     "@vitejs/plugin-vue": "^4.2.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "pnpm": {
     "peerDependencyRules": {

apps/docs/src/best-practices/images.md

@@ -133,7 +133,7 @@ When Images occupy a big amount of space on web pages, they are a common cause o
 - Never use `loading="lazy"` on `<img>` elements if they are part of what an user see first on they viewport (consider editing the attributes for CMS elements in Shopware Experiences).
 - Utilize `fetchpriority="high"` on `<img>` also tells the browser, that the asset (LCP resource is prioritized) is important and should be taken care of as fast as possible.
 
-<PageRef page="../framework/images" title="Framework" sub="How to display images served by API" />
+<PageRef page="../getting-started/page-elements/images" title="Images as Page-Element" sub="How to display images served by API" />
 
 ## Resources
 

apps/docs/src/best-practices/index.md

@@ -4,3 +4,11 @@ nav:
   title: Best practices
   class: custom-class
 ---
+
+# BEST PRACTICES
+
+<PageRef title="Deployment" sub="Collection of good practices to help you provide a reliable application." page="deployment" />
+<PageRef title="Error Handling" sub="Describes different ways of handling errors in different cases." page="error-handling" />
+<PageRef title="Images" sub="Collection of good practices to manage images." page="images" />
+<PageRef title="Performance" sub="Collection of good practices to help you provide a reliable application." page="performance" />
+<PageRef title="Testing" sub="Testing practices to help you provide a reliable application." page="testing" />