chore: Simplified openapi docs

packages/api/src/index.ts

@@ -6,7 +6,7 @@ import { bullBoardPlugin } from "./plugins/bull-board.js";
 import { initServer } from "@ts-rest/fastify";
 import { addTranscodeJob, addPackageJob } from "@mixwave/artisan/producer";
 import { getJobs, getJob, getJobLogs } from "./jobs.js";
-import { generateOpenApi } from "@ts-rest/open-api";
+import { openApiSpec } from "./openapi.js";
 
 async function buildServer() {
   const app = Fastify();
@@ -51,12 +51,7 @@ async function buildServer() {
     getSpec: async () => {
       return {
         status: 200,
-        body: generateOpenApi(contract, {
-          info: {
-            title: "API",
-            version: "1.0.0",
-          },
-        }),
+        body: openApiSpec,
       };
     },
   });

packages/api/src/openapi.ts

@@ -0,0 +1,11 @@
+import { generateOpenApi } from "@ts-rest/open-api";
+import { contract } from "./contract.js";
+
+export const openApiSpec = generateOpenApi(contract, {
+  info: {
+    title: "API",
+    version: "1.0.0",
+  },
+});
+
+delete openApiSpec.paths["/spec.json"];

packages/dashboard/src/App.tsx

@@ -7,7 +7,6 @@ import {
 import { JobsPage } from "@/pages/JobsPage";
 import { JobPage } from "@/pages/JobPage";
 import { ApiPage } from "@/pages/ApiPage";
-import { ApiEmbedPage } from "@/pages/ApiEmbedPage";
 import { RootLayout } from "@/pages/RootLayout";
 import { Suspense } from "react";
 import { tsr } from "./tsr";
@@ -42,10 +41,6 @@ const router = createBrowserRouter([
       },
     ],
   },
-  {
-    path: "/embed/api",
-    element: <ApiEmbedPage />,
-  },
 ]);
 
 export function App() {

packages/dashboard/src/components/OpenApiReference.tsx

@@ -1,24 +1,16 @@
 import { ApiReferenceReact } from "@scalar/api-reference-react";
 import { tsr } from "@/tsr";
-import { useEffect } from "react";
 import "@scalar/api-reference-react/style.css";
 
 type OpenApiReferenceProps = {
   url: string;
-  onLoad(): void;
 };
 
-export function OpenApiReference({ url, onLoad }: OpenApiReferenceProps) {
+export function OpenApiReference({ url }: OpenApiReferenceProps) {
   const { data } = tsr.getSpec.useQuery({
     queryKey: ["spec"],
   });
 
-  useEffect(() => {
-    if (data) {
-      onLoad();
-    }
-  }, [data]);
-
   if (!data) {
     return null;
   }

packages/dashboard/src/pages/ApiPage.tsx

@@ -1,27 +1,17 @@
 import { StretchLoader } from "@/components/StretchLoader";
-import { useEffect, useState } from "react";
+import { lazy, Suspense } from "react";
+import "@scalar/api-reference-react/style.css";
 
-export function ApiPage() {
-  const [loaded, setLoaded] = useState(false);
-
-  useEffect(() => {
-    const onMessage = () => {
-      setLoaded(true);
-    };
-
-    window.addEventListener("message", onMessage);
-
-    return () => window.removeEventListener("message", onMessage);
-  }, []);
+const LazyOpenApiReference = lazy(() =>
+  import("@/components/OpenApiReference").then((mod) => ({
+    default: mod.OpenApiReference,
+  })),
+);
 
+export function ApiPage() {
   return (
-    <div className="w-full h-full">
-      {loaded ? null : (
-        <div className="absolute inset-0 bg-white">
-          <StretchLoader />
-        </div>
-      )}
-      <iframe className="w-full h-full" src="/embed/api" />
-    </div>
+    <Suspense fallback={<StretchLoader />}>
+      <LazyOpenApiReference url={import.meta.env.VITE_API_URL} />
+    </Suspense>
   );
 }

packages/stitcher/src/index.ts

@@ -3,7 +3,7 @@ import cors from "@fastify/cors";
 import { env } from "./env.js";
 import { contract } from "./contract.js";
 import { initServer } from "@ts-rest/fastify";
-import { generateOpenApi } from "@ts-rest/open-api";
+import { openApiSpec } from "./openapi.js";
 import { createSession, getSession } from "./session.js";
 import {
   formatMasterPlaylist,
@@ -74,12 +74,7 @@ async function buildServer() {
     getSpec: async () => {
       return {
         status: 200,
-        body: generateOpenApi(contract, {
-          info: {
-            title: "Stitcher",
-            version: "1.0.0",
-          },
-        }),
+        body: openApiSpec,
       };
     },
   });

packages/stitcher/src/openapi.ts

@@ -0,0 +1,11 @@
+import { generateOpenApi } from "@ts-rest/open-api";
+import { contract } from "./contract.js";
+
+export const openApiSpec = generateOpenApi(contract, {
+  info: {
+    title: "API",
+    version: "1.0.0",
+  },
+});
+
+delete openApiSpec.paths["/spec.json"];