// shared.jsx — logo, header, footer, router helpers const { useState, useEffect, useMemo, useRef, createContext, useContext } = React; // ── Context ────────────────────────── const AppCtx = createContext(null); function useApp() { return useContext(AppCtx); } // ── SPA Link — real for crawlers + SPA navigation ────────────────────────── function Link({ to, className, style, children, ...rest }) { const { go } = useApp(); return ( { e.preventDefault(); go(to); }} {...rest} > {children} ); } // ── Logo: the Natharia wordmark (SVG recreation) ────────────────────────── function NatharialLogo({ height = 32, color = "currentColor", accent = "var(--accent)" }) { const w = height * 3.125; return ( {/* N */} {/* A */} {/* T */} {/* H */} {/* A */} {/* R */} {/* I */} {/* A */} {/* Violet diagonal stroke from logo: under the 'A' of NA */} {/* The thick violet diagonal that sits inside the first A like the original */} ); } // Minimal icon mark function NatharialMark({ size = 28 }) { return ( ); } // ── Header ───────────────────────────────── function Header() { const { route, go, t } = useApp(); return (
{t.subscribe}
); } // ── Footer ───────────────────────────────── function Footer() { const { t, go } = useApp(); return ( ); } // ── Ticker ───────────────────────────────── function Ticker() { const items = ['Issue 28 · Live', 'Make vs Zapier · 12 min read', '4,217 readers this week', 'Wednesday dispatch', 'Tools reviewed: 147', 'Avg research: 9.4 hours/piece', 'No affiliate inflation', 'Reader-supported']; return (
{[...items, ...items, ...items].map((it, i) => ( {it} ))}
); } // ── Funnel event tracking ───────────────────────────────── function getFunnelSessionId() { try { let sid = sessionStorage.getItem('_nf_sid'); if (!sid) { sid = Math.random().toString(36).slice(2) + Date.now().toString(36); sessionStorage.setItem('_nf_sid', sid); } return sid; } catch (_) { return 'unknown'; } } function trackFunnelEvent(event_type, extra = {}) { try { fetch('/api/newsletter/subscribers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ event_type, page_path: window.location.pathname, session_id: getFunnelSessionId(), ...extra, }), }).catch(() => {}); } catch (_) {} } // ── Newsletter form ───────────────────────────────── function NewsletterForm({ compact = false, source = 'inline' }) { const { t } = useApp(); const [email, setEmail] = useState(''); const [sent, setSent] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(''); const [emailTouched, setEmailTouched] = useState(false); const formRef = useRef(null); // Fire popup_shown when the form scrolls into view useEffect(() => { const el = formRef.current; if (!el) return; const io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { trackFunnelEvent('popup_shown', { status_code: null }); io.disconnect(); } }, { threshold: 0.5 } ); io.observe(el); return () => io.disconnect(); }, []); const onEmailChange = (e) => { setEmail(e.target.value); if (!emailTouched && e.target.value.length > 0) { setEmailTouched(true); trackFunnelEvent('popup_email_entered'); } }; const onSubmit = async (e) => { e.preventDefault(); if (!email || submitting) return; trackFunnelEvent('popup_submit_clicked'); setSubmitting(true); setError(''); try { const res = await fetch('/api/newsletter/subscribers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }); if (res.ok) { trackFunnelEvent('beehiiv_api_200'); setSent(true); } else { trackFunnelEvent('beehiiv_api_error', { status_code: res.status }); setError('Something went wrong — try again.'); } } catch { trackFunnelEvent('beehiiv_api_error', { status_code: 0 }); setError('Network error — try again.'); } finally { setSubmitting(false); } }; return (
{error &&

{error}

} {!compact &&

{t.joinLine}

}
); } // ── Reveal-on-scroll helper ───────────────────────────────── function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setVis(true); io.disconnect(); } }, { threshold: 0.15 } ); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); const Tag = as; return ( {children} ); } // ── SEO helpers ───────────────────────────────── function setMetaTag(name, content) { let el = document.querySelector(`meta[name="${name}"]`) || document.querySelector(`meta[property="${name}"]`); if (!el) { el = document.createElement('meta'); if (name.startsWith('og:') || name.startsWith('article:')) { el.setAttribute('property', name); } else { el.setAttribute('name', name); } document.head.appendChild(el); } el.setAttribute('content', content); } function setCanonical(url) { let link = document.querySelector('link[rel="canonical"]'); if (!link) { link = document.createElement('link'); link.rel = 'canonical'; document.head.appendChild(link); } link.href = url; } function setJsonLd(data) { let script = document.getElementById('json-ld'); if (!script) { script = document.createElement('script'); script.id = 'json-ld'; script.type = 'application/ld+json'; document.head.appendChild(script); } script.textContent = JSON.stringify(data); } function clearJsonLd() { const el = document.getElementById('json-ld'); if (el) el.remove(); } Object.assign(window, { AppCtx, useApp, Link, NatharialLogo, NatharialMark, Header, Footer, Ticker, NewsletterForm, Reveal, setMetaTag, setCanonical, setJsonLd, clearJsonLd });