feat(open-api): add top-level security information

INT-407

src/.vuepress/plugins/openApi.ts

@@ -31,7 +31,13 @@ Version ${spec.info.version}
 
 ${spec.info.description ?? ''}
 
-${renderChapters(spec)}
+## Authorization
+<OpenApiSecurityRequirements
+:security='${JSON.stringify(spec.security ?? [])}'
+:security-schemes='${JSON.stringify(spec.components?.securitySchemes ?? [])}' />
+
+## Endpoints
+${renderPaths(spec)}
                   `,
           }),
         );
@@ -40,15 +46,15 @@ ${renderChapters(spec)}
   },
 });
 
-function renderChapters(document: OpenApiType.Document): string {
+function renderPaths(document: OpenApiType.Document): string {
   const resolvedDocument = resolveRefs(document);
 
   let chapters = '';
 
   if (resolvedDocument.paths) {
     for (const [path, pathObj] of Object.entries(resolvedDocument.paths)) {
       chapters += `
-## ${path}
+### ${path}
 \n
 <OpenApiPath :path='${JSON.stringify(pathObj)}' title='${path}' />
     `;

src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="resolvedSchemes?.length">
+    <ul>
+      <OpenApiSecurityScheme
+        v-for="(securityItem, index) in resolvedSchemes"
+        :key="index"
+        :scheme="resolveRequirementToScheme(securityItem)" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {OpenApiSecurityScheme} from '@mptheme/client/components/global';
+
+const props = defineProps<{
+  security: OpenApiType.SecurityRequirementObject[];
+  securitySchemes: Record<string, OpenApiType.SecuritySchemeObject>;
+}>();
+
+const resolvedSchemes = computed(() => {
+  const resolved: OpenApiType.SecurityRequirementObject[] = [];
+
+  for (const requirement of props.security) {
+    const scheme = resolveRequirementToScheme(requirement);
+
+    if (scheme) {
+      resolved.push(requirement);
+    }
+  }
+
+  return resolved;
+});
+
+function resolveRequirementToScheme(
+  requirement: OpenApiType.SecurityRequirementObject,
+): OpenApiType.SecuritySchemeObject | undefined {
+  // Find the securityScheme with the same key as the securityRequirement
+  return props.securitySchemes[Object.keys(requirement)[0]];
+}
+</script>

src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue

@@ -0,0 +1,18 @@
+<template>
+  <li v-if="scheme.type === 'apiKey'">
+    <strong>API Key</strong><br />
+    <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.in }}: {{ scheme.name }} </code>
+  </li>
+  <li v-else-if="scheme.type === 'http'">
+    <strong>HTTP</strong><br />
+    <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.scheme }}: {{ scheme.bearerFormat }} </code>
+  </li>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+
+defineProps<{
+  scheme: OpenApiType.SecuritySchemeObject;
+}>();
+</script>

src/.vuepress/theme/client/components/global/index.ts

@@ -80,3 +80,7 @@ export {default as OpenApiResponses} from './OpenApiResponses.vue';
 export {default as OpenApiSchema} from './OpenApiSchema.vue';
 
 export {default as OpenApiSchemaInfo} from './OpenApiSchemaInfo.vue';
+
+export {default as OpenApiSecurityRequirements} from './OpenApiSecurityRequirements.vue';
+
+export {default as OpenApiSecurityScheme} from './OpenApiSecurityScheme.vue';