/* Tweaks panel for the EHC Africa West homepage. Drives data-attributes + CSS vars that the page CSS responds to. */ const { useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "warm", "hero": "split", "map": "filled", "showContext": true, "headline": "Carrying Christ to everyone, everywhere, in every generation.", "highlight": "everyone, everywhere" }/*EDITMODE-END*/; function applyHeadline(full, hl) { const el = document.querySelector('.hero h1'); if (!el) return; const safe = (s) => s.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c])); let html = safe(full); if (hl && full.includes(hl)) { html = safe(full).replace(safe(hl), '' + safe(hl) + ''); } el.innerHTML = html; // keep the i18n key from clobbering the custom headline on EN if (window.DICT && window.DICT.en) window.DICT.en['hero.title'] = html; } function TweaksApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.documentElement.dataset.palette = t.palette; }, [t.palette]); useEffect(() => { document.documentElement.dataset.hero = t.hero; }, [t.hero]); useEffect(() => { document.documentElement.dataset.map = t.map; }, [t.map]); useEffect(() => { document.documentElement.dataset.noContext = String(!t.showContext); }, [t.showContext]); useEffect(() => { // only apply custom headline while in English if ((window.__LANG || 'en') === 'en') applyHeadline(t.headline, t.highlight); }, [t.headline, t.highlight]); return ( setTweak('palette', v)} />

warm = clay + gold · restrained = brand sand + sage · energetic = bright CTA green

setTweak('hero', v)} /> setTweak('map', v)} /> setTweak('showContext', v)} /> setTweak('headline', v)} /> setTweak('highlight', v)} /> ); } ReactDOM.createRoot(document.getElementById('tweaks-root')).render();