bsky-comments: کامنتهای بلوسکای رو توی سایتت جاسازی کن
فرانتاند
جاوااسکریپت
ریاکتخلاصهٔ کاملتر
bsky-comments یه وب کامپوننت کاملاً سبک و بدون هیچ وابستگی خارجیه که برای جاسازی تاپیکهای بلوسکای توی وبسایتهای مختلف طراحی شده. اگه بلاگ یا سایتی داری و میخوای کامنتهای بلوسکایت رو زیر پستهات نشون بدی، این ابزار دقیقاً همونیه که دنبالش بودی.
یکی از بزرگترین مزایای این کامپوننت، حجم فوقالعاده کمشه. در حالی که کتابخونهی رسمی AT Protocol حدود ۶۰ کیلوبایته، bsky-comments با استفاده از درخواستهای HTTP بومی مرورگر، همهکار رو با کمتر از ۳ کیلوبایت انجام میده. یعنی سرعت بارگذاری سایتت تقریباً تحت تأثیر قرار نمیگیره.
یه مشکل رایج توی ابزارهای مشابه اینه که یا فقط برای ریاکت ساخته شدن یا از Shadow DOM استفاده میکنن که استایلدهی رو کابوس میکنه. bsky-comments این مشکل رو با Light DOM حل کرده؛ یعنی CSS عمومی، کلاسهای Tailwind و فونتهایی که توی سایتت تعریف کردی، مستقیم روی کامنتها اعمال میشن. دیگه نیازی نیست با style encapsulation دست و پنجه نرم کنی.
استفاده ازش هم خیلی سادست. دو روش داری: اول، همون لینک عمومی پست بلوسکای رو توی attribute مربوطه میذاری و کامپوننت خودش همهچیز رو resolve میکنه. دوم، اگه از ابزارهایی مثل Astro یا Next.js استفاده میکنی و DID رو از قبل داری، میتونی مستقیم AT-URI رو بدی تا سرعت بیشتری داشته باشی؛ مناسب سایتهای استاتیک.
این کامپوننت کاملاً universal طراحی شده، یعنی با هر فریمورکی کار میکنه: ریاکت، ویو، Svelte، Astro و حتی HTML خالص. میتونی از طریق npm/pnpm/yarn نصبش کنی یا اگه نمیخوای سراغ bundler بری، یه خط CDN توی صفحهات بذاری و تمام.
قابلیت شخصیسازی هم داره. آیکونهای لایک و ریپلای رو میتونی از طریق attribute مستقیم تغییر بدی یا با CSS ایموجی پیشفرض رو مخفی کنی و آیکون دلخواه خودت رو بذاری. ساختار HTML خروجیش هم semantic و تمیزه، پس استایلدهی دقیق و حرفهای بهش خیلی راحته.
در کل، bsky-comments برای کسایی که میخوان سکشن کامنت سایتشون رو به بلوسکای وصل کنن، بدون اینکه حجم یا پیچیدگی اضافهای داشته باشن، یه انتخاب عالیه. مجوزش هم MIT هست، پس میتونی آزادانه ازش استفاده کنی.
نکات کلیدی:
- وب کامپوننت بدون وابستگی، فقط ۳ کیلوبایت گزیپشده
- سازگار با همه فریمورکها: ریاکت، ویو، Svelte، Astro و HTML خالص
- از Light DOM استفاده میکنه، استایلدهی با CSS و Tailwind بدون هیچ محدودیتی
- دو حالت ورودی: لینک عمومی بلوسکای یا AT-URI برای عملکرد بهتر در سایتهای استاتیک
- آیکونهای قابل شخصیسازی از طریق attribute یا CSS
- قابل نصب از طریق npm یا استفاده مستقیم از CDN بدون نیاز به build step
- مجوز MIT و کد باز
