mastodon post

mastodon-post

Веб-компонент для отображения mastodon post и их метаданных.

Демо | Демо-версия пользовательского шаблона | Дальнейшее чтение

Примеры

Общий пример использования:

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

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

Пример использования пользовательского шаблона:

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

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

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

Пример использования более сложного пользовательского шаблона:

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

< template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
  < a data-key =" url " >
    View original post from < img alt =" avatar " data-key =" account.avatar " />
    < strong data-key =" account.display_name " > </ strong > on
    < strong data-key =" hostname " > </ strong >
  </ a >
</ template >

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

Функции

Этот веб-компонент позволяет:

• Превратите обычную ссылку mastodon post в цитируемый mastodon post
• Поместите метаданные сообщения рядом с сообщением, например, количество ответов, количество репостов, количество избранных.
• Используйте собственный шаблон для всех экземпляров компонента на странице, используя атрибуты данных data-key="name"
• Используйте собственный шаблон для определенных экземпляров, используя атрибут template
• Получите вложенные данные, используя атрибут data-key и типичную ссылку на ключ JavaScript, например data-key="account.display_name" или data-key="media_attachments[0]preview_url"

Установка

У вас есть несколько вариантов (выберите один из них):

1. Установите через npm: npm install @daviddarnes/mastodon-post
2. Загрузите исходный код вручную с GitHub в свой проект.
3. Пропустите этот шаг и используйте скрипт напрямую через стороннюю CDN (не рекомендуется для использования в рабочей среде).

Использование

Обязательно включите <script> в свой проект (выберите один из них):

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

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/mastodon-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 =" content " > </ blockquote >
  < figcaption >
    < cite >
      < a data-key =" url " >
        < span data-key =" username " > </ span >
        @
        < span data-key =" hostname " > </ span >
      </ a >
    </ cite >
    < dl >
      < dt > Reposts </ dt >
      < dd data-key =" reblogs_count " > </ dd >
      < dt > Replies </ dt >
      < dd data-key =" replies_count " > </ dd >
      < dt > Favourites </ dt >
      < dd data-key =" favourites_count " > </ dd >
    </ dl >
  </ figcaption >
</ figure >

Однако вы можете настроить шаблон, используя элемент <template> с id mastodon-post-template , который будет использоваться для каждого экземпляра компонента на странице. Вот пример, который просто отображает показатели тщеславия mastodon post как <dl> :

 < template id =" mastodon-post-template " >
  < dl >
    < dt > Reposts </ dt >
    < dd data-key =" reblogs_count " > </ dd >
    < dt > Replies </ dt >
    < dd data-key =" replies_count " > </ dd >
    < dt > Favourites </ dt >
    < dd data-key =" favourites_count " > </ dd >
  </ dl >
</ template >

Вы также можете использовать разные шаблоны на одной странице, используя атрибут template для нацеливания на элементы <template> с определенным id :

 < template id =" custom-template " >
  < a data-key =" content, url " > </ a >
</ template >

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

Данные применяются с использованием атрибута данных data-key . Значение этого атрибута должно соответствовать точке данных в ответе API общедоступного статуса Mastodon. В официальной документации Mastodon приведен пример ответа о статусе. Атрибут data-key также позволяет вам ориентироваться на вложенные данные, используя типичную точечную нотацию JavaScript:

 < template id =" mastodon-post-template " >
  < figure >
    < blockquote data-key =" content " > </ blockquote >
    < figcaption >
      < cite >
        < a data-key =" url " >
          View original post from
          < img alt =" avatar " data-key =" account.avatar " />
          < strong data-key =" account.display_name " > </ strong > on
          < strong data-key =" hostname " > </ strong >
        </ a >
      </ cite >
    </ figcaption >
  </ figure >
</ template >

Обратите внимание, что для элементов <a> и <img> значение не будет применено к их содержимому, если возвращаемая строка начинается с http , а вместо этого будет применено к атрибутам href и src соответственно.

Ознакомьтесь с демо-версией пользовательского шаблона, а также с исходным кодом для справки.

Кредит

Выражаем благодарность следующим людям:

• Заку Лезерману за создание шаблона репозитория веб-компонентов.