Mastodon Integration

29. Mai 2023 Hardware und Software

Mastodon bietet eine offene API und ich würde gern meine Nachrichten dort auf meiner Homepage hier integrieren. Allerdings verwende ich Jekyll als statischen Generator, meine Homepage hat kein “dynamisches Backend”. Die Integration ist dennoch gar nicht so schwer, sieh selbst.

Die Mastodon REST API bietet vollständigen Zugriff auf alle Funktionen - und der Abruf von öffentlichen Daten ist selbst auch ohne Anmeldung möglich. Somit besteht der Abruf meiner Posts aus zwei einfachen Schritten:

1. Übersetzen meines Nutzernamens @datenimperator in die technische User-ID 109263191968899365
   https://social.cologne/api/v1/accounts/lookup?acct=datenimperator
2. Abrufen der letzten Posts unter Verwendung dieser ID
   https://social.cologne/api/v1/accounts/109263191968899365/statuses?exclude_reblogs=1&limit=5

Den ersten Schritt hätte man eventuell sparen können, da sich die User-ID selten bis nie ändern wird, aber so erschien es mir dennoch sauberer. Zunächst habe ich mir ein wenig HTML zusammengestellt, das später meine Posts darstellen soll:

Am Rande: Meine Gitea Embeds für Jekyll kennst du?

Den Nutzernamen als data-Attribut im HTML zu platzieren ist dabei ein Pattern, das ich gern verwende. Der Tag template erlaubt es mir, den HTML-Aufbau an dieser Stelle zu definieren und später im Javascript einfach verwenden zu können. Um Werte aus dem Javascript ins HTML übertragen zu können, verwende ich eine Funktion interpolate, die den ES6 Templatestrings nachempfunden ist und die ich irgendwo auf Stack Overflow gefunden habe. Das ist sicherlich nicht maximal performant, aber für meine Zwecke vollkommen ausreichend.

Die Klasse Mastodon bietet eine Methode update() welche zunächst die User-ID ermittelt, und damit dann als nächstes in retrieve(userId) die letzten relevanten Posts holt, filtert und als HTML Knoten in die Seite einbettet.

Zu guter Letzt aktiviere ich die Integration im Haupt-Javascript:

document.addEventListener("DOMContentLoaded", function(event) {
  document
    .querySelectorAll('.mastodon-feed')
    .forEach(elem => new Mastodon(elem).update());
});

Und schon zeigt meine statische Homepage die letzten Posts auf Mastodon. Enjoy!