Link preview
Hover an inline link to fetch Open Graph metadata and show a compact preview card in a portal.
Preview & code
Hover the links below. The popover is portaled to document.body, animates in and out, and supports outside click and Escape.
GFA Studio CLI · Coming soon
Hover the highlighted words: after a short delay a page preview opens. You can move the pointer onto the card; click outside or press Escape to dismiss. The same URL is cached for repeat hovers.
For documentation, see Next.js; for deployment, Vercel is useful. For Turkey time zone notes, TRT (Time and Date) is a sample external link.
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Manual
- Copy link-preview.ts, link-preview-text.tsx, and link-preview-card.tsx from apps/web/src/components/gfa/ into your project (adjust @/ imports).
- Copy apps/web/src/lib/link-preview.ts and apps/web/src/app/api/link-preview/route.ts; wire GET to getLinkPreview so the client can call /api/link-preview?url=….
- Review production safety: outbound fetch timeouts, caching, and SSRF controls for arbitrary URLs before exposing this endpoint publicly.
Props — LinkPreviewText
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Target URL; preview is fetched from /api/link-preview?url=…. |
| children | ReactNode | — | Visible link label (inline text). |
| className | string | — | Optional classes on the outer inline wrapper span. |
| side | "bottom" | "top" | "bottom" | Whether the popover opens below or above the trigger. |
| openDelayMs | number | 280 | Hover time before opening (debounced). |
| closeDelayMs | number | 220 | Delay after pointer leaves before closing (allows moving onto the card). |
Props — LinkPreviewCard
| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | — | Canonical link shown in the card footer. |
| preview | LinkPreview | null | — | Structured metadata from getLinkPreview (title, description, image, favicon). |
| className | string | — | Extra classes merged onto the article root. |
| size | "default" | "compact" | "default" | compact fits hover popovers; default is a larger standalone card. |