// app.jsx — router + state + tweaks // Set to true ONLY during design review. Production deploy should keep this false // so the floating Tweaks panel is hidden from end users. const SHOW_TWEAKS = false; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "direction": "A", "locale": "en", "dark": false }/*EDITMODE-END*/; // Full SEO locale list (80) for URL detection; UI locale picker still uses LOCALES. const LOCALE_CODES = (typeof LOCALE_CODES_ALL !== 'undefined' && LOCALE_CODES_ALL.length) ? LOCALE_CODES_ALL : ['en','id','ja','ko','it','fr','de','es']; // Initial locale = window.__INITIAL_LOCALE (injected by Worker) OR first path segment OR 'en'. function initialLocale() { if (typeof window.__INITIAL_LOCALE === 'string' && LOCALE_CODES.includes(window.__INITIAL_LOCALE)) { return window.__INITIAL_LOCALE; } const seg = (location.pathname.split('/').filter(Boolean)[0] || '').toLowerCase(); return LOCALE_CODES.includes(seg) ? seg : 'en'; } // Parse hash routes. Supports: // / → { locale: default, path: '/' } // //... → { locale, path: '/...' } // / → { locale: default, path: '/anything' } function parseHash(defaultLocale = 'en') { const h = (location.hash || '').replace(/^#/, '') || '/'; const parts = h.split('/').filter(Boolean); if (parts.length === 0) return { locale: defaultLocale, path: '/' }; if (LOCALE_CODES.includes(parts[0])) { const rest = '/' + parts.slice(1).join('/'); return { locale: parts[0], path: rest === '/' ? '/' : rest }; } return { locale: defaultLocale, path: '/' + parts.join('/') }; } function App() { const startLocale = initialLocale(); const [tweaks, setTweak] = useTweaks({ ...TWEAK_DEFAULTS, locale: startLocale }); const [route, setRoute] = useState(() => parseHash(startLocale)); const [localePickerOpen, setLocalePickerOpen] = useState(false); const [cookMode, setCookMode] = useState(false); // sync route from hash useEffect(() => { const onHash = () => { const r = parseHash(tweaks.locale); setRoute(r); if (r.locale !== tweaks.locale && LOCALE_CODES.includes(r.locale)) { setTweak('locale', r.locale); } window.scrollTo(0, 0); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, [tweaks.locale, setTweak]); // apply data-direction and data-theme to // Direction is locked to "A" (Warm) for production; ignore tweaks.direction unless // SHOW_TWEAKS is enabled for design review. useEffect(() => { const root = document.documentElement; root.setAttribute('data-direction', SHOW_TWEAKS ? tweaks.direction : 'A'); if (!cookMode) root.setAttribute('data-theme', tweaks.dark ? 'dark' : 'light'); }, [tweaks.direction, tweaks.dark, cookMode]); // navigate(): writes new hash. Auto-locales recipe links; everything else stays unprefixed. const navigate = (newPath) => { location.hash = newPath; }; const locale = tweaks.locale || 'en'; const path = route.path; // route resolution let screen; if (cookMode) { screen = setCookMode(false)} />; } else if (path.startsWith('/r/')) { screen = setCookMode(true)} />; } else if (path === '/ask' || path === '/search') { screen = ; } else if (CATEGORIES[path]) { screen = ; } else if (['/about','/how-we-test','/editors','/careers','/press','/accessibility','/contact','/privacy','/terms'].includes(path)) { screen = ; } else if (path === '/') { screen = ; } else { screen = ; } return ( <> {!cookMode && (

setLocalePickerOpen(true)} /> )}

{screen}

{!cookMode &&