feat: implement instant live DOM rendering and debounced auto-save to backend

This commit is contained in:
Daniel S
2026-08-10 00:21:22 +02:00
parent 4b7f3f554b
commit 9c166817fa
4 changed files with 699 additions and 242 deletions

View File

@@ -86,9 +86,59 @@
"sectionTitle": "Unsere Highlights",
"sectionSubtitle": "Modernste Features im Überblick"
}
},
{
"id": "sec_contactsection_1786313966524",
"type": "ContactSection",
"settings": {
"title": "Kontaktieren Sie uns",
"subtitle": "Wir antworten innerhalb von 24 Stunden."
}
},
{
"id": "sec_bentogrid_1786313967196",
"type": "BentoGrid",
"settings": {
"sectionTitle": "Unsere Highlights",
"sectionSubtitle": "Modernste Features im Überblick"
}
},
{
"id": "sec_bentogrid_1786313968059",
"type": "BentoGrid",
"settings": {
"sectionTitle": "Unsere Highlights",
"sectionSubtitle": "Modernste Features im Überblick"
}
},
{
"id": "sec_contactsection_1786313968892",
"type": "ContactSection",
"settings": {
"title": "Kontaktieren Sie uns",
"subtitle": "Wir antworten innerhalb von 24 Stunden."
}
},
{
"id": "sec_bentogrid_1786313969624",
"type": "BentoGrid",
"settings": {
"sectionTitle": "Unsere Highlights",
"sectionSubtitle": "Modernste Features im Überblick"
}
},
{
"id": "sec_herosection_1786313970384",
"type": "HeroSection",
"settings": {
"title": "Neue Überschrift",
"subtitle": "Beschreibungstext hier eingeben.",
"ctaPrimaryText": "Jetzt anfragen",
"ctaPrimaryLink": "#contact"
}
}
]
}
],
"updated_at": "2026-08-09T22:16:29.073Z"
"updated_at": "2026-08-09T22:21:08.945Z"
}

Binary file not shown.

View File

@@ -21,13 +21,39 @@
const { type, payload } = event.data || {};
if (type === 'THEME_UPDATE') {
// Injiziert CSS-Variablen live in den DOM (<head>)
const root = document.documentElement;
if (payload.colors) {
Object.entries(payload.colors).forEach(([key, val]) => {
root.style.setProperty(`--${key}`, val);
});
}
// Live Section DOM Patching
if (payload.sectionId && payload.settings) {
const secElement = document.querySelector(`[data-section-id="${payload.sectionId}"], #${payload.sectionId}`) || document.querySelector('section');
if (secElement) {
const { title, subtitle, cta_text, bg_color, accent_color } = payload.settings;
if (title !== undefined) {
const h1OrH2 = secElement.querySelector('h1, h2, h3');
if (h1OrH2) h1OrH2.textContent = title;
}
if (subtitle !== undefined) {
const p = secElement.querySelector('p');
if (p) p.textContent = subtitle;
}
if (cta_text !== undefined) {
const btn = secElement.querySelector('a, button');
if (btn) btn.textContent = cta_text;
}
if (bg_color !== undefined && bg_color !== '') {
secElement.style.backgroundColor = bg_color;
}
if (accent_color !== undefined && accent_color !== '') {
secElement.style.setProperty('--accent-color', accent_color);
}
}
}
}
if (type === 'RELOAD_CANVAS') {

File diff suppressed because it is too large Load Diff