✨ Swagger docs

app/components/SidebarFooter.vue

@@ -14,17 +14,12 @@
         Service Status
       </a>
       <span class="font-bold">·</span>
-      <a
+      <nuxt-link class="link" target="_blank" to="/swagger"> API </nuxt-link>
-        class="link"
-        target="_blank"
-        href="https://solian.app/swagger/index.html"
-      >
-        API
-      </a>
     </div>
     <p class="mt-2 opacity-80">
       The FloatingIsland do not provides all the features the Solar Network has,
-      for further usage, see <a href="https://web.solian.app" class="font-bold underline">Solian</a>
+      for further usage, see
+      <a href="https://web.solian.app" class="font-bold underline">Solian</a>
     </p>
   </div>
 </template>

app/layouts/minimal.vue

@@ -1,14 +1,23 @@
 <template>
   <v-app :theme="colorMode.preference">
-    <v-app-bar flat height="48">
-      <v-container class="mx-auto d-flex align-center justify-center">
-        <p class="text-sm">Solar Network</p>
-      </v-container>
-    </v-app-bar>
-
     <v-main>
       <slot />
     </v-main>
+
+    <nuxt-link to="/">
+      <v-footer app fixed flat height="48">
+        <v-container class="mx-auto d-flex align-center justify-between">
+          <img
+            src="/_nuxt/assets/images/cloudy-lamb.png"
+            alt="Cloudy Lamb"
+            height="24"
+            width="24"
+            class="mr-2"
+          />
+          <p class="text-sm">Solar Network</p>
+        </v-container>
+      </v-footer>
+    </nuxt-link>
   </v-app>
 </template>
 

app/pages/swagger/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="swagger-ui"></div>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore
+import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
+import "swagger-ui-dist/swagger-ui.css"
+
+const colorMode = useColorMode()
+
+onMounted(() => {
+  // Load theme once on page load
+  loadTheme(colorMode.value)
+
+  // Reactively switch if user toggles mode
+  watch(colorMode, (newVal) => {
+    loadTheme(newVal.value)
+  })
+})
+
+function loadTheme(mode: string) {
+  if (mode === "dark") {
+    import("swagger-themes/themes/one-dark.css")
+  } else {
+    import("swagger-themes/themes/material.css")
+  }
+}
+
+const apiBase = useSolarNetworkUrl(true)
+
+onMounted(() => {
+  const ui = SwaggerUIBundle({
+    urls: [
+      {
+        url: `${apiBase}/swagger/ring/v1/swagger.json`,
+        name: "DysonNetwork.Ring"
+      },
+      {
+        url: `${apiBase}/swagger/pass/v1/swagger.json`,
+        name: "DysonNetwork.Pass"
+      },
+      {
+        url: `${apiBase}/swagger/sphere/v1/swagger.json`,
+        name: "DysonNetwork.Sphere"
+      },
+      {
+        url: `${apiBase}/swagger/drive/v1/swagger.json`,
+        name: "DysonNetwork.Drive"
+      },
+      {
+        url: `${apiBase}/swagger/develop/v1/swagger.json`,
+        name: "DysonNetwork.Develop"
+      }
+    ],
+    dom_id: "#swagger-ui",
+    deepLinking: true,
+    presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+    layout: "StandaloneLayout"
+  })
+  // @ts-ignore
+  window.ui = ui
+})
+
+definePageMeta({
+  layout: "minimal"
+})
+
+useHead({
+  title: "Solar Network API"
+})
+</script>
+
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
+
+.swagger-ui *:not(:is(pre, pre *, textarea, textarea *)) {
+  font-family: var(--font-family) !important;
+}
+
+.swagger-ui pre,
+.swagger-ui pre *,
+.swagger-ui textarea,
+.swagger-ui textarea * {
+  font-family: "Roboto Mono", monospace !important;
+}
+</style>

package.json

@@ -40,6 +40,8 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "sharp": "^0.34.4",
+    "swagger-themes": "^1.4.3",
+    "swagger-ui-dist": "^5.29.0",
     "tailwindcss": "^4.1.13",
     "tus-js-client": "^4.3.1",
     "unified": "^11.0.5",