ReleaseTimeline

معرفی

ReleaseTimeline یک فید انتشار (ReleaseNote[]) را به‌صورت صفحهٔ کامل تغییرات رندر می‌کند: تاریخ شمسی به‌عنوان سرتیتر، و هر ریلیز یک بلوک مرزدار زیر آن.

بدنهٔ هر یادداشت را از همان رندرکنندهٔ WhatsNewPanel می‌گیرد، پس این دو نما هرگز نمی‌توانند از هم جدا بیفتند.

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

• در صفحهٔ اختصاصی «آخرین تغییرات» محصول، جایی که کاربر از فوتر پنل به آن می‌رسد
• وقتی می‌خواهید تاریخچهٔ بلند را با فضای کافی نشان دهید، نه در یک ستون باریک

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

• در هدر یا کنار آن — برای آن WhatsNewPanel هست
• برای رویدادهای عملیاتی کاربر (چه کسی چه کاری کرد) — برای آن ActionTimeline هست
• برای فهرست ساده‌ای که هیچ دسته‌بندی تغییر ندارد؛ آن‌وقت یک فهرست کافی است

استفاده

import { ReleaseTimeline } from '@partodata/ui'

import { whatsNewFeed } from '@/content/whats-new'

export default function WhatsNewPage() {
  return <ReleaseTimeline notes={whatsNewFeed.notes} />
}

یادداشت‌های تاریخ‌دار در آینده به‌صورت خودکار کنار گذاشته می‌شوند، دقیقاً مثل پنل — یک ریلیز که یک روز زودتر منتشر شود نباید خبرش زودتر بیرون بزند.

حالت‌ها و انواع

گروه‌بندی روزانه (پیش‌فرض)

نشانگر هر ردیف، آیکون مهم‌ترین نوع تغییرِ آن یادداشت است و برچسب کنار عنوان هم نام همان نوع. ترتیب اهمیت: تغییر مهم، قابلیت جدید، بهبود، رفع اشکال.

فشرده و بدون گروه‌بندی

density="compact" و groupBy="none" برای جایی که فضای عمودی کم است.

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

Props

بقیهٔ propهای ActionTimeline — به‌جز items، children، locale و onItemSelect که این کامپوننت خودش مدیریتشان می‌کند — پذیرفته می‌شوند و مستقیم به آن می‌رسند. ردیف‌های این خط زمان عمداً قابل کلیک نیستند: یادداشت انتشار مقصدی برای رفتن ندارد.

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

• هر گروهِ تاریخ یک <section> با سرتیتر <h2> است و ورودی‌هایش در یک <ol> می‌نشینند، پس صفحه‌خوان ساختار «تاریخ ← ریلیزهای آن روز» را همان‌طور که دیده می‌شود اعلام می‌کند.
• تاریخ در <time dateTime> با مقدار میلادیِ ماشین‌خوان می‌آید، درحالی‌که کاربر شمسی می‌بیند. زمان نسبی («۳ روز پیش») حذف شد: در صفحه‌ای که تاریخ سرتیتر است، دو نمایش زمان با هم رقابت می‌کردند، و با آهنگ حدوداً یک تغییر در هفته، جدیدترین ورودی «۱ هفته پیش» می‌خواند که روی سطحی که باید مهم به‌نظر برسد، بی‌توجهی را می‌رساند.
• آیکون نوع تغییر aria-hidden است و همان معنا در متنِ برچسب کنارش تکرار می‌شود، پس هیچ اطلاعاتی فقط در رنگ نمی‌ماند — و این عمدی است، چون فاصلهٔ رنگیِ دو نوعِ پرتکرار به‌تنهایی قابل اتکا نیست.
• هر گروهِ بولت role="group" با نام دسترسی‌پذیر دارد و خودِ چیپ aria-hidden است، وگرنه صفحه‌خوان برچسب را دو بار می‌خواند.

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

• WhatsNew — زنگوله، پنل و مودال؛ اگر دنبال سطح داخل هدر هستید از آن‌جا شروع کنید
• ActionTimeline — لایهٔ زیرین؛ اگر داده‌تان یادداشت انتشار نیست مستقیم از آن استفاده کنید
• Markdown — خلاصه و بولت‌ها با همین رندرکننده نمایش داده می‌شوند