- Ein Beispiel dafür, wie sich mit der Bluesky API auch auf statischen Websites Kommentare anzeigen lassen
- Da Bluesky Kontoverifizierung, Spam-Management, Speicherung und Moderation übernimmt, ist kein eigener Serverbetrieb nötig
- Die Implementierung besteht aus rund 200 Zeilen TypeScript-Code und nutzt
@bluesky/api sowie Tanstack react-query
- Kommentare werden schreibgeschützt angezeigt; über die Metadaten jedes Blogposts wird die Bluesky-Post-ID verknüpft und automatisch geladen
- Eine experimentelle Implementierung, die die Kombinierbarkeit einer offenen Social-Plattform mit einem statischen Blog zeigt
Hintergrund zur Implementierung eines Bluesky-Kommentarbereichs
- Ausgangspunkt war die Schwierigkeit, auf statisch generierten Websites eine Kommentarfunktion selbst zu hosten
- In ein CDN ausgerollte statische Inhalte können keine dynamischen Daten speichern
- Der Betrieb eines separaten VPS- oder Cloud-Dienstes verursacht hohe Kosten und Verwaltungsaufwand
- Bluesky ist eine offene Plattform auf Basis einer öffentlichen API und des AT-Protokolls und stellt die für Kommentarverwaltung nötigen Funktionen bereits bereit
- Kontoverifizierung, Spam-Filterung, Speicherung und Moderation übernimmt Bluesky
- Auf Blog-Seite reicht es aus, einfach die API aufzurufen und die Kommentare anzuzeigen
Andere Alternativen und warum Bluesky gewählt wurde
- Auch Alternativen wie Twitter, Disqus und giscus (auf GitHub Discussions basierend) wurden in Betracht gezogen
- Bluesky ist auf dem dezentralen AT-Protokoll aufgebaut, wodurch das Risiko der Kontrolle durch ein einzelnes Unternehmen geringer ist
- Im Vergleich zu GitHub-basierten Lösungen eignet es sich als konversationszentrierte Plattform besser für das Hosting von Kommentaren
Implementierungsansatz
- Das von Cory Zue veröffentlichte bluesky-comments-Paket diente als Referenz, es wurde jedoch eine Eigenimplementierung gewählt
- Um Anpassungen an den Stil der Website und spätere Erweiterbarkeit zu ermöglichen, wurde eigener Code geschrieben
- Die gesamte Implementierung umfasst einschließlich UI-Komponenten und API-Funktionen etwa 200 Zeilen
- Anfangs wurde auch eine direkte Posting-Funktion per OAuth erwogen, wegen UI-Komplexität und Zeitmangel aber verworfen
- Im Ergebnis wurde nur eine schreibgeschützte Anzeige von Kommentaren umgesetzt
Technischer Aufbau
- Die Website wurde mit React Server Components und Parcel aufgebaut
- Inhalte werden in MDX geschrieben und können JavaScript/JSX direkt einbetten
- Im
metadata-Objekt jedes Beitrags wird bskyPostId hinterlegt, um ihn mit einem Bluesky-Post zu verknüpfen
- Mit dem Bluesky-TypeScript-SDK (
@bluesky/api) werden Kommentar-Thread-Daten über den getPostThread-Endpunkt abgerufen
- API-Anfragen werden mit Tanstack react-query verwaltet
- Fehler-, Lade- und Retry-Zustände werden automatisch behandelt
UI-Design
- Aus der Bluesky-Antwort wird nur Textinhalt extrahiert und in einer einfachen Kommentar-UI dargestellt
- Die Thread-Struktur wird durch Einrückungen und eine linke Begrenzungslinie unterschieden
- Profilbilder und Veröffentlichungsdatum orientieren sich am Bluesky-Design
- Oben wurde ein Link zum ursprünglichen Bluesky-Post ergänzt, um zur Teilnahme an der Unterhaltung anzuregen
- Eine Funktion zum Schreiben von Kommentaren gibt es nicht; Nutzer hinterlassen Antworten direkt auf Bluesky
Zukünftige Möglichkeiten
- Bei Bedarf könnte diese Implementierung als eigenständiges Paket veröffentlicht werden
- Der aktuelle Code ist allerdings auf die persönliche Website zugeschnitten
- Da die Struktur einfach ist, können auch andere Entwickler den Quellcode als Referenz nutzen und dies leicht umsetzen
- Ob die Anbindung von Bluesky-Kommentaren die Interaktion im Blog verbessert, ist noch unklar
Reaktionen von Bluesky-Nutzern
- Mehrere Bluesky-Nutzer hinterließen in den Kommentaren positive Reaktionen wie „gute Idee“, „schnelle Reaktionsgeschwindigkeit“ und „geeignet als Disqus-Alternative“
- Einige stellten Fragen zu Spam-Management, verschachtelten Kommentaren und Unterstützung für Anhänge
- Der Autor erklärte, dass sich bestimmte Kommentare mit der persönlichen Moderationsfunktion von Bluesky ausblenden lassen
Noch keine Kommentare.