Add API Reference section to portal app

apps/portal/package.json

@@ -10,6 +10,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "1.2.7",
+    "@scalar/api-reference-react": "^0.7.42",
     "@tanstack/react-query": "5.81.5",
     "@tryghost/content-api": "^1.11.28",
     "class-variance-authority": "^0.7.1",

apps/portal/src/app/Header.tsx

@@ -51,6 +51,10 @@ const links = [
     href: "/insight",
     name: "Insight",
   },
+  {
+    href: "/reference",
+    name: "API Reference",
+  },
 ];
 
 const toolLinks = [
@@ -281,7 +285,7 @@ export function Header() {
                   }}
                 >
                   <NavLink href={link.href} name={link.name} />
-                  {pathname.startsWith(link.href) && (
+                  {pathname?.startsWith(link.href) && (
                     <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
                   )}
                 </li>
@@ -526,7 +530,7 @@ function NavLink(props: {
     <Link
       className={clsx(
         "font-medium text-base transition-colors hover:text-foreground xl:text-sm",
-        pathname.startsWith(props.href)
+        pathname?.startsWith(props.href)
           ? "text-foreground"
           : "text-muted-foreground",
         props.icon ? "flex flex-row gap-3" : "",

apps/portal/src/app/reference/ScalarClient.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ApiReferenceReact } from "@scalar/api-reference-react";
+import "@scalar/api-reference-react/style.css";
+import "./scalar.css";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+
+export function ScalarApiReference() {
+  const { theme } = useTheme();
+
+  // scaler is using light-mode and dark-mode classes for theming
+  useEffect(() => {
+    if (theme === "dark") {
+      document.body.classList.remove("light-mode");
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+      document.body.classList.add("light-mode");
+    }
+  }, [theme]);
+
+  return (
+    <ApiReferenceReact
+      configuration={{
+        url: "https://api.thirdweb.com/openapi.json",
+        theme: "deepSpace",
+        layout: "modern",
+        showSidebar: true,
+        hideModels: false,
+        hideDarkModeToggle: true, // Hide since portal controls theme
+        hideDownloadButton: false,
+        hideTestRequestButton: false,
+      }}
+    />
+  );
+}

apps/portal/src/app/reference/page.tsx

@@ -0,0 +1,19 @@
+import { createMetadata } from "@/components/Document";
+import { ScalarApiReference } from "./ScalarClient";
+
+export const metadata = createMetadata({
+  image: {
+    title: "API Reference",
+    icon: "thirdweb",
+  },
+  title: "thirdweb API Reference",
+  description: "Complete REST API reference for all thirdweb services",
+});
+
+export default function ApiReferencePage() {
+  return (
+    <div className="container max-sm:px-0">
+      <ScalarApiReference />
+    </div>
+  );
+}

apps/portal/src/app/reference/scalar.css

@@ -0,0 +1,15 @@
+.scalar-app {
+  --scalar-background-1: hsl(var(--background));
+  --scalar-background-2: hsl(var(--card));
+}
+
+/* fixes sticky sidebar and header on mobile */
+.scalar-app .references-navigation-list,
+.scalar-app .references-header {
+  position: sticky;
+  top: var(--sticky-top-height);
+}
+
+.scalar-app .references-navigation-list {
+  height: calc(100vh - var(--sticky-top-height));
+}