mastodon post

mastodon-post

Um componente da Web para exibir mastodon post e seus metadados.

Demonstração | Demonstração de modelo personalizado | Leitura adicional

Exemplos

Exemplo de uso geral:

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

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

Exemplo usando um modelo personalizado:

 < 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 >

Exemplo usando um modelo personalizado mais complexo:

 < 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 > 

Características

Este componente da Web permite:

• Transforme um link mastodon post em uma mastodon post
• Exiba os metadados da postagem junto com a postagem, por exemplo, contagem de respostas, contagem de reblogs, contagem de favoritos
• Use um modelo personalizado para todas as instâncias do componente na página usando atributos de dados data-key="name"
• Use um modelo personalizado para instâncias específicas usando o atributo template
• Recuperar dados aninhados usando o atributo data-key e referência típica de chave JavaScript, por exemplo data-key="account.display_name" ou data-key="media_attachments[0]preview_url"

Instalação

Você tem algumas opções (escolha uma destas):

1. Instale via npm: npm install @daviddarnes/mastodon-post
2. Baixe o código-fonte manualmente do GitHub para o seu projeto.
3. Pule esta etapa e use o script diretamente por meio de uma CDN de terceiros (não recomendado para uso em produção)

Uso

Certifique-se de incluir o <script> em seu projeto (escolha um destes):

 <!-- 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 >

Usando um modelo personalizado

O modelo padrão do componente é assim:

 < 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 >

No entanto, você pode personalizar o modelo usando um elemento <template> com um id mastodon-post-template , que será usado para cada instância do componente na página. Aqui está um exemplo que apenas expõe as métricas personalizadas da mastodon post como um <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 >

Você também pode usar modelos diferentes na mesma página usando o atributo template para direcionar elementos <template> com um id específico:

 < 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 >

Os dados são aplicados usando um atributo de dados data-key . O valor deste atributo deve corresponder a um ponto de dados dentro de uma resposta da API de status público do Mastodon. A documentação oficial do Mastodon tem um exemplo de resposta de status aqui. O atributo data-key também permite direcionar dados aninhados usando a típica notação de ponto 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 >

Observe que para os elementos <a> e <img> o valor não será aplicado ao seu conteúdo se a string retornada começar com http e, em vez disso, será aplicada aos atributos href e src respectivamente.

Confira a demonstração do modelo personalizado, bem como o código-fonte para referência.

Crédito

Com agradecimentos às seguintes pessoas:

• Zach Leatherman por inspirar este modelo de repositório de componentes da Web