/* global React, ReactDOM */
const { useState: useStateApp, useEffect: useEffectApp } = React;
function App() {
const [tweaks, setTweaks] = useStateApp(window.__TWEAKS || {});
const setTweak = (k, v) => {
const next = { ...tweaks, [k]: v };
setTweaks(next);
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]:v}}, '*');
};
// Apply tweaks to
useEffectApp(() => {
document.documentElement.dataset.palette = tweaks.palette || 'rozenhout';
document.documentElement.dataset.dark = tweaks.dark ? 'true' : 'false';
if (tweaks.serifHeadline) {
document.documentElement.style.setProperty('--font-serif', `"${tweaks.serifHeadline}", serif`);
// load google font on the fly
const id = 'tweak-font-' + tweaks.serifHeadline.replace(/\s/g,'-');
if (!document.getElementById(id)) {
const l = document.createElement('link');
l.id = id;
l.rel = 'stylesheet';
l.href = `https://fonts.googleapis.com/css2?family=${tweaks.serifHeadline.replace(/ /g,'+')}:ital,wght@0,300;0,400;1,300;1,400&display=swap`;
document.head.appendChild(l);
}
}
}, [tweaks]);
// Nav scroll
useEffectApp(() => {
// handled by Nav component
}, []);
// Reveal on scroll
useEffectApp(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: .12 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
// ESC closes rust overlay
useEffectApp(() => {
const onKey = (e) => {
if (e.key === 'Escape') {
document.querySelectorAll('.rust-overlay.open').forEach(el => {
// synthetic close via click on button
const btn = el.querySelector('.close');
if (btn) btn.click();
});
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
return (
<>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();