Live-Editor einrichten
So aktivierst du den Live-Editor. Damit bearbeitest du Seiten direkt im Browser, und jedes Speichern landet als Commit in deinem Repository. Wie der Editor arbeitet, erfährst du unter Live-Editor verstehen.
Voraussetzungen
- easyWebsite ab Version 3.0.0 (CI-Komponente
md-to-web@v4) - Ein Projekt auf gitlab.opencode.de
- Die Rolle Developer, Maintainer oder Owner im Projekt, auch über eine Gruppe vererbt
- Ein eigener CORS-Proxy, solange gitlab.opencode.de für Git keine CORS-Header sendet (siehe CORS-Proxy bereitstellen)
Easy Mode
Aktiviere den Editor in der .gitlab-ci.yml:
Nach dem nächsten Pipeline-Lauf erreichst du den Editor unter /preview/ deiner Webseite. Die Anmeldung läuft über dein openCode-Konto.
Parameter
| Parameter | Default | Beschreibung |
|---|---|---|
enable-live-editor | "false" | Fügt die Editor-Seite /preview/ und die Anmeldeseite /oauth2/callback/ hinzu |
private-mode | "false" | Veröffentlicht nur den Editor, keine Inhaltsseiten. Schaltet den Editor automatisch ein |
connected-repo | $CI_PROJECT_URL | Repository, das der Editor liest und beschreibt |
cors-proxy | "" | URL des CORS-Proxys für Clone und Push. Leer spricht der Editor GitLab direkt an, das funktioniert nur, wenn der Git-Server CORS erlaubt |
editor-subpath | "" | Ordner im Repository, auf den der Editor beschränkt ist. Leer bedeutet md-path |
editor-branch | $CI_DEFAULT_BRANCH | Branch, den der Editor liest und beschreibt |
Privater Modus
Mit private-mode: "true" baut die Pipeline keine Inhaltsseiten. Die Startseite zeigt nur eine Anmeldung, und lesen können ausschließlich angemeldete Projektmitglieder mit Developer-Rolle oder höher.
Der private Modus ist keine Verschlüsselung. Die veröffentlichte Seite enthält schlicht keine Inhalte, sie liegen weiterhin nur im Repository.
Developer Mode
Lege die Editor-Seite pages/preview.tsx an:
Lege die Anmeldeseite pages/oauth2/callback.tsx an:
Der Editor bringt sein eigenes Layout mit. Rendere /preview in der pages/_app.tsx deshalb mit LayoutProviders statt Layout:
CORS-Proxy bereitstellen
Der Editor spricht die Git-Schnittstelle (Smart HTTP) von gitlab.opencode.de direkt aus dem Browser an. Auf den Endpunkten info/refs, git-upload-pack und git-receive-pack sendet GitLab keine CORS-Header, deshalb blockiert der Browser diese Anfragen. Das ist eine bekannte Einschränkung von GitLab (gitlab-org/gitlab#20590).
Bis gitlab.opencode.de CORS für diese Endpunkte erlaubt, leitet ein CORS-Proxy Clone und Push weiter. Danach lässt du cors-proxy leer, und der Editor spricht GitLab ohne Umweg an.
Für die lokale Entwicklung reicht:
Der Proxy lauscht dann auf http://localhost:9999. Für die veröffentlichte Webseite betreibst du ihn auf einem eigenen Server.
Der Proxy leitet jede Git-Anfrage mitsamt deinem Anmelde-Token weiter. Nutze deshalb nicht den öffentlichen Proxy cors.isomorphic-git.org, sondern einen, den du selbst betreibst.
Ergebnis prüfen
Öffne /preview/, melde dich an und wähle eine Seite im Dateibaum. Ändere einen Satz und klicke auf Save. Im Repository erscheint ein neuer Commit, und die Pipeline veröffentlicht die Änderung.
Nächste Schritte
- Live-Editor verstehen: Speichern, Prüfung und Grenzen
- CI/CD-Komponenten: alle Easy-Mode-Parameter