feat: implement openapi (#482)

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -84,6 +84,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
           icon: IconBrandDocker,
           href: "/manage/tools/docker",
         },
+        {
+          label: t("items.tools.items.api"),
+          icon: IconPlug,
+          href: "/manage/tools/api",
+        },
         {
           label: t("items.tools.items.logs"),
           icon: IconLogs,

apps/nextjs/src/app/[locale]/manage/tools/api/page.tsx

@@ -0,0 +1,28 @@
+import { getScopedI18n } from "@homarr/translation/server";
+
+// workaround for CSS that cannot be processed by next.js, https://github.com/swagger-api/swagger-ui/issues/10045
+import "./swagger-ui-dark.css";
+import "./swagger-ui-overrides.css";
+import "./swagger-ui.css";
+
+import { headers } from "next/headers";
+import SwaggerUI from "swagger-ui-react";
+
+import { openApiDocument } from "@homarr/api";
+import { extractBaseUrlFromHeaders } from "@homarr/common";
+
+import { createMetaTitle } from "~/metadata";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management");
+
+  return {
+    title: createMetaTitle(t("metaTitle")),
+  };
+}
+
+export default function ApiPage() {
+  const document = openApiDocument(extractBaseUrlFromHeaders(headers()));
+
+  return <SwaggerUI spec={document} />;
+}

apps/nextjs/src/app/[locale]/manage/tools/api/swagger-ui-overrides.css

@@ -0,0 +1,4 @@
+.swagger-ui .info {
+  margin: 0 !important;
+  margin-bottom: 20px !important;
+}

apps/nextjs/src/app/api/[...trpc]/route.ts

@@ -0,0 +1,14 @@
+import { createOpenApiFetchHandler } from "trpc-swagger/build/index.mjs";
+
+import { appRouter, createTRPCContext } from "@homarr/api";
+
+const handler = (req: Request) => {
+  return createOpenApiFetchHandler({
+    req,
+    endpoint: "/",
+    router: appRouter,
+    createContext: () => createTRPCContext({ session: null, headers: req.headers }),
+  });
+};
+
+export { handler as GET, handler as POST };

apps/nextjs/src/app/api/openapi/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+
+import { openApiDocument } from "@homarr/api";
+import { extractBaseUrlFromHeaders } from "@homarr/common";
+
+export function GET(request: Request) {
+  return NextResponse.json(openApiDocument(extractBaseUrlFromHeaders(request.headers)));
+}