- Ich nutze keine klassischen Kommentarsysteme wie Disqus, Self-Hosting oder GitHub Issues, da sie Probleme wie Geschwindigkeit, Tracking, Wartungsaufwand und Nutzerbeschränkungen mit sich bringen.
- Bluesky eignet sich für Blog-Kommentare, weil es keine Infrastrukturwartung erfordert, Rich Content unterstützt, konto-basierte Identitäten mit Echtnamensprüfung bereitstellt und plattfomnübergreifende Gespräche ermöglicht.
- Die Implementierung folgt einem Ablauf: Blogartikel veröffentlichen → in Bluesky teilen → AT-URI zu den Metadaten des Beitrags hinzufügen → den Kommentar-Thread dieses Beitrags abrufen und anzeigen.
- Die Komponenten sind in drei Teile aufgeteilt: Anzeige aller Kommentare, Anzeige einzelner Kommentare inklusive Antworten und Behandlung von Einbettungen wie Bildern oder Links.
- Rekursiv werden bis zu 5 Ebenen von Antworten dargestellt; außerdem Bildraster und Modal, Link-Karten und Platzhaltertexte für nicht unterstützte Embeds.
- Astro + React-Integration, Laden im Client mit
client:load, Aktivierung durch Hinzufügen von DID und postCid im Frontmatter.
- Für Typensicherheit werden die TypeScript-Typen von
@atcute/client genutzt; bei deaktiviertem JavaScript bleibt der Inhalt dank Progressive Enhancement korrekt lesbar.
- Mit Bluesky API und CDN wird ohne eigenen Server oder Datenbank eine gute Performance erreicht.
- Dieser Ansatz sichert Skalierbarkeit und Unabhängigkeit, indem soziale Funktionen nicht site-spezifisch neu implementiert, sondern mit Plattformen verbunden werden, die die Nutzer bereits nutzen.
Warum ich Bluesky als Kommentarsystem gewählt habe
- Keine Notwendigkeit für Infrastrukturwartung
- Unterstützung für reichhaltige Inhalte wie Bilder, Links und zitierte Posts
- Vertrauenswürdigkeit und Verantwortlichkeit durch Bluesky-Konten
- Möglicher Traffic-Austausch zwischen Blog und Social-Media
- Trennung der Inhaltsverantwortung (Blog-Inhalt gehört dir, Kommentare gehören den Autoren)
AT-Protokoll verstehen
- DID: dezentraler Benutzerbezeichner
- CID: Inhaltsbezeichner
- AT URI: Adresse im Format
at://did:.../app.bsky.feed.post/...
- Mit dem API-Aufruf von
getPostThread kann der Kommentar-Thread geladen werden, Authentifizierung ist nicht nötig
Komponentenstruktur
- Hauptkomponente für Kommentare
- Komponente für die Darstellung einzelner Kommentare und Antworten
- Komponente für die Verarbeitung von Bild- und Link-Einbettungen
Verarbeitung verschachtelter Antworten
- Rekursives Rendering mit einer maximalen Tiefe von 5 Ebenen
- Visuelle Einrückung zur Darstellung der Hierarchie
Verarbeitung von Rich Content
- Bilder: Bereitstellung über CDN, Bildrasteransicht und Modal
- Externe Links: Kartenansicht mit Thumbnail und Beschreibung
- Weitere Einbettungen: Anzeige von Alternativtexten
Astro-Integration
- Verwendung von React-Komponenten +
client:load
- Aktivierung der Kommentare durch Hinzufügen von Bluesky-DID und
postCid zum Frontmatter
Entwicklungserfahrung
- Mehr Stabilität durch TypeScript-Typunterstützung
- Bei Ausfall der API bleibt der Inhalt durch Progressive Enhancement unverändert sichtbar
- Nutzung der Bluesky-Infrastruktur ohne Server- oder Datenbanklast
Fazit
- Um Probleme klassischer Kommentarsysteme zu vermeiden, wird an die Plattformen angebunden, die Nutzer bereits verwenden
- Mit dem Wachstum von Bluesky steigt die potenzielle Teilnahme
- Da die Lösung auf ATProto basiert, ist ein Wechsel zu einer anderen AppView oder eigener Implementierung einfach möglich
Noch keine Kommentare.