29dc71d2dd
Adds the front-end side of the link-preview feature so the back-end team has a fixed contract to implement against. - docs/link-preview.md: full spec for the `/api/link-preview` proxy and the preferred inline-on-Post integration. Covers caching, SSRF guards, metadata-extraction precedence, provider quirks, and the front-end rendering rules. Scope is the first URL only. - types/post.ts: new `LinkPreview` type and optional `linkPreview` field on `Post`. - LinkPreviewCard: clickable card with a themeColor accent bar, siteName / title / description (line-clamped), and an optional 1.91:1 thumbnail. Whole card is an `<a target="_blank">` to the canonical URL. - MessageBubble: render the card between the bubble body and the timestamp, with padding that matches visual vs. text-only bubbles. - mockPosts: example `linkPreview` payloads on p-005 and p-010 so the visual works when running with VITE_USE_MOCK_POSTS=true, and so the back-end has concrete reference values.
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import type { LinkPreview } from "../../types/post";
|
|
|
|
/**
|
|
* Telegram-style rich preview card for a single URL embedded in a post.
|
|
*
|
|
* Renders an accent bar on the left, then site name → title → description,
|
|
* with an optional thumbnail at the bottom. The whole card is one anchor
|
|
* that opens `canonicalUrl` in a new tab.
|
|
*/
|
|
export function LinkPreviewCard({ preview }: { preview: LinkPreview }) {
|
|
const accent = preview.themeColor || "#EEB726";
|
|
const hasUsefulText =
|
|
preview.title.length > 0 || preview.description.length > 0;
|
|
if (!hasUsefulText && !preview.imageUrl) return null;
|
|
|
|
return (
|
|
<a
|
|
href={preview.canonicalUrl || preview.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group block overflow-hidden rounded-lg bg-white/[0.04] transition hover:bg-white/[0.07]"
|
|
>
|
|
<div className="flex">
|
|
<div
|
|
aria-hidden
|
|
className="w-[3px] shrink-0 rounded-l-lg"
|
|
style={{ backgroundColor: accent }}
|
|
/>
|
|
<div className="min-w-0 flex-1 px-3 py-2.5">
|
|
{preview.siteName ? (
|
|
<div
|
|
className="truncate text-[12px] leading-4"
|
|
style={{ color: accent }}
|
|
>
|
|
{preview.siteName}
|
|
</div>
|
|
) : null}
|
|
{preview.title ? (
|
|
<div className="mt-0.5 line-clamp-2 break-words text-[14px] font-semibold leading-5 text-neutral-100">
|
|
{preview.title}
|
|
</div>
|
|
) : null}
|
|
{preview.description ? (
|
|
<div className="mt-1 line-clamp-3 break-words text-[13px] leading-[18px] text-neutral-300">
|
|
{preview.description}
|
|
</div>
|
|
) : null}
|
|
{preview.imageUrl ? (
|
|
<div className="mt-2 overflow-hidden rounded-md bg-black/30">
|
|
<img
|
|
src={preview.imageUrl}
|
|
alt=""
|
|
loading="lazy"
|
|
decoding="async"
|
|
width={preview.imageWidth}
|
|
height={preview.imageHeight}
|
|
className="block aspect-[1.91/1] w-full object-cover transition duration-300 group-hover:scale-[1.02]"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|