Ich habe meinem Blog einen Bluesky-Kommentarbereich hinzugefügt

• 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

[GN⁺]

Hacker-News-Kommentare

• Wenn man einen Blog oder eine Website mit einem statischen Site-Generator (static site generator) rendert, wurde vorgeschlagen, Kommentare als Content-Dateien zu übernehmen und in den Build-Prozess einzubinden

  1. Kommentare per E-Mail, CGI-Skript, Serverprogramm usw. sammeln
  2. sie manuell prüfen und Spam löschen
  3. die Kommentare als .md- oder .html-Dateien speichern und
  4. sie beim Site-Build mit rendern
     Dieser Prozess ist aufwendig, hat aber die Vorteile Spam-Abwehr und vollständige Datenhoheit
  • Ich habe selbst ein ähnliches System auf E-Mail-Basis umgesetzt. Details stehen in meinem Blogpost
  • Bei einer kleinen Website muss man pro Tag nur wenige Kommentare verwalten, daher ist eine manuelle Prüfung gut machbar. Außerdem lässt sich das leicht durch automatisches Aktualisieren von Markdown-Dateien automatisieren
  • Mit „Ich nehme Kommentare nur per Fax an ;)“ machte jemand einen Witz
  • Jemand reagierte mit „Klingt furchtbar“ und hielt es für ineffizient

• Wer kein React verwenden möchte, kann sich meine Bluesky-Kommentar-Web-Component ansehen
  Sie ist im GitHub-Repository und im Theme-Playground zu finden.
  Theme-Anpassungen sind sehr einfach

• Nach dem Vorbild der ursprünglichen Idee hat jemand ein Mastodon-basiertes Kommentarsystem umgesetzt
  Mehr dazu steht in meinem Blogpost

  • Tatsächlich wurde eine solche Fediverse-Kommentar-Integration schon früher mit Mastodon oder Bluesky ausprobiert
    Siehe: zugehöriger Blogpost

• Wegen der EU-Gesetze zu Hassrede heißt es, Betreiber von Websites könnten bestraft werden, wenn sie Kommentare nicht filtern; jemand fragte sich, wie das tatsächlich aussieht
  Deshalb habe ich die Kommentarfunktion ganz abgeschaltet

  • Ich bin kein Rechtsexperte, aber solche Risiken werden oft aus politischen Motiven übertrieben dargestellt. EU-Gesetze berücksichtigen Größe und Zweck einer Website. Ich habe noch nie von einem Fall gehört, in dem eine kleine private Website bestraft wurde
  • Mit dem Moderation Labeler von Bluesky ist Vorabfilterung möglich. Es gibt zwar nichts, was speziell auf EU-Kriterien abgestimmt wäre, aber man könnte selbst einen Labeler bauen, der nur problematische Kommentare herausfiltert
  • Unabhängig von der Rechtslage möchte ich auf einer Website, die meinen Namen trägt, keine Hassrede stehen haben

• Mein Blog ist vollständig statisch aufgebaut, und mit einem 50-Zeilen-Cloudflare-Worker-Skript nehme ich Kommentare entgegen und füge sie direkt zu Markdown hinzu.
  Das lässt sich auch ohne eingebettete Kommentarfunktion umsetzen

  • Es wäre interessant, Kommentare per automatischem Commit als Pull Request einzuspielen und PRs als Werkzeug zur Kommentarprüfung zu nutzen
  • Jemand scherzte: „Noch cooler wäre es, wenn das echtes ColdFusion wäre“
  • Es gab auch die Frage, ob man Links oder Implementierungsdetails teilen könne

• Über die Bluesky-API ließe sich das auch automatisieren, indem automatisch der erste Post gefunden wird, der einen bestimmten Blog-Link enthält, und die Kommentare daran angebunden werden

• Um auch zum Wachstum von Bluesky beizutragen, hat jemand testweise ein Konto erstellt. Das wirkt wie eine ziemlich unterhaltsame Growth-Hacking-Idee

  • Allerdings werden gewinnorientierte soziale Netzwerke am Ende wohl immer wie Twitter, so die Meinung.
    Ideal wären langfristig eher selbstgehostete oder Fediverse-basierte Kommentarsysteme
  • Es wurde auch die Ansicht geäußert, dass man mit der Botschaft „Wir sind nicht diese andere Plattform“ allein kaum Erfolg haben werde

• Mein Blog ist zwar nicht besonders populär, aber ich habe früher einmal die Hölle aus Spam und Hasskommentaren erlebt
  Deshalb werde ich auf meinem persönlichen Blog nie wieder Kommentare aktivieren

• Auch bei einem Bluesky-basierten System könnte man durch das Hinzufügen eines eigenen Labelers eine Art Selbstzensur umsetzen, indem Kommentare mit bestimmten Labels gefiltert werden

• Mit einer ähnlichen Idee habe ich nicht nur für meinen Blog, sondern auch auf cartes.app eine Kommentarfunktion pro OSM-Ort hinzugefügt
  Bewertungen können mit einem ATproto-Konto hinterlassen werden, und die Daten werden als nutzereigenes JSON im PDS gespeichert

  • Dazu gab es den Kommentar: „Wirklich cool. Wie sammelst du diese Daten ein, hörst du dafür vielleicht auf den Bluesky Firehose?“