/* global React */
const { useState, useEffect, useMemo, useRef } = React;
// ============================================================
// Responsive images. Variants are pre-generated offline by
// scripts/gen-responsive-images.mjs into a sibling responsive/ folder
// (AVIF + WebP + JPEG at 400/800/1200/1600). This helper derives the
// URLs from the original image path with no manifest — keep slugify()
// in sync with the script. External URLs (webcams, Unsplash) have no
// variants and fall back to a plain .
// ============================================================
const RESPONSIVE_WIDTHS = [400, 800, 1200, 1600];
// sizes presets for the three image contexts on the site.
const SIZES_HERO = "(max-width: 700px) 100vw, 700px";
const SIZES_BODY = SIZES_HERO;
const SIZES_CARD = "(max-width: 700px) 100vw, (max-width: 1100px) 50vw, 360px";
function slugifyImage(image) {
const base = String(image).split("/").pop() || "";
return base
.toLowerCase()
.replace(/\.[^.]+$/, "")
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-+|-+$/g, "");
}
function ResponsiveImage({ image, alt, sizes, widths, eager, className, style }) {
const isExternal = /^https?:/i.test(image);
const loadProps = {
loading: eager ? "eager" : "lazy",
fetchpriority: eager ? "high" : "auto",
decoding: eager ? "sync" : "async",
referrerPolicy: "no-referrer",
};
if (isExternal) {
return (
);
}
const cleaned = image.replace(/^\//, "");
const lastSlash = cleaned.lastIndexOf("/");
const dir = lastSlash >= 0 ? cleaned.slice(0, lastSlash) : "";
const respBase = `/${dir ? dir + "/" : ""}responsive/${slugifyImage(cleaned)}`;
const ws = widths || RESPONSIVE_WIDTHS;
const srcSet = (ext) => ws.map((w) => `${respBase}-${w}.${ext} ${w}w`).join(", ");
const sizesAttr = sizes || SIZES_HERO;
return (
);
}
// Inject a for an eager (LCP) image's responsive srcset so
// the browser fetches it before React mounts the . No-op for external
// images. Mirrors the setLink pattern in app.jsx.
function preloadResponsive(image, sizes) {
if (!image || /^https?:/i.test(image)) return;
const cleaned = image.replace(/^\//, "");
const lastSlash = cleaned.lastIndexOf("/");
const dir = lastSlash >= 0 ? cleaned.slice(0, lastSlash) : "";
const respBase = `/${dir ? dir + "/" : ""}responsive/${slugifyImage(cleaned)}`;
const id = `preload-${respBase}`;
if (document.getElementById(id)) return;
const link = document.createElement("link");
link.id = id;
link.rel = "preload";
link.as = "image";
link.type = "image/avif";
link.setAttribute(
"imagesrcset",
RESPONSIVE_WIDTHS.map((w) => `${respBase}-${w}.avif ${w}w`).join(", ")
);
link.setAttribute("imagesizes", sizes || SIZES_HERO);
link.setAttribute("fetchpriority", "high");
document.head.appendChild(link);
}
// ============================================================
// Photo placeholder. Nature-journal treatment.
// Pass eager={true} for the LCP image on a page (page hero / article hero)
// so it loads with priority instead of being deprioritized as lazy.
// ============================================================
function Placeholder({ caption, tag, size, style, motif, image, credit, natural, eager, sizes }) {
return (
{image && (
)}
{!image && motif &&
{motif}
}
{/* Photo captions removed site-wide; `caption` is kept only to feed the image alt above (accessibility + SEO), not rendered as a visible description. Tag and credit remain. */}
{credit &&
{credit}
}
);
}
// A few simple decorative motifs done in plain SVG (rectangles + circles only,
// per the rule). These are just barely-there silhouette suggestions, not illustrations.
function MotifMountains() {
return (
);
}
function MotifSun() {
return (
);
}
function MotifTrees() {
return (
);
}
// ============================================================
// Masthead
// ============================================================
function Header({ current, go }) {
const primaryNavItems = [
["articles", "Articles"],
["kit", "Kit"],
["places", "Directory"],
["about", "About"],
];
const overflowNavItems = [
["newsletter", "Newsletter"],
["contact", "Contact"],
];
const navItems = [...primaryNavItems, ...overflowNavItems];
const [menuOpen, setMenuOpen] = React.useState(false);
const menuRef = React.useRef(null);
React.useEffect(() => {
if (!menuOpen) return;
const onDoc = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
}, [menuOpen]);
const renderLink = (key, label, { baseClass, role, onNavigate } = {}) => (
{ e.preventDefault(); if (onNavigate) onNavigate(); go(key); }}
>{label}
);
const today = new Date().toLocaleDateString("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric"
});
return (
);
}
// ============================================================
// Newsletter submit side-effects (shared)
// The subscribe forms POST into a hidden iframe (target="buttondown-target",
// declared in index.html) so the page never navigates and no popup opens.
// Buttondown never reports back to the page, so the conversion event and the
// local "subscribed" flag fire optimistically on submit. The map and guide
// gates layer their own unlock on top of this. Exposed on window so page-level
// forms (map gate, guide, newsletter page) can reuse the exact same behavior.
// ============================================================
function trackNewsletterSubmit(location, tag) {
if (window.track) window.track("newsletter_signup", { location: location || "unknown", tag: tag || "" });
try { window.localStorage.setItem("tfg.nl.subscribed", "1"); } catch (_e) {}
}
window.trackNewsletterSubmit = trackNewsletterSubmit;
// ============================================================
// Inline newsletter box. `location` is the unique GA4 identifier for the
// placement; `tag` is the Buttondown segmentation tag for that source.
// ============================================================
function NewsletterInline({ heading, blurb, location, tag }) {
const [done, setDone] = useState(false);
return (
{heading || "Sunday Field Notes"}
{blurb || "A short note on Sundays, when there is something to say."}
{done ? (
Thanks. Check your inbox to confirm your subscription.
) : (
)}
);
}
// ============================================================
// Exit-intent newsletter modal. Article pages mount one of these. It shows at
// most once per 14 days (tfg.nl.exit.seen) and never once subscribed
// (tfg.nl.subscribed). Desktop trigger is the cursor leaving toward the
// browser chrome; touch devices have no exit signal, so they fall back to a
// scroll-depth + dwell heuristic.
// ============================================================
const EXIT_COOLDOWN_DAYS = 14;
function ExitIntentNewsletter() {
const [open, setOpen] = useState(false);
const firedRef = useRef(false);
useEffect(() => {
let suppressed = false;
try {
if (window.localStorage.getItem("tfg.nl.subscribed") === "1") suppressed = true;
const seen = window.localStorage.getItem("tfg.nl.exit.seen");
if (seen) {
const ageDays = (Date.now() - new Date(seen).getTime()) / 86400000;
if (ageDays < EXIT_COOLDOWN_DAYS) suppressed = true;
}
} catch (_e) {}
if (suppressed) return;
const reveal = () => {
if (firedRef.current) return;
firedRef.current = true;
try { window.localStorage.setItem("tfg.nl.exit.seen", new Date().toISOString()); } catch (_e) {}
setOpen(true);
};
const onMouseOut = (e) => { if (e.clientY <= 0 && !e.relatedTarget) reveal(); };
const isTouch = window.matchMedia && window.matchMedia("(hover: none)").matches;
const mountedAt = Date.now();
const onScroll = () => {
if (Date.now() - mountedAt < 25000) return;
const max = document.documentElement.scrollHeight - window.innerHeight;
if (max > 0 && window.scrollY / max >= 0.6) reveal();
};
if (isTouch) {
window.addEventListener("scroll", onScroll, { passive: true });
} else {
document.addEventListener("mouseout", onMouseOut);
}
return () => {
window.removeEventListener("scroll", onScroll);
document.removeEventListener("mouseout", onMouseOut);
};
}, []);
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.removeEventListener("keydown", onKey);
document.body.style.overflow = prev;
};
}, [open]);
if (!open) return null;
return (
setOpen(false)} />
Before you go
One letter a week. Sometimes none.
Sunday Field Notes: what is open, what is blooming, and the occasional longer piece. Free, and you can leave anytime.
