mastodon post

mastodon-post

Eine Webkomponente zur Anzeige mastodon post und ihren Metadaten.

Demo | Benutzerdefinierte Vorlage-Demo | Weiterführende Literatur

Beispiele

Allgemeines Anwendungsbeispiel:

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

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

Beispiel für die Verwendung einer benutzerdefinierten Vorlage:

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

Beispiel für die Verwendung einer komplexeren benutzerdefinierten Vorlage:

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

Merkmale

Mit dieser Webkomponente können Sie:

• Verwandeln Sie einen regulären mastodon post Beitragslink in einen zitierten mastodon post
• Zeigen Sie die Metadaten des Beitrags neben dem Beitrag an, z. B. Anzahl der Antworten, Anzahl der Reblogs, Anzahl der Favoriten
• Verwenden Sie eine benutzerdefinierte Vorlage für alle Instanzen der Komponente auf der Seite, indem Sie ein data-key="name" -Datenattribut verwenden
• Verwenden Sie mithilfe des template eine benutzerdefinierte Vorlage für bestimmte Instanzen
• Rufen Sie verschachtelte Daten mithilfe des data-key Attributs und typischer JavaScript-Schlüsselreferenzierung ab, z. B. data-key="account.display_name" oder data-key="media_attachments[0]preview_url"

Installation

Sie haben mehrere Möglichkeiten (wählen Sie eine davon):

1. Installation über npm: npm install @daviddarnes/mastodon-post
2. Laden Sie die Quelle manuell von GitHub in Ihr Projekt herunter.
3. Überspringen Sie diesen Schritt und verwenden Sie das Skript direkt über ein Drittanbieter-CDN (nicht für den Produktionseinsatz empfohlen).

Verwendung

Stellen Sie sicher, dass Sie das <script> in Ihr Projekt einschließen (wählen Sie eines davon):

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

Verwenden einer benutzerdefinierten Vorlage

Die Standardvorlage für die Komponente sieht folgendermaßen aus:

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

Sie können die Vorlage jedoch anpassen, indem Sie ein <template> -Element mit der id mastodon-post-template verwenden, das für jede Instanz der Komponente auf der Seite verwendet wird. Hier ist ein Beispiel, das lediglich die Vanity-Metriken des mastodon post als <dl> offenlegt:

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

Sie können auch verschiedene Vorlagen auf derselben Seite verwenden, indem Sie das template verwenden, um auf <template> -Elemente mit einer bestimmten id abzuzielen:

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

Die Daten werden mithilfe eines data-key angewendet. Der Wert dieses Attributs sollte einem Datenpunkt innerhalb einer Mastodon-API-Antwort für den öffentlichen Status entsprechen. Die offizielle Mastodon-Dokumentation enthält hier ein Beispiel für eine Statusantwort. Mit dem data-key -Attribut können Sie auch auf verschachtelte Daten mithilfe der typischen JavaScript-Punktnotation abzielen:

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

Beachten Sie, dass der Wert für <a> und <img> -Elemente nicht auf den Inhalt angewendet wird, wenn die zurückgegebene Zeichenfolge mit http beginnt, sondern stattdessen auf die Attribute href bzw. src angewendet wird.

Schauen Sie sich die Demo der benutzerdefinierten Vorlage sowie den Quellcode als Referenz an.

Kredit

Mit Dank an folgende Personen:

• Zach Leatherman für die Inspiration zu dieser Web Component-Repo-Vorlage