// app.jsx — main app v2
const { useState: useSApp, useEffect: useEApp, useMemo: useMApp } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"brandName": "Investire Ragionato",
"accent": "blue"
}/*EDITMODE-END*/;
function useTweaks(defaults) {
const [tweaks, setTweaks] = useSApp(defaults);
const setTweak = (k, v) => {
let edits;
if (typeof k === 'object') edits = k;
else edits = { [k]: v };
setTweaks((t) => ({ ...t, ...edits }));
try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*'); } catch {}
};
return [tweaks, setTweak];
}
function parseHash() {
const hash = window.location.hash.replace(/^#\/?/, '');
if (!hash || hash === 'home') return { view: 'home' };
if (hash === 'path') return { view: 'path' };
if (hash === 'library') return { view: 'library' };
if (hash === 'about') return { view: 'about' };
if (hash === 'glossario') return { view: 'glossario' };
if (hash.startsWith('article/')) return { view: 'article', id: hash.slice(8) };
return { view: 'home' };
}
function routeToHash(r) {
if (!r || r.view === 'home') return '#/home';
if (r.view === 'article') return `#/article/${r.id}`;
return `#/${r.view}`;
}
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [route, setRoute] = useSApp(parseHash);
const [editOpen, setEditOpen] = useSApp(false);
const [progressData, progressApi] = useProgress();
const [darkMode, setDarkMode] = useSApp(() => {
try { return localStorage.getItem('ir_dark') === '1'; } catch { return false; }
});
const toggleDark = () => setDarkMode((d) => {
const next = !d;
try { localStorage.setItem('ir_dark', next ? '1' : '0'); } catch {}
return next;
});
// Sync dark class to so body background + any out-of-app elements work
useEApp(() => {
document.body.classList.toggle('dark', darkMode);
document.documentElement.classList.toggle('dark', darkMode);
}, [darkMode]);
const chapters = window.SF_DATA.CHAPTERS;
const totalArticles = chapters.reduce((n, c) => n + c.articles.length, 0);
// Sync hash → route on back/forward
useEApp(() => {
const onHashChange = () => setRoute(parseHash());
window.addEventListener('hashchange', onHashChange);
return () => window.removeEventListener('hashchange', onHashChange);
}, []);
// Edit mode protocol
useEApp(() => {
const onMsg = (e) => {
if (e.data?.type === '__activate_edit_mode') setEditOpen(true);
if (e.data?.type === '__deactivate_edit_mode') setEditOpen(false);
};
window.addEventListener('message', onMsg);
try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
return () => window.removeEventListener('message', onMsg);
}, []);
const onNav = (r) => {
window.location.hash = routeToHash(r);
setRoute(r);
window.scrollTo({ top: 0, behavior: 'instant' });
};
const onArticle = (id) => onNav({ view: 'article', id });
const onChapter = (id) => {
setRoute({ view: 'path' });
window.scrollTo({ top: 0 });
setTimeout(() => {
const el = document.querySelector(`[data-chapter-anchor="${id}"]`);
if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
}, 50);
};
const className = `app accent-${tweaks.accent}${darkMode ? ' dark' : ''}`;
return (
{route.view === 'home' && }
{route.view === 'path' && }
{route.view === 'about' && }
{route.view === 'library' && }
{route.view === 'article' && }
{route.view === 'glossario' && }
{editOpen && (
{
setEditOpen(false);
try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch {}
}} />
)}
);
}
function TweaksPanel({ tweaks, setTweak, resetProgress, onClose }) {
return (
Tweaks
setTweak('accent', v)} options={[
{ id: 'blue', label: 'Blu' },
{ id: 'violet', label: 'Viola' },
{ id: 'emerald', label: 'Verde' },
{ id: 'ink', label: 'Inchiostro' },
]} />
);
}
function Section({ label, children }) {
return (
);
}
function Radio({ value, onChange, options }) {
return (
{options.map((o) => (
))}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();