bluesky post

bluesky-post

مكون الويب لعرض منشورات Bluesky وبيانات التعريف الخاصة بهم.

العرض التوضيحي | قالب مخصص العرض التوضيحي | مزيد من القراءة

أمثلة

مثال الاستخدام العام:

 < script type =" module " src =" bluesky-post.js " > </ script >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

مثال باستخدام قالب مخصص:

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < blockquote data-key =" content " > </ blockquote >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

مثال باستخدام قالب مخصص أكثر تعقيدًا:

 < script type =" module " src =" bluesky-post.js " > </ script >

< template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < strong data-key =" username " > </ strong > on < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

< bluesky-post >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post > 

سمات

يتيح لك مكون الويب هذا:

• تحويل رابط منشور Bluesky العادي إلى منشور Bluesky مقتبس
• سطح البيانات الوصفية ما بعد ذلك إلى جانب المنشور ، على سبيل المثال عدد الرد ، عدد إعادة النية ، مثل العد
• استخدم قالبًا مخصصًا لجميع مثيلات المكون على الصفحة باستخدام سمات data-key="name"
• استخدم قالبًا مخصصًا لحالات محددة باستخدام سمة template
• استرجاع البيانات المتداخلة باستخدام سمة data-key والرجوع إلى مفتاح JavaScript النموذجي ، على سبيل المثال ، data-key="record.text"

تثبيت

لديك بعض الخيارات (اختر واحدة من هذه):

1. التثبيت عبر NPM: npm install @daviddarnes/bluesky-post
2. قم بتنزيل المصدر يدويًا من Github إلى مشروعك.
3. تخطي هذه الخطوة واستخدم البرنامج النصي مباشرة عبر CDN الطرف الثالث (لا ينصح به لاستخدام الإنتاج)

الاستخدام

تأكد من تضمين <script> في مشروعك (اختر واحدة من هذه):

 <!-- Host yourself -->
< script type =" module " src =" bluesky-post.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/bluesky-post.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

باستخدام قالب مخصص

يبدو القالب الافتراضي للمكون هكذا:

 < figure >
  < blockquote data-key =" record.text " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " > @ < span data-key =" username " > </ span > </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" repostCount " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replyCount " > </ dd >
      < dt > Likes </ dt >
      < dd data-key =" likeCount " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

ومع ذلك ، يمكنك تخصيص القالب باستخدام عنصر <template> مع id من bluesky-post-template ، والذي سيتم استخدامه لكل مثيل للمكون في الصفحة. فيما يلي مثال يكشف عن مقاييس الغرور في منشور Bluesky كـ <dl> :

 < template id =" bluesky-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" repostCount " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replyCount " > </ dd >
    < dt > Likes </ dt >
    < dd data-key =" likeCount " > </ dd >
  </ dl >
</ template >

يمكنك أيضًا استخدام قوالب مختلفة على نفس الصفحة باستخدام سمة template إلى عناصر الهدف <template> مع id محدد:

 < template id =" custom-template " >
  < a data-key =" record.text, url " > </ a >
</ template >

< bluesky-post template =" custom-template " >
  < a href =" https://bsky.app/profile/darn.es/post/3l7m6ivb6ha2q " >
    Discuss on Bluesky
  </ a >
</ bluesky-post >

يتم تطبيق البيانات باستخدام سمة data-key البيانات. يجب أن تتوافق قيمة هذه السمة مع نقطة بيانات داخل استجابة API العامة لـ Bluesky. الوثائق الرسمية Bluesky لديها مثال على استجابة الحالة هنا.

لاحظ أنه بالنسبة لعناصر <a> و <img> ، لن يتم تطبيق القيمة على محتوىها إذا بدأت السلسلة التي يتم إرجاعها بـ http وسيتم تطبيقها بدلاً من ذلك على سمات href و src على التوالي.

تحقق من عرض القالب المخصص وكذلك رمز المصدر للرجوع إليه.

ائتمان

بفضل الأشخاص التاليين:

• Zach Leatherman لإلهام قالب ريبو مكون الويب هذا