website: fix hosted API browser (#7946)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/developer-docs/api/browser.mdx

@@ -1,38 +1,9 @@
+---
+hide_table_of_contents: true
+---
+
 # API Browser
 
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import APIBrowser from "../../src/components/APIBrowser";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
-import { useColorMode } from "@docusaurus/theme-common";
-
-export function APIBrowser() {
-    const context = useDocusaurusContext();
-    const { siteConfig = {} } = context;
-    const { colorMode, setColorMode } = useColorMode();
-    let bg = "#1b1b1d";
-    if (colorMode === "light") {
-        bg = "#fff";
-    }
-    return (
-        <BrowserOnly>
-            {() => {
-                import("rapidoc");
-                return (
-                    <rapi-doc
-                        spec-url={useBaseUrl("schema.yaml")}
-                        allow-try="false"
-                        show-header="false"
-                        theme={colorMode}
-                        bg-color={bg}
-                        render-style="view"
-                        primary-color="#fd4b2d"
-                        allow-spec-url-load="false"
-                        allow-spec-file-load="false"
-                    ></rapi-doc>
-                );
-            }}
-        </BrowserOnly>
-    );
-}
 
 <APIBrowser />

website/src/components/APIBrowser/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export function APIBrowser() {
+    const context = useDocusaurusContext();
+    const { siteConfig = {} } = context;
+    const { colorMode, setColorMode } = useColorMode();
+    let bg = "#1b1b1d";
+    if (colorMode === "light") {
+        bg = "#fff";
+    }
+    return (
+        <BrowserOnly>
+            {() => {
+                require("rapidoc");
+                return (
+                    <rapi-doc
+                        spec-url={useBaseUrl("schema.yaml")}
+                        allow-try="false"
+                        show-header="false"
+                        theme={colorMode}
+                        bg-color={bg}
+                        render-style="view"
+                        primary-color="#fd4b2d"
+                        allow-spec-url-load="false"
+                        allow-spec-file-load="false"
+                        allow-authentication="false"
+                        allow-server-selection="false"
+                        show-info="false"
+                    ></rapi-doc>
+                );
+            }}
+        </BrowserOnly>
+    );
+}
+
+export default APIBrowser;

website/src/pages/api/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
 function APIPage() {
     return (

website/src/pages/api/v3.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
 function APIPage() {
     return (

website/src/pages/index.jsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import Head from "@docusaurus/Head";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";

website/src/pages/terraform-provider.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
 function TerraformProviderPage() {
     return (