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 Post в цитируемый пост Bluesky
• Поверхность после метаданных пост рядом с постом, например, подсчет ответов, количество репост, как COUNT
• Используйте пользовательский шаблон для всех экземпляров компонента на странице, используя атрибуты данных 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 Post как <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 для вдохновения этого шаблона Repo веб -компонента