mastodon post

mastodon-post

Un componente web para mostrar mastodon post y sus metadatos.

Demostración | Demostración de plantilla personalizada | Lectura adicional

Ejemplos

Ejemplo de uso general:

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

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

Ejemplo usando una plantilla personalizada:

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

Ejemplo usando una plantilla personalizada más compleja:

 < 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 web le permite:

• Convierta el enlace de una mastodon post normal en una mastodon post citada
• Muestre los metadatos de la publicación junto a la publicación, por ejemplo, recuento de respuestas, recuento de reblogs, recuento de favoritos.
• Utilice una plantilla personalizada para todas las instancias del componente en la página utilizando atributos de datos data-key="name"
• Utilice una plantilla personalizada para instancias específicas utilizando el atributo template
• Recupere datos anidados utilizando el atributo data-key y la referencia de clave típica de JavaScript, por ejemplo, data-key="account.display_name" o data-key="media_attachments[0]preview_url"

Instalación

Tienes algunas opciones (elige una de estas):

1. Instalar a través de npm: npm install @daviddarnes/mastodon-post
2. Descargue la fuente manualmente desde GitHub a su proyecto.
3. Omita este paso y use el script directamente a través de una CDN de terceros (no recomendado para uso en producción)

Uso

Asegúrese de incluir el <script> en su proyecto (elija uno de estos):

 <!-- 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 una plantilla personalizada

La plantilla predeterminada para el componente tiene este aspecto:

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

Sin embargo, puede personalizar la plantilla utilizando un elemento <template> con una id de mastodon-post-template , que se usará para cada instancia del componente en la página. Aquí hay un ejemplo que simplemente expone las métricas de vanidad de la mastodon post como <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 >

También puedes usar diferentes plantillas en la misma página usando el atributo template para apuntar a elementos <template> con una id específica:

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

Los datos se aplican utilizando un atributo de datos data-key . El valor de este atributo debe corresponder a un punto de datos dentro de una respuesta API de estado público de Mastodon. La documentación oficial de Mastodon tiene un ejemplo de respuesta de estado aquí. El atributo data-key también le permite apuntar a datos anidados utilizando la notación de puntos típica de 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 >

Tenga en cuenta que para los elementos <a> y <img> el valor no se aplicará a su contenido si la cadena que se devuelve comienza con http y, en su lugar, se aplicará a los atributos href y src respectivamente.

Consulte la demostración de la plantilla personalizada y el código fuente como referencia.

Crédito

Con agradecimiento a las siguientes personas:

• Zach Leatherman por inspirar esta plantilla de repositorio de componentes web