‏mastodon-post: پست ماستودون رو تو سایتت جا بده

تو مخزن این پروژه اومده که mastodon-post یه Web Component (یعنی یه تگ HTML سفارشی که خود مرورگر می‌شناستش) هست برای نشون دادن پست‌های ماستودون. کاری که می‌کنه ساده‌ست: یه لینک معمولی به یه پست رو می‌گیره و همون‌جا تبدیلش می‌کنه به خود اون پست، با متن و آمارش. یعنی دیگه لازم نیست اسکرین‌شات بذاری یا دستی نقل‌قول بنویسی.

طرز استفاده‌ش هم همینه که لینک رو بذاری داخل تگ:

<mastodon-post>
  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
    Discuss on Mastodon
  </a>
</mastodon-post>

داده‌ها از پاسخ API عمومی status ماستودون میان و با ویژگی data-key به المان‌ها وصل می‌شن. قالب پیش‌فرض یه figure می‌سازه که متن پست توش داخل blockquote می‌شینه و کنارش یه لیست آمار میاد: ریپست، ریپلای و فیوریت.

اگه قالب پیش‌فرض رو نخوای، یه template با id برابر mastodon-post-template تو صفحه بذار تا برای همهٔ نمونه‌های کامپوننت استفاده شه، یا با ویژگی template روی خود تگ، یه قالب خاص رو فقط برای یه نمونه انتخاب کن. data-key دات‌نوتیشن جاوااسکریپت رو هم قبول می‌کنه، مثل account.display_name، پس به دادهٔ تودرتو هم می‌رسی.

نصبش سه راه داره: npm install @daviddarnes/mastodon-post، دانلود مستقیم سورس از گیت‌هاب، یا لود اسکریپت از یه CDN شخص ثالث که خود مخزن برای production توصیه‌ش نمی‌کنه. یه نکتهٔ ریز هم داره که اگه ندونی گیجت می‌کنه: برای a و img، وقتی مقدار برگشتی با http شروع شه، به جای متن المان می‌ره تو href و src.

نکات کلیدی:

• نصب با npm install @daviddarnes/mastodon-post؛ نسخه‌ای که تو مثال CDN اومده 1.3.0 هست
• قالب پیش‌فرض یه figure با blockquote متن پست و آمار ریپست، ریپلای و فیوریت می‌سازه
• با data-key به دادهٔ تودرتو هم می‌رسی، مثل account.display_name
• برای a و img مقداری که با http شروع شه تو href و src می‌شینه، نه تو متن
• مخزن، لود از CDN شخص ثالث رو برای production توصیه نمی‌کنه