diff --git a/.gitignore b/.gitignore
index a41d5e8..1f3bf13 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,7 @@ pnpm-debug.log*
# coverage report
coverage/
+# draft files
+*.draft.json
+
+
diff --git a/public/js/editor-bridge.js b/public/js/editor-bridge.js
index 874e3df..4c32fc0 100644
--- a/public/js/editor-bridge.js
+++ b/public/js/editor-bridge.js
@@ -1,56 +1,27 @@
// public/js/editor-bridge.js
-// Bridge between the editor UI (parent) and the live preview iframe.
-// Listens for messages from the parent and applies updates to the preview.
-
(function () {
- // Store current config state for quick reference
- let siteConfig = {};
- let themeConfig = {};
+ // Bridge nur im Preview-Modus aktivieren
+ const urlParams = new URLSearchParams(window.location.search);
+ if (urlParams.get('preview') !== 'draft') return;
- // Helper: apply theme preset CSS variables (assumes theme presets expose a JSON of variables)
- function applyTheme(presetKey) {
- fetch(`/theme/${presetKey}.json`)
- .then((r) => r.json())
- .then((vars) => {
- const root = document.documentElement;
- Object.entries(vars).forEach(([k, v]) => {
- root.style.setProperty(`--${k}`, v);
- });
- })
- .catch(() => console.warn('Theme preset not found:', presetKey));
- }
+ console.log('[N&D Editor Bridge] Active on preview canvas');
- // Helper: re-render the preview by injecting the updated HTML (simple approach).
- function reloadPreview() {
- // For SSR Astro we cannot re‑render inside the iframe without a full reload.
- // Trigger a reload – the parent will send the latest config on load.
- window.location.reload();
- }
-
- // Message dispatcher
window.addEventListener('message', (event) => {
const { type, payload } = event.data || {};
- switch (type) {
- case 'load':
- siteConfig = payload || {};
- // initial load – could trigger a render hook if needed
- break;
- case 'add':
- // For simplicity we just reload – real implementation would manipulate DOM.
- reloadPreview();
- break;
- case 'preset':
- themeConfig.activePreset = payload;
- applyTheme(payload);
- break;
- case 'update':
- // payload contains partial siteConfig changes
- Object.assign(siteConfig, payload);
- reloadPreview();
- break;
- default:
- // ignore unknown messages
- break;
+
+ if (type === 'THEME_UPDATE') {
+ // Injiziert CSS-Variablen live in den DOM ()
+ const root = document.documentElement;
+ if (payload.colors) {
+ Object.entries(payload.colors).forEach(([key, val]) => {
+ root.style.setProperty(`--${key}`, val as string);
+ });
+ }
+ }
+
+ if (type === 'RELOAD_CANVAS') {
+ // Sanfter Reload des Iframes bei Strukturänderungen
+ window.location.reload();
}
});
})();
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 06a8a20..8000625 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -32,6 +32,8 @@ const { title, description = "Professionelles Webdesign & moderne Websites." } =
{title}
+
+