From c4265c4549eb3131275ed4387d786440b6269017 Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@benndorf.dev>
Date: Thu, 4 Jan 2024 21:00:04 +0100
Subject: [PATCH] feat: finalize new api docs

---
 frontend/src/components/ApiDocs.client.vue |  31 ++++++-
 frontend/src/pages/api-docs.vue            | 100 ++-------------------
 frontend/src/pages/api-docs2.vue           |  25 ------
 frontend/src/pages/api-docs3.vue           |  25 ------
 frontend/src/pages/api-docs4.vue           |  25 ------
 5 files changed, 39 insertions(+), 167 deletions(-)
 delete mode 100644 frontend/src/pages/api-docs2.vue
 delete mode 100644 frontend/src/pages/api-docs3.vue
 delete mode 100644 frontend/src/pages/api-docs4.vue

diff --git a/frontend/src/components/ApiDocs.client.vue b/frontend/src/components/ApiDocs.client.vue
index 08f2d700f..5a1dda992 100644
--- a/frontend/src/components/ApiDocs.client.vue
+++ b/frontend/src/components/ApiDocs.client.vue
@@ -1,17 +1,45 @@
 <script lang="ts" setup>
 import "rapidoc";
+import { ref, watch } from "vue";
+import { useSettingsStore } from "~/store/useSettingsStore";
+
+const settings = useSettingsStore();
+
+const dom = ref<HTMLElement>();
+
+watch(dom, () => {
+  if (!dom.value) {
+    return;
+  }
+
+  dom.value?.addEventListener("spec-loaded", () => {
+    const navBar = dom.value.shadowRoot?.querySelector<HTMLElement>(".nav-bar");
+    if (navBar) {
+      // set the height to auto so that max-content works
+      navBar.style.height = "auto";
+    }
+  });
+});
 </script>
 
 <template>
   <rapi-doc
+    ref="dom"
     spec-url="/v3/api-docs"
-    render-style="view"
+    render-style="focused"
+    allow-server-selection="false"
     allow-spec-url-load="false"
     allow-spec-file-load="false"
     show-header="false"
+    show-method-in-nav-bar="as-colored-text"
+    use-path-in-nav-bar="true"
     server-url="/"
     default-api-server="/"
+    default-schema-tab="schema"
+    schema-description-expanded="true"
+    show-curl-before-try="true"
     heading-text="Hangar API"
+    :theme="settings.darkMode ? 'dark' : 'light'"
   >
   </rapi-doc>
 </template>
@@ -19,5 +47,6 @@ import "rapidoc";
 <style lang="scss">
 rapi-doc {
   border-radius: 0.375rem;
+  height: max-content;
 }
 </style>
diff --git a/frontend/src/pages/api-docs.vue b/frontend/src/pages/api-docs.vue
index e64caeee8..d8941f10e 100644
--- a/frontend/src/pages/api-docs.vue
+++ b/frontend/src/pages/api-docs.vue
@@ -1,60 +1,21 @@
 <script lang="ts" setup>
-import { onMounted } from "vue";
 import { useHead } from "@unhead/vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useSeo } from "~/composables/useSeo";
-import { useAuthStore } from "~/store/auth";
+import { LazyApiDocs } from "#components";
 
 const i18n = useI18n();
 const route = useRoute();
 
-onMounted(() => {
-  const swaggerUiVersion = "4.15.5";
-
-  const bundle = document.createElement("script");
-  bundle.src = `https://unpkg.com/swagger-ui-dist@${swaggerUiVersion}/swagger-ui-bundle.js`;
-  bundle.crossOrigin = "";
-  document.body.append(bundle);
-
-  const preset = document.createElement("script");
-  preset.src = `https://unpkg.com/swagger-ui-dist@${swaggerUiVersion}/swagger-ui-standalone-preset.js`;
-  preset.crossOrigin = "";
-  document.body.append(preset);
-
-  const script = document.createElement("script");
-  // language=JavaScript
-  script.innerHTML = `
-    window.ui = SwaggerUIBundle({
-      url: "/v3/api-docs.yaml",
-      dom_id: "#swagger-ui",
-      deepLinking: true,
-      presets: [SwaggerUIBundle.presets.apis, SwaggerUIBundle.SwaggerUIStandalonePreset],
-      plugins: [SwaggerUIBundle.plugins.DownloadUrl],
-      layout: "BaseLayout",
-      requestInterceptor: (req) => {
-        if (!req.loadSpec) {
-          if (req.url.startsWith("http://localhost:8080")) {
-            req.url = req.url.replace("http://localhost:8080", "http://localhost:3333");
-          }
-          if (req.headers?.Authorization) {
-              req.headers.Authorization = req.headers?.Authorization.replace("Bearer", "HangarAuth")
-          }
-        }
-        return req;
-      }
-    });
-  `;
-
-  bundle.onload = () => document.body.append(script);
-});
-
+const server = import.meta.env.SSR;
 useHead(useSeo(i18n.t("apiDocs.title"), "API Docs for the Hangar REST API", route, null));
 </script>
 
 <template>
-  <div class="bg-gray-100 dark:(bg-gray-200) rounded-md my-auto mx-2 py-1">
-    <div id="swagger-ui">
+  <div class="my-auto mx-2 dum">
+    <LazyApiDocs />
+    <div v-show="server">
       <h1 class="text-3xl text-bold">Hangar API</h1>
       <h2 class="text-2xl">API Docs for the Hangar REST API</h2>
       <p>Loading...</p>
@@ -62,52 +23,9 @@ useHead(useSeo(i18n.t("apiDocs.title"), "API Docs for the Hangar REST API", rout
   </div>
 </template>
 
-<style lang="scss">
-@import "swagger-ui-dist/swagger-ui.css";
-
-.swagger-ui {
-  .topbar .download-url-wrapper,
-  .info hgroup.main a {
-    display: none;
-  }
-
-  .wrapper .info {
-    background-color: unset !important;
-    border-color: unset !important;
-    margin: 2rem 0;
-
-    .title small pre {
-      background-color: unset;
-      border: unset;
-    }
-
-    .description h2 {
-      padding-top: 1rem;
-      margin-top: 1rem;
-      font-size: 30px;
-      border-top: 3px solid #333333;
-    }
-
-    .description h3 {
-      font-size: 25px;
-    }
-
-    .description h4 {
-      font-size: 20px;
-    }
-
-    .scheme-container {
-      border-top: 1px solid rgba(0, 0, 0, 0.15);
-    }
-
-    .markdown {
-      min-height: 0;
-    }
-  }
-}
-
-.model-container,
-.responses-inner {
-  overflow-x: auto;
+<style scoped>
+.dum {
+  /* nooooo clue where the height 100vh is coming from */
+  height: auto !important;
 }
 </style>
diff --git a/frontend/src/pages/api-docs2.vue b/frontend/src/pages/api-docs2.vue
deleted file mode 100644
index 5f7f55f24..000000000
--- a/frontend/src/pages/api-docs2.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { useHead } from "@unhead/vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { useSeo } from "~/composables/useSeo";
-
-import { LazyApiDocs } from "#components";
-
-const i18n = useI18n();
-const route = useRoute();
-
-const server = import.meta.env.SSR;
-useHead(useSeo(i18n.t("apiDocs.title"), "API Docs for the Hangar REST API", route, null));
-</script>
-
-<template>
-  <div class="my-auto mx-2">
-    <LazyApiDocs render-style="focused" />
-    <div v-show="server">
-      <h1 class="text-3xl text-bold">Hangar API</h1>
-      <h2 class="text-2xl">API Docs for the Hangar REST API</h2>
-      <p>Loading...</p>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/pages/api-docs3.vue b/frontend/src/pages/api-docs3.vue
deleted file mode 100644
index 5e01da968..000000000
--- a/frontend/src/pages/api-docs3.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { useHead } from "@unhead/vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { useSeo } from "~/composables/useSeo";
-
-import { LazyApiDocs } from "#components";
-
-const i18n = useI18n();
-const route = useRoute();
-
-const server = import.meta.env.SSR;
-useHead(useSeo(i18n.t("apiDocs.title"), "API Docs for the Hangar REST API", route, null));
-</script>
-
-<template>
-  <div class="my-auto mx-2">
-    <LazyApiDocs render-style="view" />
-    <div v-show="server">
-      <h1 class="text-3xl text-bold">Hangar API</h1>
-      <h2 class="text-2xl">API Docs for the Hangar REST API</h2>
-      <p>Loading...</p>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/pages/api-docs4.vue b/frontend/src/pages/api-docs4.vue
deleted file mode 100644
index 473379dd1..000000000
--- a/frontend/src/pages/api-docs4.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { useHead } from "@unhead/vue";
-import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { useSeo } from "~/composables/useSeo";
-
-import { LazyApiDocs } from "#components";
-
-const i18n = useI18n();
-const route = useRoute();
-
-const server = import.meta.env.SSR;
-useHead(useSeo(i18n.t("apiDocs.title"), "API Docs for the Hangar REST API", route, null));
-</script>
-
-<template>
-  <div class="my-auto mx-2">
-    <LazyApiDocs render-style="read" />
-    <div v-show="server">
-      <h1 class="text-3xl text-bold">Hangar API</h1>
-      <h2 class="text-2xl">API Docs for the Hangar REST API</h2>
-      <p>Loading...</p>
-    </div>
-  </div>
-</template>