bluesky post

bluesky-post

Eine Webkomponente zur Anzeige von Bluesky -Posts und deren Metadaten.

Demo | Benutzerdefinierte Vorlage Demo | Weitere Lesen

Beispiele

Allgemeines Nutzungsbeispiel:

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

Beispiel mit einer benutzerdefinierten Vorlage:

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

Beispiel mit einer komplexeren benutzerdefinierten Vorlage:

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

Merkmale

Mit dieser Webkomponente können Sie:

• Verwandeln Sie einen regulären Bluesky Post -Link in einen zitierten Bluesky -Beitrag
• Obere Post -Metadaten neben dem Post, z.
• Verwenden Sie eine benutzerdefinierte Vorlage für alle Instanzen der Komponente auf der Seite unter Verwendung eines data-key="name" -Datenattribute
• Verwenden Sie eine benutzerdefinierte Vorlage für bestimmte Instanzen mit dem template
• Abrufen Sie verschachtelte Daten mithilfe des data-key -Attributs und der typischen Referenzierung der JavaScript data-key="record.text" Schlüssel, z.

Installation

Sie haben einige Optionen (wählen Sie eine davon):

1. Installieren Sie über NPM: npm install @daviddarnes/bluesky-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 eine Drittanbieter -CDN (nicht für die Produktionsanwendung empfohlen)

Verwendung

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

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

Verwenden einer benutzerdefinierten Vorlage

Die Standardvorlage für die Komponente sieht folgt aus:

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

Sie können die Vorlage jedoch mithilfe eines <template> -Elements mit einer id von bluesky-post-template anpassen, die für jede Instanz der Komponente auf der Seite verwendet wird. Hier ist ein Beispiel, das nur die Eitelkeitsmetriken des Bluesky -Posts als <dl> aufdeckt:

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

Sie können auch verschiedene Vorlagen auf derselben Seite verwenden, indem Sie das template für Target <template> Elemente mit einer bestimmten id verwenden:

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

Die Daten werden mit einem data-key Datenattribut angewendet. Der Wert dieses Attributs sollte einem Datenpunkt in einer öffentlichen Post -API -Antwort von Bluesky entsprechen. Die offizielle Bluesky -Dokumentation hat hier ein Beispiel für eine Statusantwort.

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

Schauen Sie sich die benutzerdefinierte Vorlage -Demo sowie den Quellcode als Referenz an.

Kredit

Dank an die folgenden Leute:

• Zach Leatherman für die Inspiration dieser Webkomponenten -Repo -Vorlage