PostUrlPreview (پیش‌نمایش لینک)

معرفی

<PostUrlPreview> همان OG card که در Slack، Discord، X می‌بینید را می‌سازد — لینک به یک تب جدید باز می‌شود و رویداد onClick با stopPropagation کارت والد را نمی‌گشاید.

چه زمانی استفاده کنیم:

• وقتی post.body.urlPreview تنظیم شده (مثلاً برای پست‌های text با لینک یا media-single با لینک ضمیمه).
• برای نمایش لینک خارجی شاخص یک پست (مقاله، صفحه محصول، بیانیه مطبوعاتی برند) به‌صورت کارت قابل کلیک.
• در فیدهای فشرده با compact، تا پیش‌نمایش بدون description و با تامبنیل کوچک‌تر رندر شود.

چه زمانی استفاده نکنیم:

• برای نمایش media اصلی پست — به‌جای آن از <PostMedia> استفاده کنید.
• برای ناوبری داخلی محصول — از لینک متنی یا <Button asChild> استفاده کنید؛ این کارت مخصوص مقصدهای خارجی است.
• برای نمایش کامل مقاله‌های editorial — از <PostCard source="press|web"> استفاده کنید که تیتر، lead و hero مقاله را رندر می‌کند.

زمین بازی

زمین بازی

بازنشانی

example.com

تحلیل جدید رفتار کاربران در شبکه‌های اجتماعی

این مقاله به بررسی الگوهای رفتاری کاربران فارسی‌زبان در پلتفرم‌های مختلف می‌پردازد.

تنظیمات

ظاهر

compact

محتوا

دارای تصویر

دارای توضیح

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

import { PostUrlPreview } from '@partodata/ui'
;<PostUrlPreview
  preview={{
    url: 'https://example.com/article',
    domain: 'example.com',
    title: 'تیتر مقاله',
    description: 'خلاصه‌ی کوتاه ۱-۲ خطی',
    thumbnailUrl: 'https://example.com/og.jpg',
  }}
/>

حالت‌ها

• compact={true} — بدون description، تامبنیل مربعی کوچک‌تر
• compact={false} (پیش‌فرض) — لِی‌اوت کامل با تامبنیل ۴:۳

راهنمای استفاده

Props

PostUrlPreview

علاوه بر این‌ها، همه attributes استاندارد <a> (مثل className و onClick) پذیرفته می‌شوند و ref به همان عنصر <a> ریشه forward می‌شود. onClick سفارشی شما بعد از stopPropagation داخلی اجرا می‌شود.

PostUrlPreviewData

دسترسی‌پذیری

• عنصر ریشه یک <a> واقعی است: با Tab فوکوس می‌گیرد و با Enter باز می‌شود — هیچ handler کیبورد سفارشی‌ای در کار نیست.
• نشانگر فوکوس با focus-visible (حلقه برند با offset) فقط برای ناوبری کیبورد ظاهر می‌شود، نه کلیک ماوس.
• نام دسترس‌پذیر لینک از متن داخل آن ساخته می‌شود (دامنه + عنوان + توضیح)؛ حتی بدون title، صفحه‌خوان همیشه دامنه را می‌خواند.
• تامبنیل با alt="" و aria-hidden="true" تزئینی علامت‌گذاری شده تا اطلاعات تکراری برای صفحه‌خوان اعلام نشود؛ آیکن ExternalLink هم به‌صورت پیش‌فرض (lucide) aria-hidden است.
• لینک با target="_blank" و rel="noreferrer" باز می‌شود؛ آیکن ExternalLink کنار دامنه سرنخ بصری «خروج به مقصد خارجی» است.
• دامنه با dir="ltr" رندر می‌شود تا در بستر RTL درست خوانده و truncate شود.
• فعال‌سازی پیش‌نمایش با stopPropagation از کارت والد (مثل PostCard با role="button") جدا شده است — کلیک یا Enter روی لینک، رویداد کارت را trigger نمی‌کند.

کامپوننت‌های مرتبط

• برای پست با media اصلی به جای لینک → <PostMedia>
• برای کارت بزرگ مقالات (editorial post) → <PostCard source="press|web">