Baah and Co

Made with Bareconnect

/*! * BAAH & CO. site script * Standalone, self-executing, no libraries and no build step. * Load it in the of every page: * * Sections * 1. Content you can edit (In progress projects, Journal notes) * 2. Boot (marks JS as available, waits for the page) * 3. Preloader (brand pattern, first visit per session) * 4. Features, each isolated so one failure never stops the others */ (function () { "use strict"; /* ===================================================================== 1. CONTENT YOU CAN EDIT ===================================================================== */ /* IN PROGRESS COMPANIES: filter order and dot colour. STAGES: label per stage key. PROJECTS: one line each. company must match a COMPANIES name, stage a STAGES key, art an ART key (or add image: "file.jpg" to use a photo). */ window.BAAH_INDEX = { COMPANIES: { "KASA": { colour: "oklch(64.5% 0.123 41.4)" }, "PLUME": { colour: "oklch(36.2% 0.031 136.2)" }, "GUA": { colour: "oklch(26.9% 0.060 160.9)" }, "Sirius Arc": { colour: "oklch(27.9% 0.045 249.0)" } }, STAGES: { planning: "Planning", building: "Building", live: "Live", open: "Open for trade" }, PROJECTS: [ { name: "The Terraces", company: "KASA", stage: "building", year: "2026", art: "terraces", note: "Short description of The Terraces.", link: "#", linkLabel: "View project" }, { name: "Mockup interior", company: "PLUME", stage: "planning", year: "2026", art: "interior", note: "Mockup entry. Replace with a real PLUME project.", link: "#", linkLabel: "View project" }, { name: "Trade, supply and sourcing", company: "GUA", stage: "open", year: "Ongoing", art: "trade", note: "GUA works in trade rather than fixed projects. Buyers and suppliers can get in touch here.", link: "mailto:hello@baahandco.com?subject=GUA", linkLabel: "Enquire" }, { name: "Bareconnect", company: "Sirius Arc", stage: "live", year: "2022", art: "storefront", note: "Short description of Bareconnect.", link: "#", linkLabel: "View project" }, { name: "Ground Zero", company: "Sirius Arc", stage: "live", year: "2026", art: "map", note: "Short description of Ground Zero.", link: "#", linkLabel: "View project" }, { name: "Adwumatime", company: "Sirius Arc", stage: "live", year: "2026", art: "clock", note: "Short description of Adwumatime.", link: "#", linkLabel: "View project" }, { name: "Fikterra", company: "Sirius Arc", stage: "live", year: "2026", art: "harvest", note: "Short description of Fikterra.", link: "#", linkLabel: "View project" }, { name: "Luvail", company: "Sirius Arc", stage: "live", year: "2026", art: "booking", note: "Short description of Luvail.", link: "#", linkLabel: "View project" }, { name: "More in development", company: "Sirius Arc", more: true } ], ART: { terraces: 'M20 100H140M30 100V78H130V100M42 78V58H118V78M54 58V40H106V58M38 90H50M62 90H74M86 90H98M110 90H122M52 68H64M76 68H88M100 68H112M66 49H76M86 49H94M54 40L80 26L106 40', interior: 'M24 20V96H140M24 96L14 110M86 20V44M76 52Q86 38 96 52ZM50 96V80Q50 70 60 70H96Q106 70 106 80V96M44 96V84H50M106 84H112V96M36 34H64V56H36ZM40 52L48 42L54 48L58 44L62 52M124 96L121 80H137L134 96ZM128 80Q122 64 114 58Q126 62 130 76M130 80Q132 62 142 54Q138 68 132 78', trade: 'M16 96H144M26 96V74H56V96M56 96V74H82V96M36 74V54H72V74M26 85H56M56 85H82M36 64H72M96 60H134M126 52L136 60L126 68M96 76H126M104 68L94 76L104 84M100 30m-10 0a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M92 30H108M100 20Q94 30 100 40Q106 30 100 20', storefront: 'M24 100H136M32 100V54H128V100M26 54L34 30H126L134 54M26 54Q37 64 48 54Q59 64 70 54Q81 64 92 54Q103 64 114 54Q124 64 134 54M44 100V74H66V100M82 72H116V90H82ZM52 30V54M76 30V54M100 30V54M142 26m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M150 44m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M134 29L128 34M144 30L148 41', map: 'M16 34L54 22L100 34L144 22V96L100 108L54 96L16 108ZM54 22V96M100 34V108M80 46Q66 46 66 60Q66 72 80 86Q94 72 94 60Q94 46 80 46ZM80 60m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M26 60H46M26 74H40M112 54H134M112 70H128', clock: 'M80 64m-38 0a38 38 0 1 0 76 0a38 38 0 1 0 -76 0M80 64V40M80 64L96 74M80 30V34M80 94V98M46 64H50M110 64H114M122 22H146V46H122ZM122 30H146M128 38H132M136 38H140M14 88H38V112H14ZM14 96H38M20 104H24M28 104H32', harvest: 'M18 100H142M34 100V64H74V100M34 64L54 50L74 64M44 100V84H64V100M100 100Q92 100 92 90Q92 78 104 74L106 68H122L124 74Q136 78 136 90Q136 100 128 100ZM106 68Q114 60 122 68M114 74V100M100 86H128M110 44Q106 32 96 28Q108 28 112 40M116 40Q120 28 132 24Q126 36 118 44', booking: 'M30 30H110V100H30ZM30 44H110M46 22V36M94 22V36M44 58H56M64 58H76M84 58H96M44 72H56M64 72H76M84 72H96M44 86H56M64 86H76M82 86L88 92L100 78M120 52H146V96H120ZM124 60H142M124 68H136M124 80H142M124 88H134' } }; /* JOURNAL NOTES: newest first. The first becomes the cover story, the next three fill "Also in this issue", the next four become cards. */ window.BAAH_JOURNAL = { COMPANIES: { "BAAH & CO.": { tint: "oklch(92.9% 0.013 82.4)" }, "KASA": { tint: "oklch(92.1% 0.023 57.2)" }, "PLUME": { tint: "oklch(92.5% 0.015 112.4)" }, "GUA": { tint: "oklch(92.1% 0.015 149.9)" }, "Sirius Arc": { tint: "oklch(92.3% 0.011 253.9)" } }, ISSUE: "01", ALL_NOTES_LINK: "#", NOTES: [ { title: "Designing The Terraces", tag: "KASA", date: "Sep 2026", read: "5 min", link: "#", excerpt: "How the stepped plan came together, from first sketch to site." }, { title: "Rammed earth, up close", tag: "KASA", date: "Aug 2026", read: "4 min", link: "#", excerpt: "A material study on walls that hold heat and age well." }, { title: "The room before the furniture", tag: "PLUME", date: "Aug 2026", read: "3 min", link: "#", excerpt: "Light, proportion and material come first. Objects follow." }, { title: "What gua means", tag: "GUA", date: "Jul 2026", read: "3 min", link: "#", excerpt: "In Fante, gua is the market. The name and the work behind it." }, { title: "Four years of Bareconnect", tag: "Sirius Arc", date: "Jul 2026", read: "6 min", link: "#", excerpt: "Notes on building commerce software since 2022." }, { title: "Adwumatime is live", tag: "Sirius Arc", date: "Jun 2026", read: "2 min", link: "#", excerpt: "A short introduction to the newest product from Sirius Arc." }, { title: "From land to markets", tag: "GUA", date: "Jun 2026", read: "4 min", link: "#", excerpt: "How goods move, and where information makes the difference." }, { title: "Building what matters", tag: "BAAH & CO.", date: "May 2026", read: "5 min", link: "#", excerpt: "Why we take the long view across four very different fields." } ] }; /* ===================================================================== 2. BOOT ===================================================================== */ document.documentElement.classList.add("js"); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const pad = n => String(n).padStart(2, "0"); /* Runs a feature and logs, instead of throwing, if it fails. */ const feature = (name, fn) => { try { fn(); } catch (err) { console.error("[BAAH] " + name + " failed:", err); } }; /* ===================================================================== 3. PRELOADER Brand pattern: blocks fill in as the counter runs, then at 100% most of them turn burgundy rust and rammed earth before the page is revealed. Never blocks: skippable, and always gone within 3.2 seconds. ===================================================================== */ const startPreloader = () => new Promise(resolve => { const pre = document.getElementById("baah-pre"); let finished = false; const finish = instant => { if (finished) return; finished = true; resolve(); if (!pre) return; if (instant) { pre.remove(); return; } pre.classList.add("is-done"); setTimeout(() => pre.remove(), 800); }; try { if (!pre) { finish(true); return; } let seen = false; try { seen = sessionStorage.getItem("baah-pre") === "1"; sessionStorage.setItem("baah-pre", "1"); } catch (e) {} if (reduced || seen) { finish(true); return; } // Build the pattern (seeded so it is the same every visit) let seed = 7; const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647; const NS = "http://www.w3.org/2000/svg"; const svg = pre.querySelector(".baah-pre-pattern"); const count = document.getElementById("baah-pre-n"); const NEUTRALS = ["oklch(90% 0.018 75)", "oklch(86% 0.022 70)", "oklch(82% 0.026 65)", "oklch(88% 0.012 90)"]; const EARTH = ["oklch(36% 0.085 25)", "oklch(42% 0.10 32)", "oklch(49% 0.11 40)", "oklch(58% 0.095 48)", "oklch(66% 0.075 58)", "oklch(72% 0.06 65)"]; const blocks = []; for (let i = 0; i < 96; i++) { const r = document.createElementNS(NS, "rect"); r.setAttribute("x", Math.round(rand() * 1660 - 60)); r.setAttribute("y", Math.round(rand() * 1060 - 60)); r.setAttribute("width", Math.round(120 + rand() * 380)); r.setAttribute("height", Math.round(90 + rand() * 300)); r.setAttribute("fill", NEUTRALS[Math.floor(rand() * NEUTRALS.length)]); r.style.opacity = "0"; svg.appendChild(r); blocks.push({ el: r, at: rand(), earth: rand() < 0.8, tone: EARTH[Math.floor(rand() * EARTH.length)] }); } ["pointerdown", "keydown", "wheel", "touchstart"].forEach(ev => window.addEventListener(ev, () => finish(false), { once: true, passive: true })); setTimeout(() => finish(false), 3200); const DURATION = 1400; const start = Date.now(); const timer = setInterval(() => { if (finished) { clearInterval(timer); return; } const p = Math.max(0, Math.min(1, (Date.now() - start) / DURATION)); const eased = 1 - Math.pow(1 - p, 3); if (count) count.textContent = String(Math.round(eased * 100)).padStart(3, "0"); blocks.forEach(b => { if (b.at <= eased && b.el.style.opacity === "0") b.el.style.opacity = String(0.55 + b.at * 0.4); }); if (p < 1) return; clearInterval(timer); // 100%: 80% of the pattern turns burgundy rust and rammed earth pre.classList.add("is-full"); blocks.forEach((b, i) => { b.el.style.transitionDelay = (i * 3) + "ms"; if (b.earth) { b.el.style.opacity = "1"; b.el.setAttribute("fill", b.tone); } else b.el.style.opacity = "0.22"; }); setTimeout(() => finish(false), 850); }, 40); } catch (err) { console.error("[BAAH] Preloader failed:", err); finish(true); } }); /* ===================================================================== 4. FEATURES ===================================================================== */ const init = () => { const preload = startPreloader(); window.baahPreload = preload; /* Menu: open/close, Escape to close, focus the first link */ feature("Menu", () => { if (!document.querySelector(".baah-menu")) return; const body=document.body, menuBtn=document.querySelector(".baah-menu"), overlay=document.getElementById("baah-overlay"), menuText=menuBtn.querySelector(".baah-menu-text"); const setMenu = open => { body.classList.toggle("menu-open",open); menuBtn.setAttribute("aria-expanded",open); overlay.setAttribute("aria-hidden",!open); menuText.textContent = open ? "Close" : "Menu"; if(open) overlay.querySelector("a").focus({preventScroll:true}); }; menuBtn.addEventListener("click",()=>setMenu(!body.classList.contains("menu-open"))); overlay.querySelectorAll("a").forEach(a=>a.addEventListener("click",()=>setMenu(false))); addEventListener("keydown",e=>{ if(e.key==="Escape" && body.classList.contains("menu-open")){ setMenu(false); menuBtn.focus(); }}); }); /* Hero: carousel with Previous / Pause / Next, parallax */ feature("Hero", () => { if (!document.querySelector(".baah-hero")) return; const hero=document.querySelector(".baah-hero"); (window.baahPreload||Promise.resolve()).then(()=>requestAnimationFrame(()=>requestAnimationFrame(()=>hero.classList.add("is-loaded")))); const slides=[...hero.querySelectorAll(".baah-slide")]; const cur=hero.querySelector(".js-hero-current"), nameEl=hero.querySelector(".js-hero-name"), bar=hero.querySelector(".js-hero-progress"); let idx=0, timer=null; const SLIDE_MS=6500; const show = i => { slides[idx].classList.remove("is-active"); idx=(i+slides.length)%slides.length; const s=slides[idx]; s.classList.add("is-active"); cur.textContent=pad(idx+1); nameEl.textContent=`${s.dataset.code} / ${s.dataset.kind}`; restart(); }; const restart = () => { clearTimeout(timer); bar.classList.remove("is-running"); void bar.offsetWidth; if(reduced || document.hidden) return; bar.classList.add("is-running"); }; bar.addEventListener("animationend",()=>show(idx+1)); hero.querySelector(".js-hero-next").addEventListener("click",()=>show(idx+1)); hero.querySelector(".js-hero-prev").addEventListener("click",()=>show(idx-1)); document.addEventListener("visibilitychange",()=>{ if(!document.hidden) restart(); else bar.classList.remove("is-running"); }); restart(); const pauseBtn=hero.querySelector(".js-hero-pause"); pauseBtn.addEventListener("click",()=>{ const p=!hero.classList.contains("is-paused"); hero.classList.toggle("is-paused",p); pauseBtn.setAttribute("aria-pressed",String(p)); pauseBtn.textContent=p?"Play":"Pause"; }); /* Hero parallax */ const media=hero.querySelector(".baah-hero-media"); let ticking=false; if(!reduced) addEventListener("scroll",()=>{ if(ticking) return; ticking=true; requestAnimationFrame(()=>{ media.style.transform=`translate3d(0,${Math.min(scrollY*.12,90)}px,0)`; ticking=false; }); },{passive:true}); }); /* Sub-page hero reveal (About, Sustainability) */ feature("Page hero", () => { const ph = document.querySelector(".baah-page-hero"); if (ph) requestAnimationFrame(() => requestAnimationFrame(() => ph.classList.add("is-visible"))); }); /* Large headlines slide up as they enter the screen */ feature("Headline reveals", () => { const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add("is-visible"); io.unobserve(e.target);} }),{threshold:.3}); document.querySelectorAll(".baah-reveal-lines").forEach(el=>io.observe(el)); }); /* 08 In progress: project index */ feature("In progress", () => { (()=>{ const D=window.BAAH_INDEX; if(!D) return; const {COMPANIES,STAGES,PROJECTS,ART}=D; const wrap=document.querySelector(".baah-pi"), list=document.getElementById("pi-list"), fbar=document.getElementById("pi-filters"), cnt=document.getElementById("pi-count"), pv=document.getElementById("pi-preview"); if(!wrap) return; const esc=t=>String(t??"").replace(/[&<>"]/g,c=>({"&":"&","<":"<",">":">",'"':"""}[c])); const media=p=>p.image ? `

` : ``; const colour=p=>(COMPANIES[p.company]||{}).colour||"#20201d"; let filter="All", open=null; const rows=[]; let n=0; PROJECTS.forEach((p,i)=>{ const row=document.createElement("button"); row.type="button"; row.className="baah-pi-row pi-pre"+(p.more?" is-more":""); const dot=``; if(p.more){ row.disabled=true; row.innerHTML=`${esc(p.name)}${dot}${esc(p.company)}`; list.appendChild(row); rows.push({p,row}); return; } n++; row.setAttribute("aria-expanded","false"); row.innerHTML=`${String(n).padStart(2,"0")}${esc(p.name)}${dot}${esc(p.company)}${esc(STAGES[p.stage]||p.stage)}${esc(p.year)}`; const det=document.createElement("div"); det.className="baah-pi-detail"; det.innerHTML=`

${media(p)}

${esc(p.note)}

${p.link?`${esc(p.linkLabel||"View project")}`:""}

`; row.addEventListener("click",()=>{ const was=open===det; if(open){ open.classList.remove("is-open"); open.previousElementSibling.setAttribute("aria-expanded","false"); } open=was?null:det; if(open){ det.classList.add("is-open"); row.setAttribute("aria-expanded","true"); pv.classList.remove("is-on"); } }); row.addEventListener("mouseenter",()=>{ if(open===det) return; pv.style.background=colour(p); pv.innerHTML=media(p); pv.classList.add("is-on"); }); row.addEventListener("mouseleave",()=>pv.classList.remove("is-on")); list.appendChild(row); list.appendChild(det); rows.push({p,row,det}); }); wrap.addEventListener("mousemove",e=>{ const b=wrap.getBoundingClientRect(), w=pv.offsetWidth, h=pv.offsetHeight; const x=Math.min(e.clientX-b.left+28,b.width-w), y=e.clientY-b.top-h/2; pv.style.transform=`translate3d(${x}px,${y}px,0) scale(${pv.classList.contains("is-on")?1:.92})`; }); const count=k=>PROJECTS.filter(p=>!p.more&&(k==="All"||p.company===k)).length; const drawFilters=()=>{ fbar.innerHTML=""; ["All",...Object.keys(COMPANIES)].forEach(k=>{ const b=document.createElement("button"); b.type="button"; b.setAttribute("aria-pressed",String(k===filter)); b.innerHTML=(k==="All"?"":``)+`${esc(k)} ${count(k)}`; b.addEventListener("click",()=>{ filter=k; apply(); drawFilters(); }); fbar.appendChild(b); }); }; const apply=()=>{ if(open){ open.classList.remove("is-open"); open=null; } let num=0; rows.forEach(({p,row,det})=>{ const show=filter==="All"||p.company===filter; row.classList.toggle("is-hidden",!show); if(det) det.classList.toggle("is-hidden",!show); if(show&&!p.more){ num++; row.querySelector(".no").textContent=String(num).padStart(2,"0"); } if(show&&!reduced){ row.classList.add("pi-pre"); requestAnimationFrame(()=>requestAnimationFrame(()=>{ row.style.transitionDelay=(num*45)+"ms"; row.classList.remove("pi-pre"); })); } }); const c=count(filter); cnt.textContent=String(c).padStart(2,"0"); }; drawFilters(); apply(); rows.forEach(({row})=>row.classList.add("pi-pre")); const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ rows.forEach(({row},k)=>{ row.style.transitionDelay=(k*55)+"ms"; row.classList.remove("pi-pre"); }); } else if(!e.isIntersecting && !reduced){ rows.forEach(({row})=>{ row.style.transitionDelay="0ms"; row.classList.add("pi-pre"); }); } }),{threshold:[0,.15]}); if(reduced) rows.forEach(({row})=>row.classList.remove("pi-pre")); else io.observe(list); })(); }); /* 09 Journal: magazine front page */ feature("Journal", () => { (()=>{ const D=window.BAAH_JOURNAL, body=document.getElementById("mag-body"); if(!D||!body) return; const {COMPANIES,NOTES}=D; const fbar=document.getElementById("mag-filters"), cnt=document.getElementById("mag-count"); const esc=t=>String(t??"").replace(/[&<>"]/g,c=>({"&":"&","<":"<",">":">",'"':"""}[c])); const tint=n=>(COMPANIES[n.tag]||{}).tint||"#ece7de"; document.getElementById("mag-issue").textContent=`Issue ${D.ISSUE||"01"} / ${NOTES[0]?NOTES[0].date:""}`; document.getElementById("mag-all").href=D.ALL_NOTES_LINK||"#"; let filter="All"; const cover=n=>`

${esc(n.tag)}Latest

${esc(n.title)}

${esc(n.excerpt)}

Read the note${esc(n.date)} / ${esc(n.read)}

`; const item=n=>`

${esc(n.tag)}${esc(n.read)}

${esc(n.title)}

${esc(n.excerpt)}

`; const card=n=>`

${esc(n.tag)}

${esc(n.title)}

${esc(n.excerpt)}

${esc(n.date)}${esc(n.read)}

`; const reveal=()=>{ const els=[...body.querySelectorAll(".mag-pre")]; if(reduced){ els.forEach(e=>e.classList.remove("mag-pre")); return; } requestAnimationFrame(()=>requestAnimationFrame(()=>els.forEach((e,k)=>{ e.style.transitionDelay=`0ms,${k*60}ms,${k*60}ms,0ms`; e.classList.remove("mag-pre"); }))); }; const draw=(animate)=>{ const L=NOTES.filter(n=>filter==="All"||n.tag===filter); if(!L.length){ body.innerHTML='

Notes coming soon.

'; cnt.textContent="0 notes"; return; } const [c,...rest]=L, toc=rest.slice(0,3), cards=rest.slice(3,7); body.innerHTML=`

${cover(c)}

${toc.map(item).join("")||'

More notes soon.

`+ (cards.length?`

${cards.map(card).join("")}

`:""); cnt.textContent=`${L.length} ${L.length===1?"note":"notes"}`; if(animate) reveal(); }; const drawFilters=()=>{ fbar.innerHTML=""; ["All",...Object.keys(COMPANIES)].forEach(k=>{ const b=document.createElement("button"); b.type="button"; b.textContent=k; b.setAttribute("aria-pressed",String(k===filter)); b.addEventListener("click",()=>{ filter=k; drawFilters(); draw(true); }); fbar.appendChild(b); }); }; drawFilters(); draw(false); const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting) reveal(); else if(!reduced) body.querySelectorAll(".baah-mag-page,.baah-mag-item").forEach(x=>{ x.style.transitionDelay="0ms"; x.classList.add("mag-pre"); }); }),{threshold:[0,.12]}); if(reduced) reveal(); else io.observe(body); })(); }); /* Contact image parallax */ feature("Contact parallax", () => { if (!document.querySelector(".baah-cmedia") || !document.querySelector(".baah-contact")) return; const cm=document.querySelector(".baah-cmedia"), cs=document.querySelector(".baah-contact"); if(!reduced) addEventListener("scroll",()=>requestAnimationFrame(()=>{ const r=cs.getBoundingClientRect(); if(r.bottom<0||r.top>innerHeight) return; const p=(r.top+r.height/2-innerHeight/2)/innerHeight; cm.style.transform=`translate3d(0,${p*-50}px,0)`; }),{passive:true}); }); /* Header wordmark: signature replays on hover */ feature("Header logo", () => { if (!document.querySelector(".baah-header-logo")) return; const hl=document.querySelector(".baah-header-logo"); let hlBusy=false; if(!reduced) hl.closest("a").addEventListener("mouseenter",()=>{ if(hlBusy) return; hlBusy=true; hl.classList.remove("is-done","play"); void hl.getBoundingClientRect(); hl.classList.add("play"); setTimeout(()=>{ hl.classList.add("is-done"); hl.classList.remove("play"); hlBusy=false; },2000); }); }); /* Logo and drawing animations: play on entry, replay after leaving view */ feature("Animated logos", () => { const lio=new IntersectionObserver(es=>es.forEach(e=>{ const el=e.target; if(e.isIntersecting && e.intersectionRatio>=.35){ if(!el.classList.contains("play")){ void el.getBoundingClientRect(); el.classList.add("play"); } } else if(!e.isIntersecting && !reduced){ el.classList.remove("play"); } }),{threshold:[0,.35]}); document.querySelectorAll("[data-logo]").forEach(el=>lio.observe(el)); }); /* Debug grid: press G or add #grid to the address */ feature("Debug grid", () => { const dbg=on=>document.documentElement.classList.toggle("baah-debug",on); if(location.hash==="#grid") dbg(true); addEventListener("keydown",e=>{ if((e.key==="g"||e.key==="G") && !/INPUT|TEXTAREA/.test(document.activeElement.tagName)) dbg(); }); }); /* Broken images: hide them so the colour behind shows */ feature("Image fallback", () => { document.querySelectorAll("img[data-fallback]").forEach(img=>{ const miss=()=>img.classList.add("is-missing"); if(img.complete && !img.naturalWidth) miss(); else img.addEventListener("error",miss,{once:true}); }); }); }; if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init, { once: true }); else init(); })();

Search

Search Tips

${esc(n.title)}