// app.jsx — root of itsamod.dev. // Fetches content.json once, then mounts the real app with `content.defaults` // as the initial tweak state. Visitor changes persist in localStorage so // theme/accent stick across reloads on the deployed site too. const TWEAK_FALLBACK = /*EDITMODE-BEGIN*/{ "accent": "#c2410c", "theme": "system", "fontPair": "editorial", "density": "regular" }/*EDITMODE-END*/; const ACCENT_DARK_MAP = { "#c2410c": "#ef885a", // rust "#2563eb": "#7aa7ff", // electric blue "#15803d": "#5fd49a", // forest "#9333ea": "#c79cff", // royal purple }; const PREFS_KEY = 'itsamod.prefs.v1'; const TweakCtx = React.createContext({ t: TWEAK_FALLBACK, setTweak: () => {} }); const useTweak = () => React.useContext(TweakCtx); window.TweakCtx = TweakCtx; window.useTweak = useTweak; // ── Loader ────────────────────────────────────────────────────────── function App() { const [content, setContent] = React.useState(null); const [contentError, setContentError] = React.useState(null); React.useEffect(() => { fetch('content.json', { cache: 'no-cache' }) .then((r) => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); }) .then((data) => { setContent(data); if (data?.meta?.title) document.title = data.meta.title; const metaDesc = document.querySelector('meta[name="description"]'); if (metaDesc && data?.meta?.description) { metaDesc.setAttribute('content', data.meta.description); } }) .catch((err) => setContentError(String(err))); }, []); if (contentError) { return (

Couldn't load content.json

{contentError}
); } if (!content) return null; return ; } // ── Core ──────────────────────────────────────────────────────────── function AppCore({ content }) { // Initial tweak state: content.defaults → overridden by anything the // visitor has saved in localStorage. content.json is the *author's* // default; localStorage is the *visitor's* preference. const initial = React.useMemo(() => { const stored = (() => { try { return JSON.parse(localStorage.getItem(PREFS_KEY) || '{}'); } catch (_) { return {}; } })(); return { ...TWEAK_FALLBACK, ...(content.defaults || {}), ...stored, }; }, [content]); const [t, setTweakRaw] = useTweaks(initial); // Wrap setTweak to ALSO persist to localStorage on every change. The host // postMessage already keeps the EDITMODE block in sync for author preview; // localStorage covers the deployed site for visitors. const setTweak = React.useCallback((keyOrEdits, val) => { const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null ? keyOrEdits : { [keyOrEdits]: val }; setTweakRaw(edits); try { const prev = JSON.parse(localStorage.getItem(PREFS_KEY) || '{}'); localStorage.setItem(PREFS_KEY, JSON.stringify({ ...prev, ...edits })); } catch (_) {} }, [setTweakRaw]); // Apply tweak values as data-attrs / CSS vars on . React.useEffect(() => { const root = document.documentElement; root.setAttribute('data-fontpair', t.fontPair); root.setAttribute('data-density', t.density); if (t.theme === 'system') root.removeAttribute('data-theme'); else root.setAttribute('data-theme', t.theme); const lightAccent = t.accent; const darkAccent = ACCENT_DARK_MAP[t.accent] || lightenForDark(t.accent); const effectiveDark = t.theme === 'dark' || (t.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); const acc = effectiveDark ? darkAccent : lightAccent; root.style.setProperty('--accent', acc); root.style.setProperty('--accent-soft', effectiveDark ? hexToRgba(darkAccent, 0.18) : hexToRgba(lightAccent, 0.10)); }, [t.accent, t.theme, t.fontPair, t.density]); // Re-apply accent on system theme flip (only matters in system mode). React.useEffect(() => { if (t.theme !== 'system') return; const mq = window.matchMedia('(prefers-color-scheme: dark)'); const handler = () => { const darkAccent = ACCENT_DARK_MAP[t.accent] || lightenForDark(t.accent); const acc = mq.matches ? darkAccent : t.accent; document.documentElement.style.setProperty('--accent', acc); document.documentElement.style.setProperty('--accent-soft', mq.matches ? hexToRgba(darkAccent, 0.18) : hexToRgba(t.accent, 0.10)); }; mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, [t.accent, t.theme]); const accentOptions = content.defaults?.accentOptions || ['#c2410c','#2563eb','#15803d','#9333ea']; return (