Public-facing catalog view component for the `/onboarding-guides` route, supporting both SSR-controlled (hub) and self-fetching (config-only embed) data modes. ## Key Components ### `OnboardingGuidesCatalogViewProps` Interface defining two mutually exclusive data modes: - **Controlled mode**: `initialGuides` + `initialSections` (server-fetched, host manages re-renders) - **Self-fetch mode**: `guidesEndpoint` + `sectionsEndpoint` (component fetches independently, refetches on `?section=` changes) ### `OnboardingGuidesCatalogView` Main exported component that renders: - `DocSearchBar` — RAG search scoped to `onboarding-guides` table IDs - `FilterPillRow` — Dynamic section pills derived from content data - Grouped, step-ordered guide cards via `OnboardingGuideCard` - `LoadError` / `OnboardingGuidesCatalogSkeleton` for async states **Notable behaviors:** - Section filtering pushes `?section=` to the router; controlled mode triggers host RSC re-fetch, self-fetch mode triggers `useSelfFetch` refetch - Card hrefs are composed via `runtime.composeContentUrl` (falling back to relative paths via `resolveContentHref`) - Skeleton renders only on cold load; subsequent empty-section transitions dim the grid (`opacity-60`) instead - Guides are grouped by `section`, sorted by `section_order`, then each group sorted by `step_order` ## Usage Example ```typescript // Controlled (SSR hub) mode // Self-fetch (config-only embed) mode // Custom card renderer override } /> ``` > **Note:** This component renders body content only. Callers must wrap it in the appropriate page chrome (e.g., ``). **Source:** [`onboarding-guides-catalog-view.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/onboarding-guides-catalog-view.tsx)