feat: add scalar API DOC instead of rapidoc

assets/styles/_variable.scss

@@ -4,9 +4,9 @@ $primary-1: #4B0AAA;
 $secondary: #C182FF;
 
 $white: #fff;
-$white-1 : #E1E1E1;
+$white-1: #E1E1E1;
 $white-2: #E5E4F7;
-$white-3:  #B9B9BA;
+$white-3: #B9B9BA;
 $white-4: #CCC6D2;
 $white-5: #7C7C7C;
 $white-6: #F0F0FF;
@@ -22,29 +22,30 @@ $gray-800: #2c3652;
 $gray-900: #1d2c48;
 
 $black: #26282D;
-$black-1 : #070708;
-$black-2 : #161617;
-$black-3 : #252526;
-$black-4 : #111113;
-$black-5 : #333336;
-$black-6 : #3D3D3F;
-$black-7 : #0D0D0C;
-$black-8 : #8B8B8D;
-$black-9 : #1D1D1E;
-$black-10 : #646465;
+$black-1: #070708;
+$black-2: #161617;
+$black-3: #252526;
+$black-4: #111113;
+$black-5: #333336;
+$black-6: #3D3D3F;
+$black-7: #0D0D0C;
+$black-8: #8B8B8D;
+$black-9: #1D1D1E;
+$black-10: #646465;
 // Define dark color classes
 @each $number in 1, 2, 3, 4, 5, 6, 7, 8 {
     $color: map-get((1: $black-1, 2: $black-2, 3: $black-3, 4: $black-4, 5: $black-5, 6: $black-6, 7: $black-7, 8: $black-8), $number);
     .bg-dark-#{$number} {
         background-color: $color;
     }
 }
+
 $green: #03DABA;
 $green-1: #BFE1B0;
 
 $blue: #1761FD;
 $indigo: #8405FF;
-$indigo-1 : #1B0229;
+$indigo-1: #1B0229;
 $purple: #9F9DFF;
 $pink: #FD3C97;
 $red: #E36065;
@@ -132,12 +133,12 @@ $font-family-monospace: "Source Code Pro", monospace;
 $font-size-base: 1rem;
 $font-size-xs: $font-size-base * .75;
 $font-size-sm: $font-size-base * .875;
-$font-size-md : $font-size-base * 1;
+$font-size-md: $font-size-base * 1;
 $font-size-lg: $font-size-base * 1.25;
 $font-size-xl: $font-size-base * 1.375;
-$font-size-2xl : $font-size-base * 2.188;
-$font-size-3xl : $font-size-base * 3;
-$font-size-4xl : $font-size-base * 3.75;
+$font-size-2xl: $font-size-base * 2.188;
+$font-size-3xl: $font-size-base * 3;
+$font-size-4xl: $font-size-base * 3.75;
 
 
 $h1-font-size: $font-size-base * 3.375;
@@ -221,6 +222,9 @@ $font-sizes: map-merge($font-sizes, (
 
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+
+body > :not(.scalar-app) {
+    @import "bootstrap/scss/utilities";
+}
 
 $tooltip-max-width: 300px;

assets/styles/docs.scss

@@ -235,7 +235,7 @@ $bd-gutter-x: 3rem;
 
         @media only screen and (max-width: 768px) {
             padding-bottom: 56.25%;
-            
+
             iframe {
                 width: 100%;
                 height: 100%;

assets/styles/vendor.scss

@@ -2,6 +2,7 @@
 
 @import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
+
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
@@ -32,16 +33,19 @@
 @import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/placeholders";
 @import "bootstrap/scss/helpers";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/utilities/api";
 
-@import  "@kestra-io/ui-libs/src/scss/vendor.scss";
+:where(:not(* .scalar):not(.scalar):not(* .scalar-app):not(.scalar-app) >) {
+    @import "bootstrap/scss/utilities";
+    @import "bootstrap/scss/utilities/api";
+
+    @import "@kestra-io/ui-libs/src/scss/vendor.scss";
+}
+
 
 @import "vue-material-design-icons/styles.css";
 @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;400;600;700;800&family=Source+Code+Pro:wght@400;700&display=swap");
 @import 'aos/src/sass/aos';
 @import 'vanilla-cookieconsent/dist/cookieconsent.css';
 @import "@vue-flow/core/dist/style.css";
 @import "@vue-flow/core/dist/theme-default.css";
-@import "@vue-flow/controls/dist/style.css";
-
+@import "@vue-flow/controls/dist/style.css";

components/api-docs/ApiDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <ApiReference :configuration="configuration" />
+</template>
+
+<script setup lang="ts">
+    import { ApiReference } from '@scalar/api-reference'
+    import type {AnyApiReferenceConfiguration} from "@scalar/types";
+
+    const props = defineProps<{
+        openApiUrl: string;
+    }>();
+
+    const configuration: AnyApiReferenceConfiguration = {
+        url: props.openApiUrl.startsWith("/") ? props.openApiUrl : `/${props.openApiUrl}`,
+        forceDarkModeState: "dark",
+        hideTestRequestButton: true,
+        hideDarkModeToggle: true,
+        hideClientButton: true,
+        showSidebar: true,
+        searchHotKey: "y"
+    }
+</script>
+
+<style lang="scss" scoped>
+    @use '@scalar/api-reference/style.css' as *;
+
+    :deep(.references-navigation) {
+        width: var(--refs-sidebar-width);
+        position: fixed;
+    }
+</style>