feat: add interactive api docs, rewrite run endpoint with hono and zod validator

web/src/components/docs/Navigation.tsx

@@ -238,6 +238,10 @@ export const navigation: Array<NavGroup> = [
       { title: "Installation", href: "/docs/install" },
     ],
   },
+  {
+    title: "API",
+    links: [{ title: "Endpoints", href: "/docs/endpoints" }],
+  },
 ];
 
 export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) {

web/src/components/docs/SwaggerUIClient.css

@@ -0,0 +1,3 @@
+.swagger-ui .info {
+    margin: 0 !important;
+}

web/src/components/docs/SwaggerUIClient.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import "./SwaggerUIClient.css";
+import type { ComponentProps } from "react";
+import React from "react";
+import _SwaggerUI from "swagger-ui-react";
+import "swagger-ui-react/swagger-ui.css";
+
+// Create the layout component
+class AugmentingLayout extends React.Component {
+  render() {
+    const { getComponent } = this.props;
+    const BaseLayout = getComponent("BaseLayout", true);
+    return (
+      <div className="not-prose">
+        <BaseLayout />
+      </div>
+    );
+  }
+}
+
+const AugmentingLayoutPlugin = () => {
+  return {
+    components: {
+      AugmentingLayout: AugmentingLayout,
+    },
+  };
+};
+
+export default function SwaggerUI(props: ComponentProps<typeof _SwaggerUI>) {
+  return (
+    <_SwaggerUI
+      {...props}
+      persistAuthorization={true}
+      plugins={[AugmentingLayoutPlugin]}
+      layout="AugmentingLayout"
+    />
+  );
+}

web/src/components/docs/mdx.tsx

@@ -2,9 +2,16 @@ import { Feedback } from "@/components/docs/Feedback";
 import { Heading } from "@/components/docs/Heading";
 import { Prose } from "@/components/docs/Prose";
 import { cn } from "@/lib/utils";
+// import { SwaggerUI } from "@hono/swagger-ui";
 import clsx from "clsx";
+import dynamic from "next/dynamic";
+// import _SwaggerUI from "swagger-ui-react";
 import Link from "next/link";
 
+export const SwaggerUI = dynamic(() => import("./SwaggerUIClient"), {
+  ssr: false,
+});
+
 export const a = Link;
 export { Button } from "@/components/docs/Button";
 export { CodeGroup, Code as code, Pre as pre } from "@/components/docs/Code";