Migrate resource page viewer to ogm-viewer

docs/README.md

@@ -62,7 +62,7 @@ Core runtime technologies:
 | Layer | Current implementation |
 | --- | --- |
 | API | FastAPI app mounted at `/api/v1`, with Swagger at `/api/docs` and OpenAPI JSON at `/api/openapi.json`. |
-| Public web app | React, React Router, TypeScript, Vite, MUI, Leaflet, GeoBlacklight frontend components, and H3 map visualization. |
+| Public web app | React, React Router, TypeScript, Vite, MUI, Leaflet, `ogm-viewer` resource previews, GeoBlacklight Leaflet layers for homepage previews, and H3 map visualization. |
 | Search | Elasticsearch with versioned index builds and alias swaps through `scripts/reindex_atomic.py`. |
 | Database | ParadeDB/PostgreSQL, SQLAlchemy table metadata in `backend/db/models.py`, script-based migrations in `backend/db/migrations/`. |
 | Cache | Redis plus durable database caches for generated API responses, resource representations, and visual assets. |

docs/frontend/README.md

@@ -24,6 +24,10 @@ Features:
 
 - [Homepage Map Visualization](homepage-map.md) - H3 hex map, featured carousel,
   preview layers, and Allmaps behavior.
+- Resource-page item previews use the `ogm-viewer` web components with the
+  Aardvark record already returned by the resource API. Vite leaves the
+  components un-prebundled and resolves their runtime theme and icon assets in
+  development, then emits those assets during production builds.
 
 Configuration:
 
@@ -39,8 +43,8 @@ The frontend stack currently uses:
 - TypeScript, Vite 7, and React Router dev tooling.
 - Vitest 3, Testing Library, `happy-dom`, axe, and pa11y for tests and
   accessibility checks.
-- Material UI 7, Tailwind, Leaflet, GeoBlacklight frontend components, Allmaps,
-  H3, Recharts, and Lucide icons.
+- Material UI 7, Tailwind, Leaflet, `ogm-viewer`, GeoBlacklight Leaflet layers
+  for homepage previews, Allmaps, H3, Recharts, and Lucide icons.
 
 ## Quick Commands
 

frontend/app/providers.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { ApiProvider } from '../src/context/ApiContext';
 import { BookmarkProvider } from '../src/context/BookmarkContext';
 import { DebugProvider } from '../src/context/DebugContext';
@@ -7,88 +7,15 @@ import { ThemeProvider } from '../src/context/ThemeContext';
 import type { ThemeId } from '../src/config/institution';
 import { TurnstileGate } from '../src/components/security/TurnstileGate';
 
-/**
- * App providers + client-side boot for GeoBlacklight (Stimulus).
- *
- * We keep this intentionally simple:
- * - Start Stimulus once
- * - Import GeoBlacklight core once (it registers its own controllers/listeners)
- * - Trigger GeoBlacklight activation on initial load and on route changes
- */
 export function Providers({
   children,
   initialThemeId,
-  locationKey,
   turnstilePreview = false,
 }: {
   children: React.ReactNode;
   initialThemeId?: ThemeId;
-  locationKey?: string;
   turnstilePreview?: boolean;
 }) {
-  useEffect(() => {
-    // Only runs in the browser
-    if (typeof window === 'undefined') return;
-
-    let cancelled = false;
-
-    async function boot() {
-      if (cancelled) return;
-      try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const g = globalThis as any;
-
-        // Start Stimulus once and expose it globally (GeoBlacklight expects `Stimulus`).
-        if (!g.Stimulus) {
-          const { Application } = await import('@hotwired/stimulus');
-          g.Stimulus = Application.start();
-          (window as any).Stimulus = g.Stimulus;
-        }
-
-        // Mirador is embedded via an iframe (see ResourceViewer) so we intentionally do NOT
-        // register a Stimulus controller for it. This avoids any possibility of Mirador code
-        // affecting the parent page.
-
-        // Import GeoBlacklight core once; it registers its own controllers and listeners.
-        if (!g.GeoblacklightCore) {
-          const mod =
-            await import('@geoblacklight/frontend/app/javascript/geoblacklight/core');
-          g.GeoblacklightCore = (mod as any).default ?? mod;
-        }
-
-        // GeoBlacklight uses DOMContentLoaded / Turbo events; in our SSR+SPA environment,
-        // those may not fire at the right time. Trigger activation on initial load + navigation.
-        if (typeof g.GeoblacklightCore?.activate === 'function') {
-          // Some initializers assume specific DOM nodes exist and can throw if they don't.
-          // Never let that take down the app or interfere with the viewer.
-          // Defer one tick so the new route's DOM is committed before initializers run.
-          setTimeout(() => {
-            try {
-              g.GeoblacklightCore.activate(
-                new Event('react-router:navigation')
-              );
-            } catch (err) {
-              // eslint-disable-next-line no-console
-              console.warn('GeoBlacklight activation failed:', err);
-            }
-          }, 0);
-        }
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.warn('GeoBlacklight boot failed:', err);
-      }
-    }
-
-    boot().catch((err) => {
-      // eslint-disable-next-line no-console
-      console.warn('GeoBlacklight boot failed:', err);
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [locationKey]);
-
   return (
     <ThemeProvider initialThemeId={initialThemeId}>
       <TurnstileGate devPreview={turnstilePreview}>

frontend/app/root.tsx

@@ -153,7 +153,6 @@ export default function Root() {
         ) : (
           <Providers
             initialThemeId={themeId}
-            locationKey={location.key}
             turnstilePreview={turnstilePreview}
           >
             <Outlet />