From 38c4f5ab7a314375b1494d200422f3797d096b7b Mon Sep 17 00:00:00 2001
From: Bojan Rajh <b.rajh@shopware.com>
Date: Mon, 17 Jul 2023 15:51:08 +0200
Subject: [PATCH 1/3] Openapi

---
 src/api.md                                    |   9 +
 src/components/OpenAPIViewer.vue              | 184 ++++++++++++++++++
 .../OpenApiViewerEndpointParameters.vue       |  58 ++++++
 .../OpenApiViewerEndpointPlayground.vue       |  65 +++++++
 .../OpenApiViewerEndpointResponses.vue        |  30 +++
 src/components/OpenApiViewerMagic.vue         | 116 +++++++++++
 src/components/OpenApiViewerUnref.vue         |  19 ++
 src/components/openApi/sample.ts              |  57 ++++++
 8 files changed, 538 insertions(+)
 create mode 100644 src/api.md
 create mode 100644 src/components/OpenAPIViewer.vue
 create mode 100644 src/components/OpenApiViewerEndpointParameters.vue
 create mode 100644 src/components/OpenApiViewerEndpointPlayground.vue
 create mode 100644 src/components/OpenApiViewerEndpointResponses.vue
 create mode 100644 src/components/OpenApiViewerMagic.vue
 create mode 100644 src/components/OpenApiViewerUnref.vue
 create mode 100644 src/components/openApi/sample.ts

diff --git a/src/api.md b/src/api.md
new file mode 100644
index 00000000..389fd4de
--- /dev/null
+++ b/src/api.md
@@ -0,0 +1,9 @@
+---
+aside: false
+sidebar: false
+---
+<script setup lang="ts">
+import OpenApiViewer from "./components/OpenAPIViewer.vue";
+</script>
+
+<OpenApiViewer />
\ No newline at end of file
diff --git a/src/components/OpenAPIViewer.vue b/src/components/OpenAPIViewer.vue
new file mode 100644
index 00000000..aedd9c0e
--- /dev/null
+++ b/src/components/OpenAPIViewer.vue
@@ -0,0 +1,184 @@
+<style lang="scss">
+.OpenAPIViewer {
+  &_sidebar {
+    height: 90vh;
+    overflow-x: auto;
+  }
+
+  &_content {
+    @apply px-12;
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  &_doc {
+  }
+
+  &_playground {
+  }
+
+  &_link {
+    @apply text-xs;
+  }
+
+  &_method,
+  &_response-code {
+    color: white;
+  }
+
+  &_method {
+    @apply px-2 py-1 rounded-sm;
+    &.--post {
+      @apply bg-[var(--sw-c-blue-vivacious-900)];
+    }
+
+    &.--get {
+      @apply bg-[var(--sw-c-blue-vivacious-600)];
+    }
+
+    &.--patch {
+      @apply bg-[var(--sw-c-blue-vivacious-300)];
+    }
+
+    &.--delete {
+      @apply bg-[var(--sw-c-pink-900)];
+    }
+  }
+
+  &_response-code {
+    @apply px-2 py-1 rounded-sm;
+
+    &.--2 {
+      @apply bg-[var(--sw-c-blue-vivacious-900)];
+    }
+
+    &.--3 {
+      @apply bg-[var(--sw-c-green-500)];
+    }
+
+    &.--4 {
+      @apply bg-[var(--sw-c-pink-400)];
+    }
+
+    &.--5 {
+      @apply bg-[var(--sw-c-pink-900)];
+    }
+
+    &.--404 {
+      @apply bg-red;
+    }
+  }
+}
+</style>
+
+<template>
+  <div class="OpenAPIViewer">
+    <div class="flex">
+
+      <div class="OpenAPIViewer_sidebar basis-300px shrink-0 text-sm">
+        <div v-for="(endpoints, path) in groupedPaths">
+          <ul class="no-list">
+            {{ endpoints[0].tags[0] }} ({{ endpoints.length }})
+            <li v-for="endpoint in endpoints">
+              <a href="#" class="OpenAPIViewer_link" @click.prevent="select(endpoint.method, endpoint.path)">
+                <span class="OpenAPIViewer_method" :class="`--${endpoint.method}`">{{ endpoint.method }}</span>
+                {{ endpoint.summary }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="OpenAPIViewer_content grid gap-12" v-if="endpoint">
+        <!--<template v-for="(methods, path) in documentObject.paths">
+          <div class="grid gap-8">-->
+        <div data-v-for="(endpoint, method) in methods"
+             class="flex gap-8 relative items-start">
+          <div class="OpenAPIViewer_doc">
+            <h1>{{ endpoint.summary }}</h1>
+            <div>
+              <div class="c-any-card">
+                <span class="OpenAPIViewer_method" :class="`--${selectedMethod}`">{{ selectedMethod }}</span>
+                http://localhost:8000/api{{ selectedPath }}
+              </div>
+            </div>
+            <p data-endpoint-description>{{ endpoint.description }}</p>
+            <!--<div>Tags: {{ endpoint.tags }}</div>-->
+            <p data-endpoint-operationId>{{ endpoint.operationId }}</p>
+
+            <h2>Request</h2>
+            <OpenApiViewerEndpointParameters :endpoint="endpoint"/>
+
+            <h2>Response</h2>
+            <OpenApiViewerEndpointResponses :endpoint="endpoint" :document="documentObject"/>
+          </div>
+          <div class="OpenAPIViewer_playground basis-2/5 flex shrink-0 grow-0"
+               style="position: sticky; top: 100px;">
+            <OpenApiViewerEndpointPlayground :endpoint="endpoint" :document="documentObject"/>
+          </div>
+        </div>
+        <!--</div>
+      </template>-->
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {OpenAPIV3} from "openapi-types";
+//import OASNormalize from 'oas-normalize';
+import jsonApi from './storeapi.json'
+import {ref, computed} from "vue";
+
+import OpenApiViewerEndpointParameters from "./OpenApiViewerEndpointParameters.vue";
+import OpenApiViewerEndpointResponses from "./OpenApiViewerEndpointResponses.vue";
+import OpenApiViewerEndpointPlayground from "./OpenApiViewerEndpointPlayground.vue";
+
+//const oas = new OASNormalize(jsonApi);
+
+const documentObject = jsonApi;//await oas.deref() as OpenAPIV3.Document;
+
+const selectedPath = ref(null);
+const selectedMethod = ref(null);
+
+const select = (method, path) => {
+  selectedPath.value = path;
+  selectedMethod.value = method;
+}
+
+const endpoint = computed(() => {
+  if (!selectedPath.value || !selectedMethod.value) {
+    return null;
+  }
+
+  return documentObject.paths[selectedPath.value][selectedMethod.value];
+})
+
+const groupedPaths = computed(() => {
+  return Object.entries(documentObject.paths)
+      .reduce((reduced, [path, endpoints]) => {
+        const partialPath = path.split('/')
+            .map(part => part.startsWith('{') ? '{}' : part)
+            .filter(part => part !== '{}')
+            .join('/');
+
+        // add the method
+        const mappedEndpoints = Object.entries(endpoints)
+            .map(([httpMethod, method]) => {
+              method.path = path;
+              method.method = httpMethod;
+              return method;
+            })
+
+        console.log(partialPath);
+        if (!reduced[partialPath]) {
+          reduced[partialPath] = [];
+        }
+
+        reduced[partialPath].push(...mappedEndpoints);
+
+        return reduced;
+      }, {})
+})
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerEndpointParameters.vue b/src/components/OpenApiViewerEndpointParameters.vue
new file mode 100644
index 00000000..5d7a099a
--- /dev/null
+++ b/src/components/OpenApiViewerEndpointParameters.vue
@@ -0,0 +1,58 @@
+<template>
+  <div data-endpoint-parameters class="grid gap-2">
+    <!-- group parameters by "in" -->
+    <div v-for="(parameters, group) in getGroupedParameters(endpoint)">
+      <h2>{{ group }} parameters</h2>
+      <div class="grid gap-2">
+        <div v-for="parameter in parameters" class="grid gap-2">
+          <div class="flex gap-2">
+            <span class="font-medium">{{ parameter.name }}</span>
+            <span class="italic">{{ parameter.schema.type }}</span>
+          </div>
+          <div>
+            {{ parameter.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {OpenAPIV3} from "openapi-types";
+
+const props = defineProps({
+  endpoint: {
+    type: Object as OpenAPIV3.PathItemObject
+  }
+})
+
+const getGroupedParameters = (endpoint: OpenAPIV3.PathItemObject) => {
+  console.log(endpoint);
+  const groups = {
+    header: [],
+    query: [],
+    get: [],
+    post: [],
+  };
+  endpoint.parameters?.forEach((param: OpenAPIV3.ParameterObject | OpenAPIV3.ReferenceObject) => {
+    if (!param.in) {
+      return;
+    }
+    if (!groups[param.in]) {
+      groups[param.in] = [];
+    }
+    groups[param.in].push(param);
+  })
+
+  Object.keys(groups).forEach(key => {
+    if (groups[key].length > 0) {
+      return;
+    }
+
+    delete groups[key];
+  })
+
+  return groups;
+}
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerEndpointPlayground.vue b/src/components/OpenApiViewerEndpointPlayground.vue
new file mode 100644
index 00000000..bd9750c6
--- /dev/null
+++ b/src/components/OpenApiViewerEndpointPlayground.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="grid gap-4 w-full">
+
+    <div class="bg-black text-white">
+      <p>Headers</p>
+      <p>GET parameters</p>
+      <p>POST parameters</p>
+      <p>JSON body</p>
+      <p>Host selector</p>
+
+
+      <div class="grid">
+        <div>
+          <SwagInput type="number"/>
+          <SwagInput type="text"/>
+        </div>
+      </div>
+    </div>
+
+    <div>
+
+      <b>HTTP</b>
+      {{ samples.http }}
+
+      <b>CURL</b>
+      {{ samples.curl }}
+
+      <b>wget</b>
+      {{ samples.wget }}
+
+      <b>PHP (guzzle)</b>
+      {{ makeHighlight('php', samples.phpGuzzle) }}
+
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+import {SwagInput} from "vitepress-shopware-docs";
+import * as Samples from "./openApi/sample";
+
+//import {highlight} from "vitepress/src/node/markdown/plugins/highlight";
+
+const props = defineProps({
+  endpoint: {
+    required: true,
+  }
+});
+
+const makeHighlight = (lang, code) => {
+  return '';
+  //return highlight();
+}
+
+const samples = computed(() => {
+  return {
+    http: new Samples.HTTP(props.endpoint.path, props.endpoint.method).getCode(),
+    curl: new Samples.CURL(props.endpoint.path, props.endpoint.method).getCode(),
+    wget: new Samples.Wget(props.endpoint.path, props.endpoint.method).getCode(),
+    phpGuzzle: new Samples.PHPGuzzle(props.endpoint.path, props.endpoint.method).getCode(),
+  };
+});
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerEndpointResponses.vue b/src/components/OpenApiViewerEndpointResponses.vue
new file mode 100644
index 00000000..f9c9deb3
--- /dev/null
+++ b/src/components/OpenApiViewerEndpointResponses.vue
@@ -0,0 +1,30 @@
+<template>
+  <div data-endpoint-responses>
+    <div v-for="(response, code) in endpoint.responses">
+      <div>
+        <h5><span class="OpenAPIViewer_response-code" :class="`--${code[0]} --${code}`">{{ code }}</span>
+        </h5>
+      </div>
+
+      <OpenApiViewerMagic :data="response" :document="document" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OpenApiViewerMagic from "./OpenApiViewerMagic.vue";
+import {OpenAPIV3} from "openapi-types";
+
+// the most probable approach here is to use js/ts to map the tree and de-ref the document
+// then re-ref everything and make every object expandable and reffed
+
+const props = defineProps({
+  endpoint: {
+    type: Object as OpenAPIV3.PathItemObject
+  },
+  document: {
+    type: Object as OpenAPIV3.Document,
+  }
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerMagic.vue b/src/components/OpenApiViewerMagic.vue
new file mode 100644
index 00000000..00878da5
--- /dev/null
+++ b/src/components/OpenApiViewerMagic.vue
@@ -0,0 +1,116 @@
+<template>
+  <template v-if="depth > 5">
+    -- show more -- <span class="hidden">{{ data }}</span>
+  </template>
+  <template v-else>
+    <span class="hidden">{{ Object.keys(data) }}</span>
+
+    <span v-if="data.required" data-required>*</span>
+    <span v-if="data.type" class="italic">{{ data.type }}</span>
+
+    <div v-if="data.properties" class="pl-4 grid" data-properties>
+      <div v-for="(property, key) in data.properties">
+        <span>{{ key }}</span>
+        <OpenApiViewerMagic v-if="key === '$ref'"
+                            :data="getRef(property)"
+                            :document="document"
+                            :depth="depth + 1"/>
+        <OpenApiViewerMagic v-else-if="property && typeof property === 'object' && '$ref' in property"
+                            :data="getRef(property['$ref'])"
+                            :document="document"
+                            :depth="depth + 1"/>
+        <OpenApiViewerMagic v-else :data="property"
+                            :document="document"
+                            :depth="depth + 1"/>
+      </div>
+    </div>
+
+    <div v-if="data.additionalProperties" class="pl-4 grid" data-additional-properties>
+      <div v-for="(property, key) in data.additionalProperties">
+        <span>{{ key }}</span>
+        <OpenApiViewerMagic v-if="key === '$ref'"
+                            :data="getRef(property)"
+                            :document="document"
+                            :depth="depth + 1"/>
+        <OpenApiViewerMagic v-else-if="property && typeof property === 'object' && '$ref' in property"
+                            :data="getRef(property['$ref'])"
+                            :document="document"
+                            :depth="depth + 1"/>
+        <OpenApiViewerMagic v-else :data="property"
+                            :document="document"
+                            :depth="depth + 1"/>
+      </div>
+    </div>
+
+    <template v-if="'$ref' in data">
+      {{ data['$ref'] }}
+      <OpenApiViewerMagic :data="getRef(data['$ref'])" :document="document"
+                          :depth="depth + 1"/>
+    </template>
+
+    <div v-if="'schema' in data" data-schema>
+      <OpenApiViewerMagic :data="data.schema" :document="document"
+                          :depth="depth + 1"/>
+    </div>
+
+    <p v-if="data.example" data-example>{{ data.example }}</p>
+
+    <div v-if="'allOf' in data" data-all-of>
+      All of:
+      <OpenApiViewerMagic v-for="single in data.allOf" :data="single" :document="document"
+                          :depth="depth + 1"/>
+    </div>
+
+    <div v-if="'oneOf' in data" data-one-of>
+      One of:
+      <OpenApiViewerMagic v-for="single in data.oneOf" :data="single" :document="document"
+                          :depth="depth + 1"/>
+    </div>
+
+    <p v-if="data.description" data-description>{{ data.description }}</p>
+
+    <div class="grid gap-2" v-if="data.content" data-content>
+      <div v-for="(subschema, type) in data.content">
+        <h6>{{ type }}</h6>
+        <OpenApiViewerMagic :data="subschema" :document="document"
+                            :depth="depth + 1"/>
+      </div>
+    </div>
+
+    <!--<div class="grid gap-2" v-if="data['$ref']">
+      <OpenApiViewerUnref :content="getRef(data)" :document="document"/>
+    </div>-->
+  </template>
+</template>
+
+<script setup lang="ts">
+//import OpenApiViewerMagic from "./OpenApiViewerMagic.vue";
+import OpenApiViewerUnref from "./OpenApiViewerUnref.vue";
+import {computed} from "vue";
+import {OpenAPIV3} from "openapi-types";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  document: {
+    type: Object as OpenAPIV3.Document,
+  },
+  depth: {
+    default: 0,
+  }
+})
+
+const getRef = computed(() => (ref) => {
+  if (!ref) {
+    return {};
+  }
+  if (ref.startsWith('#/components/')) {
+    const [hash, components, responses, code] = ref.split('/');
+    return props.document[components][responses][code] || {};
+  }
+  console.log(ref);
+  return {};//ref;
+})
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerUnref.vue b/src/components/OpenApiViewerUnref.vue
new file mode 100644
index 00000000..b2d588a3
--- /dev/null
+++ b/src/components/OpenApiViewerUnref.vue
@@ -0,0 +1,19 @@
+<template>
+  {{ content }}
+  <div v-for="(value, key) in content">
+    {{ key }}: {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import {OpenAPIV3} from "openapi-types";
+
+const props = defineProps({
+  content: {
+    type: Object
+  },
+  document: {
+    type: Object as OpenAPIV3.Document,
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/components/openApi/sample.ts b/src/components/openApi/sample.ts
new file mode 100644
index 00000000..7ba7ff82
--- /dev/null
+++ b/src/components/openApi/sample.ts
@@ -0,0 +1,57 @@
+export class Sample {
+    hostname: string;
+    endpoint: string;
+    method: string;
+
+    constructor(endpoint: string, method: string) {
+        this.endpoint = endpoint;
+        this.method = method;
+        this.hostname = 'http://localhost:8000';
+    }
+}
+
+export class PHPGuzzle extends Sample {
+    getCode() {
+        return `<?php
+
+$client = new \\GuzzleHttp\\Client();
+
+$response = $client->request('${this.method.toUpperCase()}', '${this.hostname}${this.endpoint}', [
+  'headers' => [
+    'Accept' => 'application/vnd.api+json, application/json',
+    'Authorization' => '',
+  ],
+]);
+
+echo $response->getBody();`
+    }
+}
+
+export class HTTP extends Sample {
+    getCode() {
+        return `${this.method.toUpperCase()} ${this.endpoint} HTTP/1.1
+Accept: application/vnd.api+json, application/json
+Authorization: 
+Host: ${this.hostname.split('//')[1]}`
+    }
+}
+
+export class CURL extends Sample {
+    getCode() {
+        return `curl --request ${this.method.toUpperCase()} \\
+  --url ${this.hostname}${this.endpoint} \\
+  --header 'Accept: application/vnd.api+json, application/json' \\
+  --header 'Authorization: '`
+    }
+}
+
+export class Wget extends Sample {
+    getCode() {
+        return `wget --quiet \\
+  --method ${this.method.toUpperCase()} \\
+  --header 'Accept: application/vnd.api+json, application/json' \\
+  --header 'Authorization: ' \\
+  --output-document \\
+  - ${this.hostname}${this.endpoint}`;
+    }
+}
\ No newline at end of file

From 3604a4c02d01ec7c21bd504edf24dd83f9204b8b Mon Sep 17 00:00:00 2001
From: Bojan Rajh <b.rajh@shopware.com>
Date: Thu, 3 Aug 2023 14:11:02 +0200
Subject: [PATCH 2/3] More features

---
 pnpm-lock.yaml                                |  38 +++-
 src/components/OpenAPIViewer.vue              | 170 ++++++++++--------
 src/components/OpenApi.vue                    |  18 ++
 .../OpenApiViewerEndpointParameters.vue       |  10 +-
 .../OpenApiViewerEndpointResponses.vue        |  12 +-
 src/components/OpenApiViewerMagic.vue         |  97 +++++++---
 .../OpenApiViewerSecuritySchemas.vue          |  45 +++++
 src/components/openApi/markdown.ts            |  30 ++++
 src/components/openApi/openApi.ts             |  69 +++++++
 src/components/openApi/symbol.ts              |   1 +
 .../page/OpenApiViewerPageEndpoint.vue        |  54 ++++++
 .../page/OpenApiViewerPageResponse.vue        |  23 +++
 .../page/OpenApiViewerPageSchema.vue          |  35 ++++
 .../sidebar/OpenApiViewerSidebarEndpoints.vue |  48 +++++
 .../sidebar/OpenApiViewerSidebarResponses.vue |  20 +++
 .../sidebar/OpenApiViewerSidebarSchemas.vue   |  20 +++
 16 files changed, 579 insertions(+), 111 deletions(-)
 create mode 100644 src/components/OpenApi.vue
 create mode 100644 src/components/OpenApiViewerSecuritySchemas.vue
 create mode 100644 src/components/openApi/markdown.ts
 create mode 100644 src/components/openApi/openApi.ts
 create mode 100644 src/components/openApi/symbol.ts
 create mode 100644 src/components/page/OpenApiViewerPageEndpoint.vue
 create mode 100644 src/components/page/OpenApiViewerPageResponse.vue
 create mode 100644 src/components/page/OpenApiViewerPageSchema.vue
 create mode 100644 src/components/sidebar/OpenApiViewerSidebarEndpoints.vue
 create mode 100644 src/components/sidebar/OpenApiViewerSidebarResponses.vue
 create mode 100644 src/components/sidebar/OpenApiViewerSidebarSchemas.vue

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d973e2a8..b4ce5138 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
+      highlight.js:
+        specifier: ^11.8.0
+        version: 11.8.0
       terser:
         specifier: ^5.17.3
         version: 5.17.3
@@ -141,6 +144,9 @@ importers:
       lorem-ipsum:
         specifier: ^2.0.8
         version: 2.0.8
+      markdown-it:
+        specifier: ^13.0.1
+        version: 13.0.1
       mermaid:
         specifier: ^10.2.3
         version: 10.2.3
@@ -8833,6 +8839,11 @@ packages:
       tapable: 2.2.1
     dev: true
 
+  /entities@3.0.1:
+    resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
+    engines: {node: '>=0.12'}
+    dev: true
+
   /envinfo@7.10.0:
     resolution: {integrity: sha512-ZtUjZO6l5mwTHvc1L9+1q5p/R3wTopcfqMW8r5t8SJSKqeVI/LtajORwRFEKpEFuekjD0VBjwu1HMxL4UalIRw==}
     engines: {node: '>=4'}
@@ -9795,6 +9806,11 @@ packages:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: true
 
+  /highlight.js@11.8.0:
+    resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /history@4.10.1:
     resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
     dependencies:
@@ -11264,6 +11280,12 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
+  /linkify-it@4.0.1:
+    resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
   /liquid-json@0.3.1:
     resolution: {integrity: sha512-wUayTU8MS827Dam6MxgD72Ui+KOSF+u/eIqpatOtjnvgJ0+mnDq33uC2M7J0tPK+upe/DpUAuK4JUU89iBoNKQ==}
     engines: {node: '>=4'}
@@ -11529,6 +11551,17 @@ packages:
   /mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
+  /markdown-it@13.0.1:
+    resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 3.0.1
+      linkify-it: 4.0.1
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
   /markdown-table@2.0.0:
     resolution: {integrity: sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==}
     dependencies:
@@ -11714,7 +11747,6 @@ packages:
 
   /mdurl@1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
-    dev: false
 
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
@@ -14735,6 +14767,10 @@ packages:
     hasBin: true
     dev: true
 
+  /uc.micro@1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
   /ufo@1.1.2:
     resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
 
diff --git a/src/components/OpenAPIViewer.vue b/src/components/OpenAPIViewer.vue
index aedd9c0e..53b4fba6 100644
--- a/src/components/OpenAPIViewer.vue
+++ b/src/components/OpenAPIViewer.vue
@@ -68,6 +68,11 @@
       @apply bg-red;
     }
   }
+
+  p {
+    margin: 0;
+    line-height: 125%;
+  }
 }
 </style>
 
@@ -76,51 +81,19 @@
     <div class="flex">
 
       <div class="OpenAPIViewer_sidebar basis-300px shrink-0 text-sm">
-        <div v-for="(endpoints, path) in groupedPaths">
-          <ul class="no-list">
-            {{ endpoints[0].tags[0] }} ({{ endpoints.length }})
-            <li v-for="endpoint in endpoints">
-              <a href="#" class="OpenAPIViewer_link" @click.prevent="select(endpoint.method, endpoint.path)">
-                <span class="OpenAPIViewer_method" :class="`--${endpoint.method}`">{{ endpoint.method }}</span>
-                {{ endpoint.summary }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
+        <select v-model="documentModel" class="form-control">
+          <option v-for="(title, key) in documentOptions" :value="key">{{ key }}</option>
+        </select>
 
-      <div class="OpenAPIViewer_content grid gap-12" v-if="endpoint">
-        <!--<template v-for="(methods, path) in documentObject.paths">
-          <div class="grid gap-8">-->
-        <div data-v-for="(endpoint, method) in methods"
-             class="flex gap-8 relative items-start">
-          <div class="OpenAPIViewer_doc">
-            <h1>{{ endpoint.summary }}</h1>
-            <div>
-              <div class="c-any-card">
-                <span class="OpenAPIViewer_method" :class="`--${selectedMethod}`">{{ selectedMethod }}</span>
-                http://localhost:8000/api{{ selectedPath }}
-              </div>
-            </div>
-            <p data-endpoint-description>{{ endpoint.description }}</p>
-            <!--<div>Tags: {{ endpoint.tags }}</div>-->
-            <p data-endpoint-operationId>{{ endpoint.operationId }}</p>
-
-            <h2>Request</h2>
-            <OpenApiViewerEndpointParameters :endpoint="endpoint"/>
-
-            <h2>Response</h2>
-            <OpenApiViewerEndpointResponses :endpoint="endpoint" :document="documentObject"/>
-          </div>
-          <div class="OpenAPIViewer_playground basis-2/5 flex shrink-0 grow-0"
-               style="position: sticky; top: 100px;">
-            <OpenApiViewerEndpointPlayground :endpoint="endpoint" :document="documentObject"/>
-          </div>
-        </div>
-        <!--</div>
-      </template>-->
+        <OpenApiViewerSidebarResponses @select-response="selectResponse" />
+        <OpenApiViewerSidebarEndpoints @select-endpoint="select" />
+        <OpenApiViewerSidebarSchemas @select-schema="selectSchema" />
       </div>
 
+      <OpenApiViewerPageSchema v-if="schema" :schema="schema" />
+      <OpenApiViewerPageResponse v-else-if="response" :response="response" />
+      <OpenApiViewerPageEndpoint v-else-if="endpoint" :endpoint="endpoint" :path="selectedPath" :method="selectedMethod" />
+
     </div>
   </div>
 </template>
@@ -128,57 +101,102 @@
 <script setup lang="ts">
 import {OpenAPIV3} from "openapi-types";
 //import OASNormalize from 'oas-normalize';
-import jsonApi from './storeapi.json'
-import {ref, computed} from "vue";
+import storeApi from './storeapi.json'
+import adminApi from './adminapi.json'
+import {ref, computed, watch, provide} from "vue";
+import {Document} from "./openApi/openApi";
+
+const documentModel = ref('storeApi');
+const documentOptions = {
+  storeApi,
+  adminApi,
+};
+
+import OpenApiViewerPageEndpoint from "./page/OpenApiViewerPageEndpoint.vue";
+import OpenApiViewerPageSchema from "./page/OpenApiViewerPageSchema.vue";
+import OpenApiViewerPageResponse from "./page/OpenApiViewerPageResponse.vue";
+
+import OpenApiViewerSidebarEndpoints from "./sidebar/OpenApiViewerSidebarEndpoints.vue";
+import OpenApiViewerSidebarSchemas from "./sidebar/OpenApiViewerSidebarSchemas.vue";
+import OpenApiViewerSidebarResponses from "./sidebar/OpenApiViewerSidebarResponses.vue";
 
-import OpenApiViewerEndpointParameters from "./OpenApiViewerEndpointParameters.vue";
-import OpenApiViewerEndpointResponses from "./OpenApiViewerEndpointResponses.vue";
-import OpenApiViewerEndpointPlayground from "./OpenApiViewerEndpointPlayground.vue";
+import {documentObjectSymbol} from "./openApi/symbol";
 
 //const oas = new OASNormalize(jsonApi);
 
-const documentObject = jsonApi;//await oas.deref() as OpenAPIV3.Document;
+const documentObject = ref(null);//await oas.deref() as OpenAPIV3.Document;
 
 const selectedPath = ref(null);
 const selectedMethod = ref(null);
+const selectedSchema = ref(null);
+const selectedResponse = ref(null);
 
-const select = (method, path) => {
+const selectedMode = ref(null);
+
+const deselect = () => {
+  selectedMode.value = null;
+  selectedPath.value = null;
+  selectedMethod.value = null;
+  selectedSchema.value = null;
+  selectedResponse.value = null;
+}
+
+const select = ({method, path}) => {
+  deselect();
+  selectedMode.value = 'path';
   selectedPath.value = path;
   selectedMethod.value = method;
 }
 
+const selectSchema = (key) => {
+  deselect();
+  selectedMode.value = 'schema';
+  selectedSchema.value = key;
+}
+
+const selectResponse = ({code}) => {
+  deselect();
+  selectedMode.value = 'response';
+  selectedResponse.value = code;
+}
+
+watch(
+    documentModel,
+    () => {
+      deselect();
+      documentObject.value = Document.make(documentOptions[documentModel.value]);
+    },
+    {
+      immediate: true,
+    }
+);
+
+provide(
+    documentObjectSymbol,
+    documentObject
+);
+
 const endpoint = computed(() => {
-  if (!selectedPath.value || !selectedMethod.value) {
+  if (!documentObject.value || !selectedPath.value || !selectedMethod.value) {
+    return null;
+  }
+
+  return documentObject.value.paths[selectedPath.value][selectedMethod.value];
+})
+
+const schema = computed(() => {
+  if (!documentObject.value || !selectedSchema.value) {
     return null;
   }
 
-  return documentObject.paths[selectedPath.value][selectedMethod.value];
+  return documentObject.value.components.schemas[selectedSchema.value];
 })
 
-const groupedPaths = computed(() => {
-  return Object.entries(documentObject.paths)
-      .reduce((reduced, [path, endpoints]) => {
-        const partialPath = path.split('/')
-            .map(part => part.startsWith('{') ? '{}' : part)
-            .filter(part => part !== '{}')
-            .join('/');
-
-        // add the method
-        const mappedEndpoints = Object.entries(endpoints)
-            .map(([httpMethod, method]) => {
-              method.path = path;
-              method.method = httpMethod;
-              return method;
-            })
-
-        console.log(partialPath);
-        if (!reduced[partialPath]) {
-          reduced[partialPath] = [];
-        }
-
-        reduced[partialPath].push(...mappedEndpoints);
-
-        return reduced;
-      }, {})
+const response = computed(() => {
+  if (!documentObject.value || !selectedResponse.value) {
+    return null;
+  }
+
+  return documentObject.value.components.responses[selectedResponse.value];
 })
 </script>
\ No newline at end of file
diff --git a/src/components/OpenApi.vue b/src/components/OpenApi.vue
new file mode 100644
index 00000000..d9ed5d9d
--- /dev/null
+++ b/src/components/OpenApi.vue
@@ -0,0 +1,18 @@
+<template>
+  Displaying {{ $props.api }}-api, {{ $props.endpoint }}, {{ $props.method }}, {{ $props.scheme }}
+  <!--
+  <OpenApi api="store" endpoint="/api/script/{hook}" method="post" />
+  <OpenApi api="admin" scheme="App" />
+  -->
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  api: {
+    required: true,
+  },
+  endpoint: {},
+  method: {},
+  scheme: {},
+})
+</script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerEndpointParameters.vue b/src/components/OpenApiViewerEndpointParameters.vue
index 5d7a099a..43d84cac 100644
--- a/src/components/OpenApiViewerEndpointParameters.vue
+++ b/src/components/OpenApiViewerEndpointParameters.vue
@@ -2,7 +2,7 @@
   <div data-endpoint-parameters class="grid gap-2">
     <!-- group parameters by "in" -->
     <div v-for="(parameters, group) in getGroupedParameters(endpoint)">
-      <h2>{{ group }} parameters</h2>
+      <h2>{{ niceGroupName(group) }}</h2>
       <div class="grid gap-2">
         <div v-for="parameter in parameters" class="grid gap-2">
           <div class="flex gap-2">
@@ -28,7 +28,6 @@ const props = defineProps({
 })
 
 const getGroupedParameters = (endpoint: OpenAPIV3.PathItemObject) => {
-  console.log(endpoint);
   const groups = {
     header: [],
     query: [],
@@ -55,4 +54,11 @@ const getGroupedParameters = (endpoint: OpenAPIV3.PathItemObject) => {
 
   return groups;
 }
+
+const niceGroupName = group => {
+  return {
+    query: 'Query Parameters',
+    path: 'Path Parameters',
+  }[group] || `${group} Parameters`;
+}
 </script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerEndpointResponses.vue b/src/components/OpenApiViewerEndpointResponses.vue
index f9c9deb3..5409ca83 100644
--- a/src/components/OpenApiViewerEndpointResponses.vue
+++ b/src/components/OpenApiViewerEndpointResponses.vue
@@ -2,11 +2,12 @@
   <div data-endpoint-responses>
     <div v-for="(response, code) in endpoint.responses">
       <div>
-        <h5><span class="OpenAPIViewer_response-code" :class="`--${code[0]} --${code}`">{{ code }}</span>
+        <h5>
+          <span class="OpenAPIViewer_response-code" :class="`--${code[0]} --${code}`">{{ code }}</span>
         </h5>
       </div>
 
-      <OpenApiViewerMagic :data="response" :document="document" />
+      <OpenApiViewerMagic :data="response" />
     </div>
   </div>
 </template>
@@ -14,6 +15,8 @@
 <script setup lang="ts">
 import OpenApiViewerMagic from "./OpenApiViewerMagic.vue";
 import {OpenAPIV3} from "openapi-types";
+import {inject} from "vue";
+import {documentObjectSymbol} from "./openApi/symbol";
 
 // the most probable approach here is to use js/ts to map the tree and de-ref the document
 // then re-ref everything and make every object expandable and reffed
@@ -21,10 +24,9 @@ import {OpenAPIV3} from "openapi-types";
 const props = defineProps({
   endpoint: {
     type: Object as OpenAPIV3.PathItemObject
-  },
-  document: {
-    type: Object as OpenAPIV3.Document,
   }
 })
 
+
+const document = inject(documentObjectSymbol);
 </script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerMagic.vue b/src/components/OpenApiViewerMagic.vue
index 00878da5..ea4998c3 100644
--- a/src/components/OpenApiViewerMagic.vue
+++ b/src/components/OpenApiViewerMagic.vue
@@ -1,78 +1,108 @@
+<style lang="scss">
+.OpenApiProp {
+  &_title {
+    @apply font-bold;
+  }
+  &_type {
+    @apply ml-2;
+     color: var(--sw-c-gray-dark-100);
+  }
+  &_required {
+    @apply ml-2 text-[var(--sw-c-pink-400)];
+  }
+}
+.OpenApiProps_table,
+.OpenApiProp_row, {
+  border-collapse: collapse;
+  border-bottom: 1px solid var(--sw-c-gray-dark-100);
+}
+</style>
+
 <template>
   <template v-if="depth > 5">
-    -- show more -- <span class="hidden">{{ data }}</span>
+    <a href="#" v-if="!showMore" @click.prevent="showMore = true">
+      -- show more -- <span class="hidden">{{ data }}</span>
+    </a>
+    <OpenApiViewerMagic v-else
+                        :data="data" />
   </template>
   <template v-else>
-    <span class="hidden">{{ Object.keys(data) }}</span>
 
-    <span v-if="data.required" data-required>*</span>
-    <span v-if="data.type" class="italic">{{ data.type }}</span>
+    <div v-if="data.properties" class="OpenApiProps_table pl-4 grid" data-properties>
+      <div v-for="(property, key) in data.properties" class="OpenApiProp_row">
+
+        <span class="OpenApiProp_title">{{ key }}</span>
+        <span v-if="data.type" class="OpenApiProp_type">{{ data.type }}</span>
+        <span v-if="data.required" class="OpenApiProp_required">required</span>
 
-    <div v-if="data.properties" class="pl-4 grid" data-properties>
-      <div v-for="(property, key) in data.properties">
-        <span>{{ key }}</span>
         <OpenApiViewerMagic v-if="key === '$ref'"
                             :data="getRef(property)"
-                            :document="document"
                             :depth="depth + 1"/>
         <OpenApiViewerMagic v-else-if="property && typeof property === 'object' && '$ref' in property"
                             :data="getRef(property['$ref'])"
-                            :document="document"
                             :depth="depth + 1"/>
-        <OpenApiViewerMagic v-else :data="property"
-                            :document="document"
+        <OpenApiViewerMagic v-else
+                            :data="property"
                             :depth="depth + 1"/>
       </div>
     </div>
 
-    <div v-if="data.additionalProperties" class="pl-4 grid" data-additional-properties>
+    <div v-if="data.additionalProperties" class="OpenApiProps_table pl-4 grid" data-additional-properties>
       <div v-for="(property, key) in data.additionalProperties">
         <span>{{ key }}</span>
         <OpenApiViewerMagic v-if="key === '$ref'"
                             :data="getRef(property)"
-                            :document="document"
                             :depth="depth + 1"/>
         <OpenApiViewerMagic v-else-if="property && typeof property === 'object' && '$ref' in property"
                             :data="getRef(property['$ref'])"
-                            :document="document"
                             :depth="depth + 1"/>
         <OpenApiViewerMagic v-else :data="property"
-                            :document="document"
                             :depth="depth + 1"/>
       </div>
     </div>
 
     <template v-if="'$ref' in data">
       {{ data['$ref'] }}
-      <OpenApiViewerMagic :data="getRef(data['$ref'])" :document="document"
+      <OpenApiViewerMagic :data="getRef(data['$ref'])"
                           :depth="depth + 1"/>
     </template>
 
     <div v-if="'schema' in data" data-schema>
-      <OpenApiViewerMagic :data="data.schema" :document="document"
+      <OpenApiViewerMagic :data="data.schema"
                           :depth="depth + 1"/>
     </div>
 
-    <p v-if="data.example" data-example>{{ data.example }}</p>
+    <div v-if="data.example" data-example v-html="renderedExample"></div>
 
     <div v-if="'allOf' in data" data-all-of>
       All of:
-      <OpenApiViewerMagic v-for="single in data.allOf" :data="single" :document="document"
+      <OpenApiViewerMagic v-for="single in data.allOf"
+                          :data="single"
                           :depth="depth + 1"/>
     </div>
 
     <div v-if="'oneOf' in data" data-one-of>
       One of:
-      <OpenApiViewerMagic v-for="single in data.oneOf" :data="single" :document="document"
+      <OpenApiViewerMagic v-for="single in data.oneOf"
+                          :data="single"
+                          :depth="depth + 1"/>
+    </div>
+
+    <div v-if="'anyOf' in data" data-any-of>
+      Any of:
+      <OpenApiViewerMagic v-for="single in data.anyOf"
+                          :data="single"
                           :depth="depth + 1"/>
     </div>
 
-    <p v-if="data.description" data-description>{{ data.description }}</p>
+    <div v-if="data.description"
+         data-description
+         v-html="MarkdownRenderer.render(data.description)"></div>
 
     <div class="grid gap-2" v-if="data.content" data-content>
       <div v-for="(subschema, type) in data.content">
         <h6>{{ type }}</h6>
-        <OpenApiViewerMagic :data="subschema" :document="document"
+        <OpenApiViewerMagic :data="subschema"
                             :depth="depth + 1"/>
       </div>
     </div>
@@ -86,17 +116,19 @@
 <script setup lang="ts">
 //import OpenApiViewerMagic from "./OpenApiViewerMagic.vue";
 import OpenApiViewerUnref from "./OpenApiViewerUnref.vue";
-import {computed} from "vue";
+import {computed, inject, ref} from "vue";
 import {OpenAPIV3} from "openapi-types";
+import MarkdownIt from 'markdown-it'
+import {documentObjectSymbol} from "./openApi/symbol";
+import {render} from "./openApi/markdown";
+
+const MarkdownRenderer = MarkdownIt({});
 
 const props = defineProps({
   data: {
     type: Object,
     required: true,
   },
-  document: {
-    type: Object as OpenAPIV3.Document,
-  },
   depth: {
     default: 0,
   }
@@ -108,9 +140,20 @@ const getRef = computed(() => (ref) => {
   }
   if (ref.startsWith('#/components/')) {
     const [hash, components, responses, code] = ref.split('/');
-    return props.document[components][responses][code] || {};
+    console.log(hash, components, responses, code);
+    return document.value[components][responses][code] || {};
   }
   console.log(ref);
   return {};//ref;
 })
+
+const showMore = ref(false);
+
+const document = inject(documentObjectSymbol);
+
+const renderedExample = computed(async () => {
+  return await render(JSON.stringify(`\`\`\`
+${JSON.stringify(props.data.example)}
+\`\`\``))
+})
 </script>
\ No newline at end of file
diff --git a/src/components/OpenApiViewerSecuritySchemas.vue b/src/components/OpenApiViewerSecuritySchemas.vue
new file mode 100644
index 00000000..1a6d61d8
--- /dev/null
+++ b/src/components/OpenApiViewerSecuritySchemas.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="OpenApiViewerSecuritySchemas">
+
+    <div v-for="(schema, key) in document.components.securitySchemes"
+    class="OpenApiViewerSecuritySchema">
+      <div class="font-medium">{{ schema.title }}</div>
+
+      <div>{{ schema.description }}</div>
+
+      <div v-if="schema.in === 'header'">
+        In header {{ schema.name }}
+      </div>
+      <div v-else class="hidden">No schema.in: {{ schema }}</div>
+
+      <div v-for="(flow, type) in schema.flows">
+        <b>{{ flow.title }}</b><br /><br />
+        Token URL: <a :href="flow.tokenUrl">{{ flow.tokenUrl }}</a><br /><br />
+        Scopes:
+        <ul>
+          <li v-for="(scope, scopeKey) in flow.scopes">
+            <code>{{ scopeKey }}</code> - {{ scope }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+import {documentObjectSymbol} from "./openApi/symbol";
+
+const document = inject(documentObjectSymbol);
+</script>
+
+<style lang="scss">
+.OpenApiViewerSecuritySchemas {
+  @apply border border-black border-solid p-4;
+  border-radius: 1rem;
+}
+.OpenApiViewerSecuritySchema {
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/openApi/markdown.ts b/src/components/openApi/markdown.ts
new file mode 100644
index 00000000..c2811434
--- /dev/null
+++ b/src/components/openApi/markdown.ts
@@ -0,0 +1,30 @@
+import MarkdownIt from "markdown-it";
+import hljs from 'highlight.js';
+import * as shiki from "shiki";
+
+export const render = async (value) => {
+    if (!value) {
+        return '';
+    }
+
+    const shikiRenderer = await shiki.getHighlighter({theme: 'nord', langs: ['js', 'json', 'php']});
+
+    const MarkdownRenderer = MarkdownIt({
+        highlight: function (str, lang) {
+
+            // use shiki renderer
+            return shikiRenderer.codeToHtml(str, {lang});
+
+            return '';
+            if (lang && hljs.getLanguage(lang)) {
+                try {
+                    return hljs.highlight(str, { language: lang }).value;
+                } catch (__) {}
+            }
+
+            return ''; // use external default escaping
+        }
+    });
+
+    return MarkdownRenderer.render(value);
+};
\ No newline at end of file
diff --git a/src/components/openApi/openApi.ts b/src/components/openApi/openApi.ts
new file mode 100644
index 00000000..ad633b6b
--- /dev/null
+++ b/src/components/openApi/openApi.ts
@@ -0,0 +1,69 @@
+export class Document {
+    constructor(document) {
+        Object.keys(document).forEach((key) => this[key] = document[key]);
+
+        this.components.schemas = Object.keys(this.components.schemas || {})
+            .reduce((reduced, key) => {
+                reduced[key] = this.components.schemas[key];
+                reduced[key].key = key;
+                return reduced;
+            }, {});
+
+        this.components.responses = Object.keys(this.components.responses || {})
+            .reduce((reduced, key) => {
+                reduced[key] = this.components.responses[key];
+                reduced[key].key = key;
+                return reduced;
+            }, {});
+
+        this.components.securitySchemes = Object.keys(this.components.securitySchemes || {})
+            .reduce((reduced, key) => {
+                reduced[key] = this.components.securitySchemes[key];
+                reduced[key].key = key;
+
+                reduced[key].flows = Object.keys(reduced[key].flows || {})
+                    .map(flowKey => {
+                        const flow = reduced[key].flows[flowKey];
+                        flow.key = flowKey;
+                        return new Flow(flow);
+                    })
+
+                reduced[key] = new SecurityScheme(reduced[key]);
+
+                return reduced;
+            }, {});
+    }
+
+    static make(document) {
+        return new Document(document);
+    }
+}
+
+export class SecurityScheme {
+    key: string;
+
+    constructor(securityScheme) {
+        Object.keys(securityScheme).forEach((key) => this[key] = securityScheme[key]);
+    }
+
+    get title() {
+        return {
+            oAuth: 'Security: OAuth 2.0',
+        }[this.key] || this.key;
+    }
+}
+
+export class Flow {
+    key: string;
+
+    constructor(flow) {
+        Object.keys(flow).forEach((key) => this[key] = flow[key]);
+    }
+
+    get title() {
+        return {
+            password: 'Password OAuth Flow',
+            clientCredentials: 'Client Credentials OAuth Flow',
+        }[this.key] || this.key;
+    }
+}
\ No newline at end of file
diff --git a/src/components/openApi/symbol.ts b/src/components/openApi/symbol.ts
new file mode 100644
index 00000000..30891f0e
--- /dev/null
+++ b/src/components/openApi/symbol.ts
@@ -0,0 +1 @@
+export const documentObjectSymbol = Symbol('documentObjectSymbol');
\ No newline at end of file
diff --git a/src/components/page/OpenApiViewerPageEndpoint.vue b/src/components/page/OpenApiViewerPageEndpoint.vue
new file mode 100644
index 00000000..6b50db27
--- /dev/null
+++ b/src/components/page/OpenApiViewerPageEndpoint.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="OpenAPIViewer_content grid gap-12">
+    <div data-v-for="(endpoint, method) in methods"
+         class="flex gap-8 relative items-start">
+      <div class="OpenAPIViewer_doc text-xs">
+        <h1>{{ endpoint.summary }}</h1>
+
+        <div>
+          <div class="c-any-card">
+            <span class="OpenAPIViewer_method" :class="`--${method}`">{{ method }}</span>
+            http://localhost:8000/api{{ path }}
+          </div>
+        </div>
+
+        <div data-endpoint-description v-if="endpoint.description"
+             v-html="render(endpoint.description)"></div>
+
+        <!--<div>Tags: {{ endpoint.tags }}</div>-->
+        <p data-endpoint-operationId>{{ endpoint.operationId }}</p>
+
+        <h2>Request</h2>
+
+        <OpenApiViewerSecuritySchemas />
+
+        <OpenApiViewerEndpointParameters :endpoint="endpoint"/>
+
+        <h2>Response</h2>
+        <OpenApiViewerEndpointResponses :endpoint="endpoint" :document="documentObject"/>
+      </div>
+      <div class="OpenAPIViewer_playground basis-2/5 flex shrink-0 grow-0"
+           style="position: sticky; top: 100px;">
+        <OpenApiViewerEndpointPlayground :endpoint="endpoint" :document="documentObject"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {inject} from "vue";
+import {render} from "../openApi/markdown";
+import OpenApiViewerEndpointPlayground from "../OpenApiViewerEndpointPlayground.vue";
+import OpenApiViewerEndpointParameters from "../OpenApiViewerEndpointParameters.vue";
+import OpenApiViewerEndpointResponses from "../OpenApiViewerEndpointResponses.vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+import OpenApiViewerSecuritySchemas from "../OpenApiViewerSecuritySchemas.vue";
+
+const props = defineProps({
+  endpoint: {},
+  path: {},
+  method: {}
+});
+
+const documentObject = inject(documentObjectSymbol)
+</script>
\ No newline at end of file
diff --git a/src/components/page/OpenApiViewerPageResponse.vue b/src/components/page/OpenApiViewerPageResponse.vue
new file mode 100644
index 00000000..811e170b
--- /dev/null
+++ b/src/components/page/OpenApiViewerPageResponse.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="OpenApiViewerPageResponse">
+    <h1>{{ response.key }} {{ response.description }}</h1>
+    {{ Object.keys(response) }}
+
+    <div v-if="'content' in response">
+      <OpenApiViewerEndpointResponses :endpoint="{responses: response.content}" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+import OpenApiViewerEndpointResponses from "../OpenApiViewerEndpointResponses.vue";
+import OpenApiViewerMagic from "../OpenApiViewerMagic.vue";
+
+const documentObject = inject(documentObjectSymbol);
+
+const props = defineProps({
+  response: {},
+})
+</script>
\ No newline at end of file
diff --git a/src/components/page/OpenApiViewerPageSchema.vue b/src/components/page/OpenApiViewerPageSchema.vue
new file mode 100644
index 00000000..000c9500
--- /dev/null
+++ b/src/components/page/OpenApiViewerPageSchema.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="OpenApiViewerPageSchema">
+    <h1>{{ schema.key }} ({{ schema.type }})</h1>
+    <div v-html="render(schema.description)"></div>
+
+    <!--AllOf: {{ schema.allOf }}<br />
+    OneOf: {{ schema.oneOf }}<br />
+    AnyOf: {{ schema.anyOf }}<br />
+
+    Required: {{ schema.required }}<br />
+
+    Properties: {{ schema.properties }}<br />
+    AdditionalProperties: {{ schema.additionalProperties }}<br />
+
+    Items: {{ schema.items }}<br />
+    UniqueItems: {{ schema.uniqueItems }}<br />-->
+
+    <div class="text-xs">
+      <OpenApiViewerMagic :data="schema" :document="documentObject"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OpenApiViewerMagic from "../OpenApiViewerMagic.vue";
+import {render} from "../openApi/markdown";
+import {inject} from "vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+
+const documentObject = inject(documentObjectSymbol);
+
+const props = defineProps({
+  schema: {},
+})
+</script>
\ No newline at end of file
diff --git a/src/components/sidebar/OpenApiViewerSidebarEndpoints.vue b/src/components/sidebar/OpenApiViewerSidebarEndpoints.vue
new file mode 100644
index 00000000..c01184b5
--- /dev/null
+++ b/src/components/sidebar/OpenApiViewerSidebarEndpoints.vue
@@ -0,0 +1,48 @@
+<template>
+
+  <b>Endpoints</b>
+  <div v-for="(endpoints, path) in groupedPaths">
+    <ul class="no-list">
+      {{ endpoints[0].tags[0] }} ({{ endpoints.length }})
+      <li v-for="endpoint in endpoints">
+        <a href="#" class="OpenAPIViewer_link" @click.prevent="$emit('select-endpoint', {method: endpoint.method, path: endpoint.path})">
+          <span class="OpenAPIViewer_method" :class="`--${endpoint.method}`">{{ endpoint.method }}</span>
+          {{ endpoint.summary }}
+        </a>
+      </li>
+    </ul>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import {computed, inject} from "vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+
+const $emit = defineEmits(['select-schema']);
+const documentObject = inject(documentObjectSymbol);
+
+const groupedPaths = computed(() => Object.entries(documentObject.value?.paths || {})
+    .reduce((reduced, [path, endpoints]) => {
+      const partialPath = path.split('/')
+          .map(part => part.startsWith('{') ? '{}' : part)
+          .filter(part => part !== '{}')
+          .join('/');
+
+      // add the method
+      const mappedEndpoints = Object.entries(endpoints)
+          .map(([httpMethod, method]) => {
+            method.path = path;
+            method.method = httpMethod;
+            return method;
+          })
+
+      if (!reduced[partialPath]) {
+        reduced[partialPath] = [];
+      }
+
+      reduced[partialPath].push(...mappedEndpoints);
+
+      return reduced;
+    }, {}))
+</script>
\ No newline at end of file
diff --git a/src/components/sidebar/OpenApiViewerSidebarResponses.vue b/src/components/sidebar/OpenApiViewerSidebarResponses.vue
new file mode 100644
index 00000000..2dbe3a2b
--- /dev/null
+++ b/src/components/sidebar/OpenApiViewerSidebarResponses.vue
@@ -0,0 +1,20 @@
+<template>
+
+  <b>Responses</b>
+  <ul class="no-list">
+    <li v-for="(response, code) in documentObject.components.responses">
+      <a href="#" class="OpenAPIViewer_link" @click.prevent="$emit('select-response', {code})">
+        {{ code }} {{ response.description }}
+      </a>
+    </li>
+  </ul>
+
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+
+const $emit = defineEmits(['select-schema']);
+const documentObject = inject(documentObjectSymbol);
+</script>
\ No newline at end of file
diff --git a/src/components/sidebar/OpenApiViewerSidebarSchemas.vue b/src/components/sidebar/OpenApiViewerSidebarSchemas.vue
new file mode 100644
index 00000000..8e72d7ee
--- /dev/null
+++ b/src/components/sidebar/OpenApiViewerSidebarSchemas.vue
@@ -0,0 +1,20 @@
+<template>
+
+  <b>Schemas</b>
+  <ul class="no-list">
+    <li v-for="(schema, key) in documentObject.components.schemas">
+      <a href="#" class="OpenAPIViewer_link" @click.prevent="$emit('select-schema', key)">
+        {{ key }}
+      </a>
+    </li>
+  </ul>
+
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+import {documentObjectSymbol} from "../openApi/symbol";
+
+const $emit = defineEmits(['select-schema']);
+const documentObject = inject(documentObjectSymbol);
+</script>
\ No newline at end of file

From 4da62457ec4ccdcbf21fb2df82e5365ac8b7d1c2 Mon Sep 17 00:00:00 2001
From: Bojan Rajh <b.rajh@shopware.com>
Date: Thu, 3 Aug 2023 17:04:50 +0200
Subject: [PATCH 3/3] Generate API pages (standard routing, dynamic routes)

---
 .vitepress/config.ts                          |  9 +++++-
 .vitepress/theme/index.ts                     |  4 +++
 src/[api]-api.md                              |  3 ++
 src/[api]-api.paths.js                        | 14 +++++++++
 src/api/admin/endpoint/[method]-[path].md     |  9 ++++++
 .../admin/endpoint/[method]-[path].paths.js   |  7 +++++
 src/api/admin/scheme/[slug].md                |  3 ++
 src/api/admin/scheme/[slug].paths.js          | 14 +++++++++
 src/api/helpers.ts                            | 30 +++++++++++++++++++
 src/api/store/endpoint/[slug].md              |  3 ++
 src/api/store/endpoint/[slug].paths.js        | 14 +++++++++
 src/api/store/scheme/[slug].md                |  3 ++
 src/api/store/scheme/[slug].paths.js          | 14 +++++++++
 13 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 src/[api]-api.md
 create mode 100644 src/[api]-api.paths.js
 create mode 100644 src/api/admin/endpoint/[method]-[path].md
 create mode 100644 src/api/admin/endpoint/[method]-[path].paths.js
 create mode 100644 src/api/admin/scheme/[slug].md
 create mode 100644 src/api/admin/scheme/[slug].paths.js
 create mode 100644 src/api/helpers.ts
 create mode 100644 src/api/store/endpoint/[slug].md
 create mode 100644 src/api/store/endpoint/[slug].paths.js
 create mode 100644 src/api/store/scheme/[slug].md
 create mode 100644 src/api/store/scheme/[slug].paths.js

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index befcf5f0..cf9e81df 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -20,6 +20,8 @@ import {
   SwagColorCodingConfig
 } from "../../developer-documentation-vitepress/src/shopware/config";
 
+import {navigation as apisNavigation} from "./navigation/apis";
+
 const sections: SwagSectionsConfig[] = [
   {
     title: 'Frontends',
@@ -298,7 +300,12 @@ export default defineConfigWithTheme<ThemeConfig>({
   ignoreDeadLinks: true,
 
   themeConfig: {
-    ...navigation, // add sidebar and nav config
+    sidebar: {
+      ...navigation.sidebar,
+      ...apisNavigation,
+    },
+    nav: navigation.nav,
+    // ...navigation, // add sidebar and nav config
 
     algolia: {
       indexName: "beta-developer-shopware",
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 6b136ec0..6001b565 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,5 +1,6 @@
 import {SWAGTheme} from "vitepress-shopware-docs";
 import SwagRadialBg from "../../src/components/SwagRadialBg.vue";
+import OpenApi from "../../src/components/OpenApi.vue";
 
 export default {
     ...SWAGTheme({
@@ -7,6 +8,9 @@ export default {
             'layout-bottom': [
                 SwagRadialBg,
             ]
+        },
+        enhanceApp({app}) {
+            app.component('OpenApi', OpenApi);
         }
     }),
 }
diff --git a/src/[api]-api.md b/src/[api]-api.md
new file mode 100644
index 00000000..3f519733
--- /dev/null
+++ b/src/[api]-api.md
@@ -0,0 +1,3 @@
+# {{ $params.api }}
+
+<!-- @content -->
\ No newline at end of file
diff --git a/src/[api]-api.paths.js b/src/[api]-api.paths.js
new file mode 100644
index 00000000..2a865e5d
--- /dev/null
+++ b/src/[api]-api.paths.js
@@ -0,0 +1,14 @@
+export default {
+    paths() {
+        return [
+            {
+                params: {api: 'store'},
+                content: 'This is content',
+            },
+            {
+                params: {api: 'admin'},
+                content: 'This is custom content',
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/api/admin/endpoint/[method]-[path].md b/src/api/admin/endpoint/[method]-[path].md
new file mode 100644
index 00000000..522af4d0
--- /dev/null
+++ b/src/api/admin/endpoint/[method]-[path].md
@@ -0,0 +1,9 @@
+# {{ $params.slug }}
+
+<OpenApi api="admin" :endpoint="$params.path" :method="$params.method" />
+
+Test: {{ $params.slug }}
+
+{{ $params }}
+
+<!-- @content -->
\ No newline at end of file
diff --git a/src/api/admin/endpoint/[method]-[path].paths.js b/src/api/admin/endpoint/[method]-[path].paths.js
new file mode 100644
index 00000000..60653fde
--- /dev/null
+++ b/src/api/admin/endpoint/[method]-[path].paths.js
@@ -0,0 +1,7 @@
+import {makePaths} from "../../helpers";
+
+export default {
+    paths() {
+        return makePaths('admin');
+    }
+}
\ No newline at end of file
diff --git a/src/api/admin/scheme/[slug].md b/src/api/admin/scheme/[slug].md
new file mode 100644
index 00000000..3f519733
--- /dev/null
+++ b/src/api/admin/scheme/[slug].md
@@ -0,0 +1,3 @@
+# {{ $params.api }}
+
+<!-- @content -->
\ No newline at end of file
diff --git a/src/api/admin/scheme/[slug].paths.js b/src/api/admin/scheme/[slug].paths.js
new file mode 100644
index 00000000..de34a51d
--- /dev/null
+++ b/src/api/admin/scheme/[slug].paths.js
@@ -0,0 +1,14 @@
+export default {
+    paths() {
+        return [
+            {
+                params: {slug: 'store'},
+                content: 'This is content',
+            },
+            {
+                params: {slug: 'admin'},
+                content: 'This is custom content',
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/api/helpers.ts b/src/api/helpers.ts
new file mode 100644
index 00000000..bd123140
--- /dev/null
+++ b/src/api/helpers.ts
@@ -0,0 +1,30 @@
+import adminApi from "../components/adminapi.json";
+import storeApi from "../components/storeapi.json";
+
+export const makePaths = (api: string) => {
+    const data = {
+        admin: adminApi,
+        store: storeApi,
+    }[api] || null;
+
+    if (!data) {
+        throw "Incorrect api";
+    }
+
+    return Object.keys(adminApi.paths)
+        .reduce((reduced, path) => {
+            return Object.keys(adminApi.paths[path])
+                .reduce((reduced, method) => {
+                    reduced.push({
+                        path: path.split('/')
+                            .splice(1)
+                            .join('-')
+                            .replace('{', '')
+                            .replace('}', ''),
+                        method: method.toLowerCase(),
+                    });
+                    return reduced;
+                }, reduced);
+        }, [])
+        .map(route => ({params: {...route,}, content: ''}))
+}
\ No newline at end of file
diff --git a/src/api/store/endpoint/[slug].md b/src/api/store/endpoint/[slug].md
new file mode 100644
index 00000000..3f519733
--- /dev/null
+++ b/src/api/store/endpoint/[slug].md
@@ -0,0 +1,3 @@
+# {{ $params.api }}
+
+<!-- @content -->
\ No newline at end of file
diff --git a/src/api/store/endpoint/[slug].paths.js b/src/api/store/endpoint/[slug].paths.js
new file mode 100644
index 00000000..de34a51d
--- /dev/null
+++ b/src/api/store/endpoint/[slug].paths.js
@@ -0,0 +1,14 @@
+export default {
+    paths() {
+        return [
+            {
+                params: {slug: 'store'},
+                content: 'This is content',
+            },
+            {
+                params: {slug: 'admin'},
+                content: 'This is custom content',
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/api/store/scheme/[slug].md b/src/api/store/scheme/[slug].md
new file mode 100644
index 00000000..3f519733
--- /dev/null
+++ b/src/api/store/scheme/[slug].md
@@ -0,0 +1,3 @@
+# {{ $params.api }}
+
+<!-- @content -->
\ No newline at end of file
diff --git a/src/api/store/scheme/[slug].paths.js b/src/api/store/scheme/[slug].paths.js
new file mode 100644
index 00000000..de34a51d
--- /dev/null
+++ b/src/api/store/scheme/[slug].paths.js
@@ -0,0 +1,14 @@
+export default {
+    paths() {
+        return [
+            {
+                params: {slug: 'store'},
+                content: 'This is content',
+            },
+            {
+                params: {slug: 'admin'},
+                content: 'This is custom content',
+            }
+        ]
+    }
+}
\ No newline at end of file