bluesky post

bluesky-post

Um componente da web para exibir postagens bluesky e seus metadados.

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

Exemplos

Exemplo de uso geral:

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

Exemplo usando um modelo personalizado:

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

Exemplo usando um modelo personalizado mais complexo:

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

Características

Este componente da web permite:

• Transforme um link de post bluesky regular em uma postagem de bluesky citada
• Apertei os metadados pós ao lado do post, por exemplo, contagem de respostas, contagem de repostos, como a contagem
• Use um modelo personalizado para todas as instâncias do componente na página usando um atributos de dados de dados de 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 a chave típica de Javascript, por exemplo, data-key="record.text"

Instalação

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

1. Instale via npm: npm install @daviddarnes/bluesky-post
2. Faça o download da fonte manualmente do GitHub em seu projeto.
3. Pule esta etapa e use o script diretamente por meio de um CDN de terceiros (não recomendado para uso da produção)

Uso

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

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

Usando um modelo personalizado

O modelo padrão para o componente se parece com o seguinte:

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

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

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

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

Os dados são aplicados usando um atributo de dados data-key . O valor desse atributo deve corresponder a um ponto de dados dentro de uma resposta pública de API Bluesky. A documentação oficial do Bluesky tem um exemplo de resposta de status aqui.

Observe que, para <a> e <img> elementos, o valor não será aplicado ao seu conteúdo se a sequência que está sendo 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 agradecimento às seguintes pessoas:

• Zach Leatherman para inspirar este modelo de repo componente da web