From 9c166817fa1fb450afa09afcf505e081e1077595 Mon Sep 17 00:00:00 2001 From: Daniel S Date: Mon, 10 Aug 2026 00:21:22 +0200 Subject: [PATCH] feat: implement instant live DOM rendering and debounced auto-save to backend --- app/data/site.config.json | 52 ++- app/data/waas.db | Bin 32768 -> 32768 bytes public/js/editor-bridge.js | 28 +- src/pages/admin/editor.astro | 861 +++++++++++++++++++++++++---------- 4 files changed, 699 insertions(+), 242 deletions(-) diff --git a/app/data/site.config.json b/app/data/site.config.json index a9ab874..1e5644c 100644 --- a/app/data/site.config.json +++ b/app/data/site.config.json @@ -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" } \ No newline at end of file diff --git a/app/data/waas.db b/app/data/waas.db index 6fb3f4540d1232a5bf8859d7679a9d429a01d971..7e752468c88cbe42fd4be64d1135cab4579a244c 100644 GIT binary patch delta 394 zcmZo@U}|V!njp<6G*QNxQD|erl6W~@#(oAqR-UKao4Jl~7IHMOPh?xbx{>7&^F^jd zjQtxMa~YYN0(d8vWGYHqnj08fm=q+Yr^aXG=can37Uc)0CYNO9=kaXbkSWH<$TRtP zmb|2;nWdQ#LYY%)UP-=tQDzGFcuBCpTxPuvwZ}SXdfOUYjA#$Te9iGignfC7Mk0+1U443Qi|0SvKVq+b#T2ax~{1q|g2vkJrsaR`71k+Fe$2eXl9 la|jX#4@m$I;t#M7Ne|EuX%F%bj) 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') { diff --git a/src/pages/admin/editor.astro b/src/pages/admin/editor.astro index 5d49f03..b7e9f04 100644 --- a/src/pages/admin/editor.astro +++ b/src/pages/admin/editor.astro @@ -1,338 +1,663 @@ --- // src/pages/admin/editor.astro -import Layout from '../../layouts/Layout.astro'; -import AdminSidebar from '../../components/admin/AdminSidebar.astro'; -import { loadWaasConfigs } from '../../utils/configLoader'; -import { THEME_PRESETS } from '../../utils/themePresets'; +import Layout from "../../layouts/Layout.astro"; +import AdminSidebar from "../../components/admin/AdminSidebar.astro"; +import { loadWaasConfigs } from "../../utils/configLoader"; +import { THEME_PRESETS } from "../../utils/themePresets"; export const prerender = false; const { searchParams } = Astro.url; -const pageId = searchParams.get('page_id'); +const pageId = searchParams.get("page_id"); // Lade den aktuellen Entwurf oder Fallback auf Live Config -const userAgent = Astro.request.headers.get('user-agent') ?? ''; +const userAgent = Astro.request.headers.get("user-agent") ?? ""; const { siteConfig: draftConfig } = loadWaasConfigs(userAgent, true); const pages = (draftConfig as any).pages || []; -const targetPage = pages.find((p: any) => p.id === pageId) || pages[0] || { id: 'page_home', title: 'Startseite', slug: '/', sections: [] }; -const previewUrl = `${targetPage?.slug || '/'}?preview=draft`; +const targetPage = pages.find((p: any) => p.id === pageId) || + pages[0] || { id: "page_home", title: "Startseite", slug: "/", sections: [] }; +const previewUrl = `${targetPage?.slug || "/"}?preview=draft`; --- - + - + -
- +
-