Technische Dokumentation: Volkers CMS 4.0

1. Systemarchitektur

Das System basiert auf einer Client-Server-Architektur. Die Bearbeitung findet clientseitig im Browser-DOM statt, während die Persistenz (Speicherung) serverseitig über JSON-Dateien realisiert wird[cite: 1].

Frontend-Logik: JavaScript-basiertes In-Place-Editing.
Datenhaltung: Flache JSON-Dateien (content_[page].json) ermöglichen ein wartungsfreies, datenbankloses System.
Server-Schnittstelle: PHP-Skript (save_content.php) übernimmt die Validierung und das Schreiben der Dateien.

2. DOM-Manipulation & Edit-Modus

Das CMS manipuliert die laufende HTML-Struktur, ohne den Server-Quelltext während der Bearbeitung zu verändern[cite: 1]:

Edit-Status: Elemente werden per contentEditable="true" für den Nutzer bearbeitbar gemacht.
Interaktions-Shielding: Über Video- und Bildelemente werden transparente div-Layer ("Shields") gelegt, um Standard-Klickereignisse abzufangen und den CMS-Upload-Dialog zu triggern.
Styling: Änderungen an Farben werden durch das Setzen von CSS-Variablen (z.B. --nav-brand-color) in Echtzeit in den DOM injiziert.

3. SEO-Stabilität

Das CMS ist SEO-stabil, da Googlebot als moderner "Render-Bot" agiert:

Rendering-Prozess: Googlebot führt das JavaScript aus, welches die JSON-Daten lädt und in den DOM einfügt.
Sichtbarkeit: Nach dem Speichern sind die neuen Texte Bestandteil der JSON-Dateien, die beim Aufruf der Seite in das finale HTML gerendert werden.
SEO-Status: Da Google Inhalte nach dem JavaScript-Rendering indexiert, werden Änderungen korrekt erfasst, solange das Skript nach dem Speichern fehlerfrei ausgeführt wird.

4. Workflow & Bedienung

Panel-Steuerung:

Öffnen: Strg + Doppelklick oder 4-facher Tap auf freie Stelle.
Schließen: Klick auf das ×-Symbol. Dies beendet den Edit-Modus durch enablePageEditing(false), entfernt Edit-Klassen und gibt das DOM für die normale Nutzung frei.
Persistenz: Nur durch Klick auf 💾 "Diese Seite speichern" werden die Änderungen serverseitig fixiert.