[Agora-1928] Serve spec at /api/v1/spec + swagger UI at /api_v1 (#236)

* 💻 serve raw spec from /api/v1/spec * 💻📦👀 add packages + page for swagger react ui * 💻✨ add swagger ui in pages router
voteagora · Apr 22, 2024 · 62948be · 62948be
1 parent e8b5b18
commit 62948be
Show file tree

Hide file tree

Showing 6 changed files with 1,701 additions and 40 deletions.
diff --git a/next.config.js b/next.config.js
@@ -6,7 +6,7 @@ module.exports = {
     includePaths: [path.join(__dirname, "styles")],
   },
 };
-
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   async redirects() {
     return [

diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.80.1",
     "@tanstack/react-query": "^5.27.5",
+    "@types/swagger-ui-react": "^4.18.3",
     "@vercel/analytics": "^1.1.1",
     "@vercel/otel": "^1.5.0",
     "@vercel/speed-insights": "^1.0.2",
@@ -75,6 +76,7 @@
     "react-is": "^18.2.0",
     "react-markdown": "^8.0.7",
     "react-responsive": "^9.0.2",
+    "swagger-ui-react": "5.16.2",
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.6",
@@ -90,9 +92,10 @@
     "@tailwindcss/typography": "^0.5.10",
     "@typechain/ethers-v6": "^0.5.1",
     "@types/node": "20.1.1",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/react-infinite-scroller": "^1.2.5",
+    "@types/swagger-ui-dist": "^3.30.4",
     "@types/uuid": "^9.0.8",
     "cypress": "^12.11.0",
     "prettier": "^3.2.5",

diff --git a/src/app/api/v1/spec/route.ts b/src/app/api/v1/spec/route.ts
@@ -0,0 +1,25 @@
+import fs from "fs";
+import path from "path";
+
+export async function GET(request: Request) {
+  const fp = path.join(process.cwd(), "spec/oas_v1.yaml");
+
+  try {
+    const data = fs.readFileSync(fp, "utf8");
+    // set headers
+    const headers = new Headers();
+    headers.set("Content-Type", "application/x-yaml");
+
+    return new Response(data, {
+      headers,
+      status: 200,
+    });
+  } catch (err) {
+    if (err) {
+      console.error(err);
+      return new Response(JSON.stringify(`{result: "error"}`), {
+        status: 500,
+      });
+    }
+  }
+}
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -11,7 +11,8 @@ import { hasApiKey } from "@/app/lib/middleware/auth";
   client postgres support on edge runtime.
 */
 export function middleware(request: NextRequest) {
-  if (request.nextUrl.pathname.startsWith("/api")) {
+  const path = request.nextUrl.pathname;
+  if (path.startsWith("/api") && !path.startsWith("/api/v1/spec")) {
     const authResponse = hasApiKey(request);
     // TODO prisma client -> postgres db is currently not supported on edge
     // runtime for vercel specifically; migrate API key check when it is

diff --git a/src/pages/api_v1/index.tsx b/src/pages/api_v1/index.tsx
@@ -0,0 +1,25 @@
+import Head from "next/head";
+import { Inter } from "next/font/google";
+import SwaggerUI from "swagger-ui-react";
+import "swagger-ui-react/swagger-ui.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function SpecUI() {
+  return (
+    <>
+      <Head>
+        <title>Agora API</title>
+        <meta
+          name="description"
+          content="Open API Specification for Agora's public API"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className={`${inter.className}`}>
+        <SwaggerUI url="/api/v1/spec" />
+      </main>
+    </>
+  );
+}