// app.jsx — root for いつき建築 site
const { useEffect, useState } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "paper",
"accent": "indigo",
"heading": "mincho",
"heroLayout": "fullbleed",
"verticalMessage": true,
"noise": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [scrolled, setScrolled] = useState(false);
// Apply palette/accent/heading to
useEffect(() => {
const h = document.documentElement;
h.dataset.palette = t.palette;
h.dataset.accent = t.accent;
h.dataset.heading = t.heading;
}, [t.palette, t.accent, t.heading]);
// Noise on/off
useEffect(() => {
document.body.classList.toggle("noise", !!t.noise);
}, [t.noise]);
// Sticky nav state
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Scroll progress bar
const [progress, setProgress] = useState(0);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setProgress(max > 0 ? window.scrollY / max : 0);
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
{/* Scroll progress */}
setTweak("palette", v)}
/>
setTweak("accent", v)}
/>
setTweak("heading", v)}
/>
setTweak("heroLayout", v)}
/>
setTweak("verticalMessage", v)}
/>
setTweak("noise", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();