Statamic-Addon

Statamic ist ein fantastisches CMS mit einer wunderbaren Community. Es ist super entwicklerfreundlich und leicht mit Add-ons erweiterbar. Wenn Sie dies lesen, wissen Sie Statamic. Allerdings beschränken sich die Möglichkeiten bei der Einbindung von Videos entweder auf die Nutzung von YouTube oder die direkte Verknüpfung mit einer MP4-Datei. Interessanterweise enthält sogar die eigene Website von Statamic einen Trick, wenn es um die Präsentation ihrer Videofunktionen geht.

Was tun Sie also, wenn Sie ein Content-Ersteller sind, der Videos ernst nimmt und ein großartiges Videoerlebnis bieten möchte, ohne ein eigenes Add-on zu erstellen? Mit dem mave.io Statamic-Add-on sind Sie an der richtigen Adresse. Mit diesem Add-on können Sie Ihr Mave-Konto nahtlos in Statamic integrieren, Videos direkt im Control Panel hochladen und den Mave Player auf Ihrer Website verwenden.

Die Lösung

Wenn Sie mehr am Endergebnis interessiert sind, können Sie gerne zum Schluss dieses Artikels springen. Aber wenn Sie neugierig sind, wie es aufgebaut ist, tauchen wir ein.

Das Addon selbst ist nicht besonders komplex, es gibt lediglich zwei Anforderungen:

• Unsere Komponentenbibliothek;
• Und eine Bibliothek zum Generieren eines JWT.

Wenn Sie mit JWT nicht vertraut sind, machen Sie sich keine Sorgen. JWT (JSON Web Token) ist ein einfacher Webstandard zur sicheren Übertragung von Informationen zwischen zwei Parteien als JSON-Objekt. Es stellt die Datenintegrität sicher, indem es sie mit einem geheimen Schlüssel signiert und so sicherstellt, dass die Informationen nicht manipuliert wurden.

In unserem Fall signieren wir es mit dem in Ihrem Mave-Konto generierten API-Schlüssel, den Sie hier finden. Sie müssen ein JWT nur zum Hochladen generieren, um unbefugte Uploads zu verhindern, und zum Rendern einer Liste, um den Zugriff auf Ihr Mave-Konto zu sichern. Sowohl <mave-upload> als auch <mave-list> sind Komponenten, die im Statamic-Add-on verwendet werden.

Beginnen wir mit der Integration des Elements <mave-upload> und der Generierung des Attributs token (dem JWT). Je nachdem, wohin der Benutzer hochladen soll, legen Sie das Attribut sub im JSON-Objekt fest. Es könnte sich um das Stammverzeichnis Ihres Bereichs handeln (mit der Bereichs-ID sub), innerhalb einer Sammlung (mit der Sammlungs-ID sub) oder für eine bestimmte Videoeinbettung (mit der Einbettungs-ID sub, was auch das Ersetzen beim erneuten Hochladen ermöglicht). Sie sollten außerdem ein exp-Attribut festlegen, das die Ablaufzeit des Tokens als Unix-Zeitstempel angibt. Dadurch wird sichergestellt, dass das Token nach Ablauf der festgelegten Zeit ungültig wird, wenn jemand böswillig an das Token gelangt.

Mithilfe Ihrer bevorzugten Bibliothek können Sie ein JWT mit der Nutzlast generieren:

{
  "sub": "XD9HPRtkDDmENLeVy9ripU", // space, collection or embed can be specified
  "exp": 1704112620 // until when the user can upload
}

Signieren Sie dann diese Nutzlast mit Ihrem API-Schlüssel. Stellen Sie dieses Token dem Frontend (in unserem Fall Statamic) zur Verfügung und wenden Sie es als token-Attribut auf das Upload-Element (oder die Listenkomponente) an:

<mave-upload token="eyJxxx"></mave-upload>

Das Ergebnis

Mit etwas JavaScript-Magie können Sie ein Modal erstellen, das zwischen einer Sammlung (bereits hochgeladene Elemente) und der Upload-Komponente wechselt. Das Ergebnis ist:

Installation

Zur Installation führen Sie einfach den folgenden Befehl in Ihrem Projektstammverzeichnis aus:

composer require maveio/statamic-mave

Fügen Sie Ihrer .env-Datei Folgendes hinzu: den mave API-Schlüssel, die Space-, Sammlungs- oder Einbettungs-ID als MAVE_SUB und optional ein Thema:

MAVE_KEY=
MAVE_SUB=
MAVE_THEME=
MAVE_UPLOAD=true

Als letzten Schritt fügen Sie Folgendes zu Ihrer Antlers-Vorlage hinzu:

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-player embed="{{ mave_field }}"></mave-player>

Das von uns erstellte Add-on ist Open Source und kann auf Github gefunden werden.

Fazit

Herzlichen Glückwunsch, dass Sie so weit gekommen sind! Um Ihre Integration von mave in Ihre Statamic-Website zu feiern, möchten wir Ihnen einen Rabatt von 50 % auf Ihre ersten drei Monate anbieten. Geben Sie nach der Anmeldung einfach den Code STATAMIC50 bei der Tarifauswahl ein (Gutschein gültig bis Ende Juli). Wir hoffen, dass Ihnen das Add-on gefällt. Wenn Sie Fragen haben, zögern Sie bitte nicht, uns zu kontaktieren.

Viel Spaß beim Codieren!