/* global React, ReactDOM */ /* Meet the dogs — foster/rescue modal opened from the About paragraph. Adapted from the standalone drop-in: this project has no build step, so the ES module import/export are gone and the file publishes MeetTheDogsModal on window like every other component here. Everything is inside an IIFE because these scripts share one global scope (cover.jsx already declares useState). Two behaviour changes were required to embed it: - Controlled mode. Passing onClose renders the dialog alone, without the component's own demo wrapper and "meet the dogs" trigger, so the phrase inside the paragraph is what opens it. With no props it still works standalone exactly as written. - The overlay is portaled to . .page-host carries a filter and .leadership has overflow:hidden, either of which would trap or clip a position:fixed overlay rendered in place. RoleModal portals for the same reason. */ (function () { const { useState, useEffect, useCallback } = React; /* The two rescues fostered through: K9 Lifesavers during the DC years, Rebel Dogs Detroit since. `rescue` on a dog keys into this. */ const RESCUES = { k9: { label: "K9 Lifesavers", href: "https://www.k9lifesavers.org" }, rebel: { label: "Rebel Dogs Detroit", href: "https://www.rebeldogsdetroit.com" }, }; /* The real fosters, in the order the photo filenames gave: the DC years first, then Detroit. Photos live in /assets/dogs, named --.webp so the folder sorts the way this list reads. `note` is optional and deliberately absent — nobody has written their stories yet, and the card leaves the space out rather than inventing one. */ /* DOGS-BEGIN — generated by tools/dogs.py; edit the folder, not this list. `note` and `focus` are optional and are carried over by name. */ const DOGS = [ { name: "Charlie", rescue: "k9", image: "/assets/dogs/k9-01-charlie.webp" }, { name: "Willard", rescue: "k9", image: "/assets/dogs/k9-02-willard.webp" }, { name: "Frankie", rescue: "k9", image: "/assets/dogs/k9-03-frankie.webp" }, { name: "Patty", rescue: "k9", image: "/assets/dogs/k9-04-patty.webp" }, { name: "Ottis", rescue: "k9", image: "/assets/dogs/k9-05-ottis.webp", focus: "center top" }, { name: "Jack Jill", rescue: "k9", image: "/assets/dogs/k9-06-jack-jill.webp" }, { name: "Spudnik", rescue: "rebel", image: "/assets/dogs/rebel-01-spudnik.webp" }, { name: "Astro", rescue: "rebel", image: "/assets/dogs/rebel-02-astro.webp" }, { name: "Blue", rescue: "rebel", image: "/assets/dogs/rebel-03-blue.webp" }, { name: "White Walker", rescue: "rebel", image: "/assets/dogs/rebel-04-white-walker.webp" }, { name: "Eddie", rescue: "rebel", image: "/assets/dogs/rebel-05-eddie.webp" }, { name: "Shenzhen", rescue: "rebel", image: "/assets/dogs/rebel-06-shenzhen.webp" }, { name: "Oreo", rescue: "rebel", image: "/assets/dogs/rebel-07-oreo.webp" }, { name: "Nori", rescue: "rebel", image: "/assets/dogs/rebel-08-nori.webp" }, ]; /* DOGS-END */ /* The site's own tokens rather than the drop-in's hardcoded hexes, so this dialog tracks the palette switcher (Ink / Riso / Tabloid / Editorial) along with everything else. Inline styles resolve var() fine. cream → --paper ink → --ink navy → --ink (scrim/dark fills) coral → --accent gold → --highlight teal → --bloom */ const PALETTE = { cream: "var(--paper)", ink: "var(--ink)", navy: "var(--ink)", coral: "var(--accent)", gold: "var(--highlight)", teal: "var(--bloom)", line: "color-mix(in oklab, var(--ink) 16%, transparent)", /* The promo block's ground: ink lifted toward paper, so it is the dark GREY the rest of the site's dark surfaces use rather than a flat black panel at the foot of a cream card. Mixed from the tokens, so it still follows the palette switcher. */ darkGrey: "color-mix(in oklab, var(--paper) 9%, var(--ink))", /* Reads on top of the dark fills above. */ onDark: "var(--paper)", }; function useFonts() { useEffect(() => { const id = "meet-the-dogs-fonts"; if (document.getElementById(id)) return; const link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400..900;1,400..900&family=Newsreader:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap"; document.head.appendChild(link); }, []); } function PawPlaceholder({ size = 96 }) { return ( ); } function DogCard({ dog, onNext }) { const rescue = dog.rescue && RESCUES[dog.rescue]; const n = String(DOGS.indexOf(dog) + 1).padStart(2, "0"); return (
{/* Full-bleed square portrait — nothing sits on top of it. */}
{dog.image ? ( {dog.name} ) : ( )}
{/* Caption block beneath the photo: foster number and rescue on one line, then the name, then the note. Tight leading throughout so it stays a caption rather than a paragraph. */}
Foster #{n} {rescue && ( {rescue.label} )}
{/* The name, and the way to the next dog on the same line — under the rescue it sits below. It was a full-width button in its own row, which cost the dialog a whole band of height for one control. */}

{dog.name}

{onNext && ( )}
{dog.note && (

{dog.note}

)}
); } function MeetTheDogsModal({ onClose }) { useFonts(); /* Controlled when the caller passes onClose: the parent decides it is open, and closing hands control back rather than tracking state here. */ const controlled = typeof onClose === "function"; const [openState, setOpenState] = useState(false); const open = controlled ? true : openState; const setOpen = (v) => { if (controlled) { if (!v) onClose(); } else setOpenState(v); }; const [index, setIndex] = useState(0); const shuffle = useCallback(() => { setIndex((i) => (i + 1) % DOGS.length); }, []); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") setOpen(false); if (e.key === "ArrowRight") shuffle(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, shuffle]); return (
{!controlled && ( )} {open && ReactDOM.createPortal(
setOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(20, 18, 16, 0.55)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20, overflowY: "auto", }} >
e.stopPropagation()} style={{ background: PALETTE.cream, /* Wide enough for the rescue's copy to read as a paragraph beside its logo rather than as a narrow column of four-word lines. The portrait is 100% of this width at 4:3, so the card still gets shorter than it was at 312 square. */ width: "min(360px, 100%)", maxHeight: "calc(100dvh - 40px)", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 30px 60px rgba(0,0,0,0.35)", }} > {/* header */}
Fosters & rescues, DC + Detroit
{/* dog card */}
{/* rebel dogs promo */}
{/* The rescue's own mark. Drop the file at this path to switch it on — until it is there the image removes itself and the copy simply runs full width, so a missing file is a missing logo rather than a broken layout. */} { e.currentTarget.style.display = "none"; }} style={{ flex: "0 0 auto", width: 58, height: 58, objectFit: "contain", /* The mark is drawn for a dark ground; nothing to invert. */ }} />

Rebel Dogs Detroit is a rescue collective built on a street-to-home network for the city’s abandoned and abused dogs.

Donate to Rebel Dogs Detroit
, document.body )}
); } Object.assign(window, { MeetTheDogsModal }); })();