JAMstack Kommentare

JAMstack-Websites werden oft als „statisch“ angesehen. Ein genaueres mentales Modell dafür wäre, dass es sich um Websites handelt, die die „Möglichkeit zur statischen Haltung“ haben. Der Unterschied mag semantisch erscheinen, aber dank des Aufstiegs vieler Tools und Dienste, die die Ausführung eines Builds und die Bereitstellung auf einer statischen Hosting-Infrastruktur vereinfachen, können sich solche Websites frischer und dynamischer anfühlen, als Sie vielleicht erwarten, während sie dennoch aus einer statischen Hosting-Infrastruktur heraus bedient werden können, mit all den Vorteilen, die dies mit sich bringt.

Ein Feature, das oft als Beispiel dafür dient, warum eine Website nicht statisch gehostet werden kann, sind Kommentare. Eine Kommentar-Engine muss Einreichungen verarbeiten, Moderation zulassen und ist von Natur aus „dynamisch“.

Dank des wachsenden Ökosystems von Tools für JAMstack-Websites gibt es Lösungen dafür. Schauen wir uns ein Beispiel an, das Sie auf Ihrer eigenen Website verwenden könnten, das

• kein clientseitiges JavaScript benötigt
• mit jedem Static Site Generator funktionieren könnte
• Moderation beinhaltet
• Benachrichtigungen sendet, wenn neue Kommentare moderiert werden müssen
• die Kommentare in Ihre Website einbäckt, sodass sie schnell geladen werden und in Suchergebnissen erscheinen

Dieses Beispiel nutzt einige der Funktionen von Netlify, einer Plattform zur Automatisierung, Bereitstellung und zum Hosting von Webprojekten. Viele der Prinzipien könnten jedoch auch mit anderen Plattformen verwendet werden.

Sie können die Beispiel-Website hier sehen.

Speichern unserer Inhalte

Wir erstellen 2 Formulare, um alle unsere Kommentare in den verschiedenen Phasen ihrer Reise vom Kommentator zum Inhalt zu empfangen. Wenn Netlify ein <form> sieht, erstellt es einen eindeutigen Datenspeicher für die von dem Formular gesammelten Daten. Dies werden wir ausgiebig nutzen.

• Formular 1) Eine Warteschlange zur Aufnahme aller neuen Kommentar-Einreichungen. Mit anderen Worten, ein Speicher für alle Kommentare, die auf Moderation warten.
• Formular 2) Enthält alle genehmigten Kommentare.

Der Akt der Moderation wird darin bestehen, dass jemand jede neue Einreichung prüft und entscheidet: „Ja!“ oder „Nein!“. Diejenigen, die abgelehnt werden, werden aus der Warteschlange gelöscht. Diejenigen, die genehmigt werden, werden in das Formular für genehmigte Kommentare überführt.

Alle Kommentare im Formular für genehmigte Kommentare werden von unserem Static Site Generator in nachfolgenden Website-Builds verwendet, dank des API-Zugangs, den Netlify für die Einreichungen in unseren Formularen bietet.

Das Kommentarformular

Jede Seite enthält ein HTML-<form>. Durch Hinzufügen des booleschen Attributs netlify zu jedem HTML-Formularelement auf Ihrer Website generiert Netlify automatisch eine API für Ihr Formular und sammelt alle Einreichungen für Sie. Sie können die Einreichungen später auch über diese API abrufen. Praktisch!

Das Kommentar-<form> auf jeder Seite wird in etwa so aussehen (einige Klassen und zusätzlicher Text wurden zur Klarheit weggelassen)

<form netlify name="comments-queue" action="/thanks">
  <input name="path" type="hidden" value="{{ page.url }}">
  <p>
    <label for="name">Your name</label>
    <input type="text" name="name" id="name">
  </p>
  <p>
    <label for="email">Your email</label>
    <input type="email" name="email" id="email">
  </p>
  <p>
    <label for="comment">Your comment</label>
    <textarea name="comment" id="comment"></textarea>
  </p>
  <p>
    <button type="submit">Post your comment</button>
  </p>
</form>

Sie werden feststellen, dass das Formular auch ein Feld vom Typ type="hidden" enthält, um uns mitzuteilen, für welche Seite auf der Website dieser Kommentar bestimmt ist. Unser Static Site Generator füllt dieses Feld für uns aus, wenn die Website generiert wird, und wir werden es später verwenden, um zu entscheiden, welche Kommentare auf welcher Seite angezeigt werden sollen.

Einreichungen und Benachrichtigungen

Wenn ein neuer Kommentar über das Kommentarformular gepostet wird, speichert Netlify diesen nicht nur für uns, sondern kann auch eine Benachrichtigung senden. Das könnte sein

• eine E-Mail
• eine Slack-Benachrichtigung
• ein Webhook unserer Wahl.

Dies gibt uns die Möglichkeit, Dinge ein wenig zu automatisieren.

Neue Einreichungen führen zu einer Benachrichtigung, die auf Slack gepostet wird. Wir sehen dort direkt in unserem Slack-Client, was eingereicht wurde und für welche Seite.

Um die Dinge noch eleganter zu gestalten, können wir diese Benachrichtigung ein wenig bearbeiten, um einige Aktionsschaltflächen einzufügen. Eine Schaltfläche zum Löschen des Kommentars, eine zum Genehmigen. Das Genehmigen eines neuen Kommentars über eine Slack-Benachrichtigung auf dem Handy, während Sie Bus fahren, fühlt sich gut an.

Wir können diese Schaltflächen nicht zum Laufen bringen, ohne ein kleines Stück Logik auszuführen, was wir in einer Lambda-Funktion tun können. Netlify hat kürzlich Unterstützung für Lambda-Funktionen hinzugefügt, wodurch das Schreiben und Bereitstellen von Lambdas Teil desselben Bereitstellungsprozesses wird. Sie müssen sich nicht mehr in den AWS-Konfigurationseinstellungen von Amazon herumwühlen.

Wir werden eine Lambda-Funktion verwenden, um einige Schaltflächen zu unserer Slack-Benachrichtigung hinzuzufügen, und eine weitere Lambda-Funktion, um die Aktionen des Klickens auf eine dieser Schaltflächen zu verarbeiten.

Kommentare in die Website integrieren

Nachdem ein neu genehmigter Kommentar in unser Formular für genehmigte Kommentare gestellt wurde, greifen wir wieder auf die von Netlify bereitgestellten Auslöser für das Einreichungsereignis zurück. Jedes Mal, wenn etwas in das Formular für genehmigte Kommentare eingetragen wird, möchten wir es in die Website integrieren, sodass Netlify unsere Website automatisch neu erstellt und bereitstellt.

Die meisten Static Site Generatoren haben eine Art von Datendateien. Jekyll verwendet Dateien in einem Verzeichnis [_data], Hugo hat ein ähnliches Datenverzeichnis. Dieses Beispiel verwendet Eleventy als seinen Static Site Generator, der ein ähnliches Konzept hat. Wir werden uns dies zunutze machen.

Jedes Mal, wenn wir unseren Website-Build ausführen, sei es in unserer lokalen Entwicklungsumgebung oder innerhalb von Netlify durch deren automatisierte Builds, ist der erste Schritt, alle unsere externen Daten in lokale Datendateien zu ziehen, die unser SSG dann verwenden kann. Dies tun wir mit einem Gulp-Task.

Mit einer Datei `comments.json`, die wir aus einem Aufruf der Formular-Einreichungs-API von Netlify gefüllt haben, die alle unsere genehmigten Kommentare abgerufen hat, kann unser SSG nun die Website wie gewohnt erstellen und die korrekten Kommentare direkt in das HTML unserer Seiten einbacken.

Einige Vorteile

Das war zwar unterhaltsam, aber warum die Mühe?

Ja, Sie könnten etwas wie Disqus verwenden, um Kommentare zu einer statisch gehosteten Website mit ein paar Zeilen JavaScript hinzuzufügen. Aber das fügt eine externe JavaScript-Abhängigkeit hinzu und führt dazu, dass die Kommentare zu Ihrem Inhalt weit weg vom Inhalt selbst leben. Und sie sind erst verfügbar, nachdem das JavaScript geladen wurde, die Daten abgerufen und dann in Ihre Website eingefügt hat.

Während diese Methode zu Kommentaren führt, die direkt in den Inhalt Ihrer Website eingebettet sind. Sie erscheinen in Suchergebnissen bei Google und werden als Teil Ihrer Website geladen, ohne dass clientseitiges JavaScript benötigt wird.

Noch besser, sie stehen Ihnen zur Verfügung, um sie zusammen mit dem Rest Ihres Inhalts direkt in Ihr Code-Repository einzuschecken, was Ihnen in Zukunft mehr Sicherheit und Portabilität gibt.

Die Beispiel-Website und der gesamte Code dafür stehen zur Erkundung bereit. Sie können gerne Kommentare einreichen (obwohl der arme Phil alle Kommentare auf dieser Beispiel-Website moderieren müsste, bevor sie erscheinen, aber das würde ihn nur geliebt fühlen lassen).

Noch besser, Sie können dieses Beispiel klonen und Ihre eigene Version mit nur wenigen Klicks auf Netlify bereitstellen. Die Beispiel-Website erklärt, wie.

Zeig mir jetzt hinter die Kulissen!

Wenn Sie sehen möchten, wie die Dinge für den Moderator einer Website, die dieses System verwendet, ablaufen, ohne eine eigene Kopie zu erwerben, führt dieses kurze Video Sie durch einen Kommentar, der erstellt, moderiert und in die Website integriert wird.