mastodon post

mastodon-post

Un composant Web pour afficher mastodon post et leurs métadonnées.

Démo | Démo de modèle personnalisé | Lectures complémentaires

Exemples

Exemple d'utilisation générale :

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

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

Exemple utilisant un modèle personnalisé :

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

Exemple utilisant un modèle personnalisé plus complexe :

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

Caractéristiques

Ce Composant Web vous permet de :

• Transformez un lien mastodon post classique en une mastodon post citée
• Afficher les métadonnées de la publication à côté de la publication, par exemple le nombre de réponses, le nombre de reblogs, le nombre de favoris
• Utilisez un modèle personnalisé pour toutes les instances du composant sur la page à l'aide d'attributs de données data-key="name"
• Utiliser un modèle personnalisé pour des instances spécifiques à l'aide de l'attribut template
• Récupérez les données imbriquées à l'aide de l'attribut data-key et du référencement de clé JavaScript typique, par exemple data-key="account.display_name" ou data-key="media_attachments[0]preview_url"

Installation

Vous avez plusieurs options (choisissez-en une) :

1. Installer via npm : npm install @daviddarnes/mastodon-post
2. Téléchargez la source manuellement depuis GitHub dans votre projet.
3. Ignorez cette étape et utilisez le script directement via un CDN tiers (non recommandé pour une utilisation en production)

Usage

Assurez-vous d'inclure le <script> dans votre projet (choisissez-en un) :

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

Utiliser un modèle personnalisé

Le modèle par défaut du composant ressemble à ceci :

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

Cependant, vous pouvez personnaliser le modèle en utilisant un élément <template> avec un id mastodon-post-template , qui sera utilisé pour chaque instance du composant sur la page. Voici un exemple qui expose simplement les métriques de vanité de la mastodon post sous la forme d'un <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 >

Vous pouvez également utiliser différents modèles sur la même page en utilisant l'attribut template pour cibler les éléments <template> avec un id spécifique :

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

Les données sont appliquées à l'aide d'un attribut de données data-key . La valeur de cet attribut doit correspondre à un point de données dans une réponse API de statut public Mastodon. La documentation officielle de Mastodon contient un exemple de réponse de statut ici. L'attribut data-key vous permet également de cibler des données imbriquées à l'aide d'une notation par points JavaScript typique :

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

Notez que pour les éléments <a> et <img> , la valeur ne sera pas appliquée à son contenu si la chaîne renvoyée commence par http et sera appliquée respectivement aux attributs href et src .

Consultez la démo du modèle personnalisé ainsi que le code source pour référence.

Crédit

Avec nos remerciements aux personnes suivantes :

• Zach Leatherman pour avoir inspiré ce modèle de dépôt de composants Web