fix: use scalar for api docs

CHANGELOG.md

@@ -5,7 +5,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
-- Nothing
+### Fixed
+
+- Switch to scalar for API docs modal
+- Make logo link back to the home page
 
 ### 2.0.0
 

package.json

@@ -12,6 +12,8 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@scalar/api-reference": "^1.37.0",
+    "@scalar/api-reference-react": "^0.7.55",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.544.0",
@@ -25,7 +27,6 @@
     "react-dom": "^18.0.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
-    "redoc": "^2.5.1",
     "source-map-explorer": "^2.5.3",
     "styled-components": "^6.1.19",
     "tailwind-merge": "^3.3.1",

src/App.tsx

@@ -222,11 +222,17 @@ export const App = () => {
   const SearchPanelContent = () => (
     <div className={stack({ gap: "lg" })}>
       <div className={stack({ gap: "md" })}>
-        <img
-          src={Logo}
-          alt="Federated Collection Discovery"
-          className="h-32 w-auto"
-        />
+        <button
+          onClick={() => (window.location.href = "/")}
+          className="cursor-pointer hover:opacity-80 transition-opacity"
+          aria-label="Return to home page"
+        >
+          <img
+            src={Logo}
+            alt="STAC Collection Discovery"
+            className="h-32 w-auto"
+          />
+        </button>
 
         {docsError && (
           <Alert variant="destructive">
@@ -319,11 +325,17 @@ export const App = () => {
       {/* Mobile search button - only visible on small screens */}
       <header className="lg:hidden sticky top-0 z-50 bg-background border-b">
         <div className="flex items-center justify-between p-3">
-          <img
-            src={Logo}
-            alt="Federated Collection Discovery"
-            className="h-10 w-auto"
-          />
+          <button
+            onClick={() => (window.location.href = "/")}
+            className="cursor-pointer hover:opacity-80 transition-opacity"
+            aria-label="Return to home page"
+          >
+            <img
+              src={Logo}
+              alt="STAC Collection Discovery"
+              className="h-10 w-auto"
+            />
+          </button>
           <Sheet open={isSearchSheetOpen} onOpenChange={setIsSearchSheetOpen}>
             <SheetTrigger asChild>
               <Button

src/components/ApiDocModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, Suspense } from "react";
+import { useState, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -7,18 +7,40 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
-
-const RedocStandalone = lazy(() =>
-  import("redoc").then((mod) => ({ default: mod.RedocStandalone }))
-);
+import { ApiReferenceReact } from "@scalar/api-reference-react";
+import "@scalar/api-reference-react/style.css";
 
 interface ApiDocModalProps {
   isOpen: boolean;
   onClose: () => void;
   apiDocs: any;
 }
 
+const customScalarCss = `
+  .light-mode,
+  .dark-mode {
+    --scalar-color-1: hsl(var(--foreground));
+    --scalar-color-2: hsl(var(--muted-foreground));
+    --scalar-color-3: hsl(var(--foreground));
+    --scalar-color-accent: hsl(var(--primary));
+    --scalar-background-1: hsl(var(--background));
+    --scalar-background-2: hsl(var(--card));
+    --scalar-background-3: hsl(var(--muted));
+    --scalar-background-accent: hsl(var(--primary));
+    --scalar-border-color: hsl(var(--border));
+    --scalar-sidebar-background-1: hsl(var(--card));
+    --scalar-sidebar-item-hover-background: hsl(var(--accent));
+    --scalar-sidebar-item-active-background: hsl(var(--accent));
+    --scalar-sidebar-border-color: hsl(var(--border));
+    --scalar-sidebar-color-1: hsl(var(--card-foreground));
+    --scalar-sidebar-color-2: hsl(var(--muted-foreground));
+    --scalar-sidebar-color-active: hsl(var(--accent-foreground));
+    --scalar-sidebar-search-background: hsl(var(--muted));
+    --scalar-sidebar-search-border-color: hsl(var(--border));
+    --scalar-sidebar-search-color: hsl(var(--foreground));
+  }
+`;
+
 const ApiDocModal: React.FC<ApiDocModalProps> = ({
   isOpen,
   onClose,
@@ -42,41 +64,33 @@ const ApiDocModal: React.FC<ApiDocModalProps> = ({
     return () => observer.disconnect();
   }, []);
 
+  // Clear hash when modal closes to avoid confusion
+  useEffect(() => {
+    if (!isOpen && window.location.hash) {
+      history.replaceState(
+        null,
+        "",
+        window.location.pathname + window.location.search
+      );
+    }
+  }, [isOpen]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-7xl max-h-[90vh]">
         <DialogHeader>
           <DialogTitle>API Documentation</DialogTitle>
         </DialogHeader>
         <div className="overflow-auto max-h-[70vh]">
-          <Suspense
-            fallback={
-              <div className="flex items-center justify-center py-12">
-                <LoadingSpinner size="lg" text="Loading documentation..." />
-              </div>
-            }
-          >
-            <RedocStandalone
-              spec={apiDocs}
-              options={{
-                theme: {
-                  colors: {
-                    primary: {
-                      main: isDark ? "#ffffff" : "#000000",
-                    },
-                  },
-                  typography: {
-                    fontSize: "14px",
-                    fontFamily: "inherit",
-                  },
-                },
-                scrollYOffset: 0,
-                hideDownloadButton: false,
-                disableSearch: false,
-                nativeScrollbars: true,
-              }}
-            />
-          </Suspense>
+          <ApiReferenceReact
+            configuration={{
+              theme: "none",
+              darkMode: isDark,
+              hideModels: false,
+              content: apiDocs,
+              customCss: customScalarCss,
+            }}
+          />
         </div>
         <DialogFooter>
           <Button onClick={onClose}>Close</Button>