Renders an Open-Graph link preview card by fetching OG metadata from a configurable scrape endpoint, resolving images through a multi-step fallback chain, and displaying either a compact horizontal or default vertical card layout. ## Key Components ### `OGData` (interface) Defines the expected JSON shape returned by the OG scrape endpoint (`/api/og-scraper` by default). Fields include `title`, `description`, `image`, `originalImage`, `url`, `siteName`, `type`, and `favicon`. ### `OGLinkErrorBoundary` (class component) A React error boundary scoped to link previews. Catches rendering errors silently and renders a `fallback` prop (typically a plain `` tag) to prevent a broken third-party preview from crashing the parent view. Named distinctly to avoid export collision with the lib's `features/error-boundary`. ### `BuildPlaceholderUrl` (type) Callback signature `(title, siteName) => string | null` for generating a placeholder image URL when scraping returns no image. The hub injects its own implementation; embedders can omit this to disable placeholder generation entirely. ### `OGLinkPreview` (React FC) Main card component. Key behaviors: - **URL validation** — rejects malformed URLs, `localhost`, and RFC1918 ranges without a network request, rendering a plain link instead. - **OG fetch** — `GET {apiBaseUrl}{ogEndpointPath}?url=` with configurable base and path for cross-origin embed contexts. - **Image resolution** — cascades through `og:image` → `originalImage` → `fallbackImage` prop → `buildPlaceholderUrl` result, with per-source error toggles. - **Edge color extraction** — calls `useImageEdgeColor` on the resolved image for a letterbox background tint. - **Variants** — `compact` (horizontal, 120px) or `default` (vertical with `aspect-video` hero). ### Internal helpers - `getDomain` / `domainToTitle` — extract and humanize a hostname for graceful error fallback display. - `ExternalLinkIcon` / `Favicon` — small presentational components used inside the card. ## Usage Example ```typescript import { OGLinkPreview, OGLinkErrorBoundary } from './og-link-preview' // Default vertical card (hub / same-origin) {url}}> `/api/og-placeholder?title=${encodeURIComponent(title)}&site=${encodeURIComponent(siteName)}` } /> // Compact card from an embed context pointing at the hub ``` **Source:** [`og-link-preview.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/og-link-preview.tsx)