studio-engine 0.96.2 → 0.97.0.rc1

data/app/javascript/studio/email_banner.js

@@ -0,0 +1,277 @@
+// studio/email_banner: the two Alpine factories behind the email manager.
+//
+//   emailBannerEditor(config)   studio/emails/show: the live banner editor.
+//                               Typing repaints the banner, and ONE Save button
+//                               reports whether there is anything to save.
+//   emailRecipients(config)     studio/emails/index: repaints EVERY row when
+//                               the example recipient changes.
+//
+// studio/alpine_shims publishes both before Alpine starts, because
+// x-data="emailBannerEditor(...)" is evaluated the moment Alpine does.
+//
+// WHY THE PREVIEW IS PAINTED IN THE BROWSER AND NOT RE-RENDERED. The banner is
+// already server-rendered by the mailer's own partial, which is what makes it
+// trustworthy. The editor does not replace it: it edits the text nodes, the
+// logo and the tint of that same rendered banner in place. The shape, the
+// typography and the scaling stay the server's. A second banner rendered in
+// JavaScript would be a second implementation of the email, and it would drift.
+//
+// WHY THE PLACEHOLDER RULE IS REPEATED HERE. Studio::Banner fills {name} and
+// {app} server-side. Repeating that in script is a real duplication: the
+// alternative is a round trip per keystroke. The rule is small and pinned on
+// both sides: banner_copy_test.rb for Ruby, test/javascript/email_banner.test.mjs
+// and e2e/email_banner_editor.spec.js for the browser. If they ever disagree,
+// the server is right.
+//
+// It imports nothing; the Node test loads it as a data: module.
+
+// The first word of a recipient's name, or "" when there is none.
+export function firstNameOf(name) {
+  return (name || "").trim().split(/\s+/)[0] || ""
+}
+
+// A banner header for a recipient. {app} is substituted on both paths because
+// it does not depend on the recipient: a header reading "Welcome to {app}" must
+// not show a raw brace here while the inbox shows the app's name. With no first
+// name, a template that greets by name gives way to its fallback.
+export function resolveBannerText(template, fallback, first, app) {
+  const text = (template || "").replace(/\{app\}/g, app || "")
+  if (first) return text.replace(/\{name\}/g, first)
+  if (text.indexOf("{name}") !== -1) return (fallback || "").replace(/\{app\}/g, app || "")
+  return text
+}
+
+// A subject line for a recipient. A subject has no second field for the
+// nameless case, so an unresolved placeholder is removed along with the
+// punctuation holding it: the same two passes Studio::Banner.interpolate makes,
+// so "Sign in, {name}" reads "Sign in" here exactly as it would in an inbox.
+export function resolveSubjectText(template, first, app) {
+  const text = (template || "").replace(/\{app\}/g, app || "")
+  if (first) return text.replace(/\{name\}/g, first)
+  return text.replace(/[,;:—-]?\s*\{name\}/g, "")
+             .replace(/^\s*[,;:—-]\s*/, "")
+             .replace(/\s+/g, " ")
+             .trim()
+}
+
+// The tint as a whole percentage from 0 to 100; an unreadable value is the
+// default.
+export function scrimPercent(value, fallback) {
+  let percent = parseInt(value, 10)
+  if (isNaN(percent)) percent = fallback
+  return Math.min(Math.max(percent, 0), 100)
+}
+
+// Whether any field of `form` differs from `initial`. Field by field and not
+// JSON.stringify, whose output depends on key order: two equal objects can
+// stringify differently.
+//
+// No type coercion, deliberately. The payload sends real booleans for the two
+// checkboxes and strings for everything else, and a mutation run showed that
+// normalising them changed nothing. Unproven defensive code in a comparison
+// that decides whether a Save button appears is worse than none.
+export function formDirty(form, initial) {
+  return Object.keys(initial).some((key) => (form[key] ?? "") !== (initial[key] ?? ""))
+}
+
+// The logo has THREE states, and a URL field alone can only express two.
+// "standard" inherits, "custom" uses what this app uploaded, "hidden" is the
+// deliberate no-logo answer that blank cannot say.
+export function logoMode(hideLogo, uploadedLogo) {
+  if (hideLogo === true || hideLogo === "1") return "hidden"
+  if (uploadedLogo) return "custom"
+  return "standard"
+}
+
+export const FRAMED_PREVIEW = "iframe[data-email-banner-preview]"
+
+// A node of the banner rendered inside `scope`. The banner lives in an IFRAME
+// wherever studio/emails/_banner_preview isolates it (its default): the email's
+// table is its own document, so it cannot nest rows inside the list. The frame
+// is a same-origin srcdoc, so its nodes are reachable; contentDocument is null
+// until the frame has parsed, which is why whenFrameLoads exists.
+export function bannerNodeIn(scope, selector) {
+  const frame = scope.querySelector(FRAMED_PREVIEW)
+  if (frame) {
+    try { return frame.contentDocument && frame.contentDocument.querySelector(selector) }
+    catch (_) { return null }
+  }
+  return scope.querySelector(selector)
+}
+
+// Runs `repaint` each time the banner's frame in `scope` loads. Bound once per
+// frame, however often it is asked.
+export function whenFrameLoads(scope, repaint) {
+  const frame = scope.querySelector(FRAMED_PREVIEW)
+  if (!frame || frame.dataset.repaintBound) return
+  frame.dataset.repaintBound = "1"
+  frame.addEventListener("load", repaint)
+}
+
+// x-data="emailBannerEditor({...})".
+//
+// TOUCHED VS DIRTY: different questions, and the button answers both. `touched`
+// is "has anyone typed here", and it decides whether the button is SHOWN.
+// `dirty` is "is anything actually different from what is saved", and it
+// decides whether the button is ENABLED. Typing "A" into the subject and
+// deleting it again leaves touched true and dirty false: the button stays
+// visible and goes back to disabled, which tells the operator their edit was
+// undone and not silently swallowed.
+export function emailBannerEditor(config) {
+  return {
+    form: Object.assign({}, config.values),
+    initial: Object.assign({}, config.values),
+    targets: config.targets || [],
+    targetId: config.targetId,
+    touched: false,
+    pickerOpen: false,
+
+    init() {
+      this.paint()
+      this.$watch("form", () => { this.touched = true; this.paint() })
+      this.$watch("targetId", () => this.paint())
+    },
+
+    target() {
+      return this.targets.find((t) => t.id === this.targetId) || this.targets[0] || {}
+    },
+
+    firstName() {
+      return firstNameOf(this.target().name)
+    },
+
+    resolve(template, fallback) {
+      return resolveBannerText(template, fallback, this.firstName(), config.appName)
+    },
+
+    headerText() { return this.resolve(this.form.header, this.form.header_fallback) },
+    subjectText() { return this.resolve(this.form.subject, this.form.subject) },
+
+    dirty() {
+      return formDirty(this.form, this.initial)
+    },
+
+    logoMode() {
+      return logoMode(this.form.hide_logo, config.uploadedLogo)
+    },
+
+    setLogoMode(mode) {
+      this.form.hide_logo = mode === "hidden"
+    },
+
+    currentLogo() {
+      if (this.logoMode() === "hidden") return ""
+      return config.uploadedLogo || config.inheritedLogo || ""
+    },
+
+    // The slider's own fill, as a percentage string for --range-fill.
+    scrimFill() {
+      return scrimPercent(this.form.scrim_percent, config.defaultScrim) + "%"
+    },
+
+    scrimCss() {
+      return "rgba(24,16,64," + (scrimPercent(this.form.scrim_percent, config.defaultScrim) / 100) + ")"
+    },
+
+    paint() {
+      const root = this.$root
+      const header = bannerNodeIn(root, "[data-banner-header]")
+      const subtext = bannerNodeIn(root, "[data-banner-subtext]")
+      const logo = bannerNodeIn(root, "[data-banner-logo]")
+      const scrim = bannerNodeIn(root, "[data-banner-scrim]")
+      whenFrameLoads(root, () => this.paint())
+
+      if (header) header.textContent = this.headerText()
+      if (subtext) subtext.textContent = this.form.subtext || ""
+      if (scrim) scrim.style.backgroundColor = this.scrimCss()
+      if (logo) {
+        const url = this.currentLogo()
+        if (url) {
+          if (logo.getAttribute("src") !== url) logo.setAttribute("src", url)
+          logo.style.display = "block"
+        } else {
+          logo.style.display = "none"
+        }
+      }
+    },
+
+    // Every visible field is x-model bound and carries no name; the hidden
+    // form mirrors them. One submit writes the whole page.
+    save() {
+      if (!this.dirty()) return
+      this.$refs.saveForm.requestSubmit()
+    }
+  }
+}
+
+// x-data="emailRecipients({...})".
+//
+// The list shows each email's banner and subject as they would arrive. Both are
+// per-recipient (the banner greets by first name and the subject may too), so a
+// list rendered for one person is a list of half-truths about everyone else.
+//
+// WHY THE TEMPLATES RIDE ON THE ROW. Each row carries its own header, fallback
+// and subject templates as data attributes, read from the DOM. A second JSON
+// payload listing every email would have to be kept in step with the rows, and
+// a row whose payload entry went missing would silently stop repainting while
+// still looking correct for whoever was selected at page load.
+export function emailRecipients(config) {
+  return {
+    targets: config.targets || [],
+    targetId: config.targetId,
+    pickerOpen: false,
+
+    init() {
+      this.paint()
+      this.$watch("targetId", () => this.paint())
+    },
+
+    target() {
+      return this.targets.find((t) => t.id === this.targetId) || this.targets[0] || {}
+    },
+
+    firstName() {
+      return firstNameOf(this.target().name)
+    },
+
+    resolve(template, fallback) {
+      return resolveBannerText(template, fallback, this.firstName(), config.appName)
+    },
+
+    resolveSubject(template) {
+      return resolveSubjectText(template, this.firstName(), config.appName)
+    },
+
+    bannerNode(row, selector) {
+      return bannerNodeIn(row, selector)
+    },
+
+    paintRow(row) {
+      const header = this.bannerNode(row, "[data-banner-header]")
+      const subject = row.querySelector("[data-row-subject]")
+      if (header) {
+        header.textContent = this.resolve(row.dataset.header, row.dataset.headerFallback)
+      }
+      if (subject) subject.textContent = this.resolveSubject(row.dataset.subject)
+    },
+
+    paint() {
+      this.$root.querySelectorAll("[data-email-row]").forEach((row) => {
+        this.paintRow(row)
+        whenFrameLoads(row, () => { this.paintRow(row) })
+      })
+    },
+
+    // Anything interactive keeps its own behaviour; everything else opens the
+    // email. Without the closest() guard, clicking Upload would both open the
+    // cropper and navigate away from it.
+    openRow(event, row) {
+      // The listener sits on the tbody, so a click can land between rows and
+      // arrive with no row at all.
+      if (!row) return
+      if (event.target.closest("a, button, input, label, form")) return
+      const path = row.dataset.emailPath
+      if (path) window.location = path
+    }
+  }
+}

data/app/javascript/studio/email_banner_scale.js

@@ -0,0 +1,60 @@
+// studio/email_banner_scale: scales the 600px email banner down to whatever
+// width its frame has.
+//
+// WHY THIS NEEDS SCRIPT AT ALL. The banner is the EMAIL's own markup, a fixed
+// 600px table, and it must stay that way: an inbox has no responsive layout, so
+// making it fluid would mean previewing markup no one receives. The frame
+// beside it is fluid. Nothing in CSS converts a fixed-width box into a fluid
+// one without knowing the container's width, so the width is read and a
+// transform applied.
+//
+// WHAT IT DOES NOT DO: move anything. It sets a scale on a box whose height is
+// already reserved by `aspect-ratio`, so no reflow follows and there is no
+// paint-time jump.
+//
+// Without it the preview is unscaled and clipped, so a failure here costs the
+// improvement and not the page.
+//
+// It imports nothing; test/javascript/email_banner_scale.test.mjs loads it as a
+// data: module. Started by the email-banner-scale controller.
+
+export const PREVIEWS = "[data-email-banner-preview]"
+export const FRAMES = "[data-email-banner-frame]"
+export const NATURAL_WIDTH = 600
+
+// The scale that fits a `natural`-wide banner into `available` pixels. Never
+// above 1: at 1:1 the preview is exactly the 600px the recipient sees, and past
+// that it would show the operator a banner larger than any inbox renders.
+// Answers null when the frame has no width to fit.
+export function bannerScale(natural, available) {
+  if (!available) return null
+  return Math.min(available / (natural || NATURAL_WIDTH), 1)
+}
+
+// Scales one preview to its frame (its parent). Answers the scale it set, or
+// null when it set none.
+export function fitBanner(preview) {
+  const frame = preview.parentElement
+  if (!frame) return null
+  const scale = bannerScale(parseFloat(preview.dataset.bannerWidth), frame.clientWidth)
+  if (scale === null) return null
+  preview.style.transform = "scale(" + scale + ")"
+  return scale
+}
+
+export function fitAllBanners(doc) {
+  doc.querySelectorAll(PREVIEWS).forEach(fitBanner)
+}
+
+// Fits every preview in `doc` now and whenever a frame changes width. A
+// ResizeObserver and not a resize listener: a frame changes width when a
+// sidebar opens or the grid reflows, and neither resizes the window. Answers
+// the function that stops watching.
+export function startBannerScale(doc, Observer) {
+  fitAllBanners(doc)
+  if (typeof Observer !== "function") return () => {}
+
+  const observer = new Observer(() => fitAllBanners(doc))
+  doc.querySelectorAll(FRAMES).forEach((frame) => observer.observe(frame))
+  return () => observer.disconnect()
+}

data/app/javascript/studio/footer_map.js

@@ -0,0 +1,143 @@
+// studio/footer_map: mounts a Leaflet map on every [data-footer-map]
+// (docs/SITE_FOOTER.md). Leaflet (script and stylesheet) is fetched once, on
+// demand, from the URLs the element carries, so a page with no map pays nothing
+// for it. The basemap follows the site theme in CSS (studio/site_footer/
+// _map_assets). Tiles are OpenStreetMap's keyless ones; a basemap that needs an
+// API key does not belong in a gem.
+//
+// NOTHING STARTS BEFORE THE WINDOW'S `load`, AND NOTHING UNTIL THE MAP IS NEAR
+// THE VIEWPORT. The tiles are a third party's, and a request that starts before
+// `load` holds that event open for as long as the third party takes to answer.
+// The map is also at the bottom of every public page, where most visits never
+// reach: those pay for neither Leaflet nor a single tile.
+//
+// THE GUARD IS THE ENGINE'S OWN NAME, AND THE ELEMENTS ARE THE ENGINE'S OWN. An
+// app that still renders a local footer script guards it with the unprefixed
+// name and marks its map [data-footer-map] too. Sharing either would let
+// whichever script ran first in a Turbo session stand the other down and then
+// fail on its elements: that app's map carries no data-leaflet-js, so there is
+// nothing here to fetch.
+//
+// It imports nothing; test/javascript/footer_map.test.mjs loads it as a data:
+// module. Started by the footer-map controller.
+
+export const MAPS = "[data-footer-map][data-leaflet-js]"
+export const TILES = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+export const ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+
+// What a map element asks for: where it is centred, how far in, and whether it
+// shows zoom buttons. Answers null when the element carries no usable point.
+export function mapOptions(dataset) {
+  const at = [parseFloat(dataset.lat), parseFloat(dataset.lng)]
+  if (isNaN(at[0]) || isNaN(at[1])) return null
+  return { at, zoom: parseInt(dataset.zoom, 10) || 15, zoomControl: dataset.controls !== "false" }
+}
+
+// Installs the footer maps, once per document. Answers the function that arms
+// the maps now on the page (after `load`), whether this call installed it or an
+// earlier one did.
+export function installFooterMaps(win, doc) {
+  if (win.__studioFooterMapsArmed) return win.__studioFooterMapsArm || (() => {})
+  win.__studioFooterMapsArmed = true
+
+  let maps = []
+  let loading = null
+
+  // Checked on every mount, not once: a page visit that rebuilds the head must
+  // not leave a mounted map without its stylesheet.
+  function ensureStylesheet(href) {
+    if (!href || doc.querySelector("link[data-studio-leaflet]")) return
+    const link = doc.createElement("link")
+    link.rel = "stylesheet"
+    link.href = href
+    link.setAttribute("data-studio-leaflet", "")
+    doc.head.appendChild(link)
+  }
+
+  function loadLeaflet(src) {
+    if (win.L) return Promise.resolve()
+    if (loading) return loading
+    loading = new Promise((resolve, reject) => {
+      const s = doc.createElement("script")
+      s.src = src
+      s.onload = resolve
+      // A failed fetch must not be remembered: the next visit tries again.
+      s.onerror = () => { loading = null; s.remove(); reject(new Error("leaflet failed to load")) }
+      doc.head.appendChild(s)
+    })
+    return loading
+  }
+
+  function mount(el) {
+    if (el.__footerMap) return
+    const options = mapOptions(el.dataset)
+    if (!options) return
+    const L = win.L
+    // NO ONE-FINGER DRAG ON A TOUCH DEVICE. The map runs edge to edge, so on a
+    // phone a swipe that starts on it would pan the map instead of scrolling
+    // the page, and there is no gutter to scroll by. With dragging off Leaflet
+    // leaves touch-action at pan-x pan-y: one finger scrolls the page, and a
+    // pinch still zooms the map (touchZoom stays on, and moves it under the
+    // fingers). The zoom buttons and the directions link do the rest.
+    const map = L.map(el, { center: options.at, zoom: options.zoom,
+                            scrollWheelZoom: false, attributionControl: true,
+                            dragging: !L.Browser.mobile, touchZoom: true,
+                            zoomControl: options.zoomControl })
+    map.attributionControl.setPrefix(false)
+    L.tileLayer(TILES, { attribution: ATTRIBUTION, maxZoom: 19 }).addTo(map)
+    L.marker(options.at, { icon: L.divIcon({ className: "", html: '<div class="ftr-pin"></div>', iconSize: [18, 18], iconAnchor: [9, 9] }),
+                           keyboard: false }).addTo(map)
+    // Page scroll stays page scroll until the visitor commits to the map.
+    map.on("click", () => { map.scrollWheelZoom.enable() })
+    map.on("mouseout", () => { map.scrollWheelZoom.disable() })
+    const fallback = el.querySelector(".ftr-map-fallback")
+    if (fallback) { el.__footerFallback = fallback; fallback.remove() }
+    el.__footerMap = map
+    maps.push(el)
+  }
+
+  function fetchAndMount(el) {
+    ensureStylesheet(el.dataset.leafletCss)
+    loadLeaflet(el.dataset.leafletJs)
+      .then(() => { if (el.isConnected) mount(el) })
+      .catch(() => { /* the fallback link stays */ })
+  }
+
+  // One observer per map: it fires once, when the map comes within 400px of
+  // the viewport, and is then dropped.
+  function watch(el) {
+    if (el.__footerMap || el.__footerWatch) return
+    if (typeof win.IntersectionObserver !== "function") { fetchAndMount(el); return }
+    const watcher = new win.IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return
+      watcher.disconnect()
+      el.__footerWatch = null
+      fetchAndMount(el)
+    }, { rootMargin: "400px" })
+    el.__footerWatch = watcher
+    watcher.observe(el)
+  }
+
+  function armAll() { doc.querySelectorAll(MAPS).forEach(watch) }
+
+  function armAfterLoad() {
+    if (doc.readyState === "complete") armAll()
+    else win.addEventListener("load", armAll, { once: true })
+  }
+
+  // A cached Turbo snapshot would restore Leaflet's DOM without its state, so
+  // the map is taken down and its fallback link put back before the snapshot.
+  doc.addEventListener("turbo:before-cache", () => {
+    maps.forEach((el) => {
+      const fallback = el.__footerFallback
+      el.__footerMap.remove()
+      el.__footerMap = null
+      if (fallback && !el.querySelector(".ftr-map-fallback")) el.appendChild(fallback)
+    })
+    maps = []
+  })
+  doc.addEventListener("turbo:load", armAfterLoad)
+  win.__studioFooterMapsArm = armAfterLoad
+  armAfterLoad()
+  return armAfterLoad
+}

data/app/javascript/studio/geo_settings.js

@@ -0,0 +1,105 @@
+// studio/geo_settings: the live preview on the geo manager (/admin/geo). Tick
+// your own region and the navbar badge (and the Blocked? tile) answer at once,
+// before anything is saved, so an operator sees what a rule does to a real
+// visitor without saving to find out.
+//
+// geoBlocked mirrors Studio::Geo.blocked? on the client, deliberately and
+// narrowly: the same three rules, in the same order, with the same fail-closed
+// narrowing. It decides nothing: the server decides again on save and on every
+// request afterwards. A mirror can still drift, so turf-monster's browser lane
+// asserts the painted result against a policy the server also enforces.
+//
+// It imports nothing; test/javascript/geo_settings.test.mjs loads it as a
+// data: module. Bound to the page by the geo-settings controller.
+
+export const COUNTRY_BOXES = 'input[name="geo_setting[banned_countries][]"]'
+export const SUBDIVISION_BOXES = 'input[name="geo_setting[banned_subdivisions][]"]'
+export const ENABLED_BOX = 'input[type="checkbox"][name="geo_setting[enabled]"]'
+
+// Whether the policy in `rules` blocks `visitor`.
+//   rules:   { enabled, countries: [], subdivisions: [] }
+//   visitor: { country, subdivision, home, failClosed }
+export function geoBlocked(rules, visitor) {
+  if (!rules.enabled) return false
+
+  const { country, subdivision, home, failClosed } = visitor
+  if (country && rules.countries.indexOf(country) !== -1) return true
+  if (subdivision && country === home && rules.subdivisions.indexOf(subdivision) !== -1) return true
+
+  // Fail closed, narrowed exactly as the server narrows it: only a home-country
+  // visitor with NO region, and only when region rules exist.
+  if (!failClosed) return false
+  if (subdivision) return false
+  if (country !== home) return false
+  return rules.subdivisions.length > 0
+}
+
+// The visitor the page reports, from its data-geo-* attributes.
+export function visitorOf(page) {
+  return {
+    home: page.dataset.geoHome,
+    country: page.dataset.geoCountry,
+    subdivision: page.dataset.geoSubdivision,
+    failClosed: page.dataset.geoFailClosed === "true"
+  }
+}
+
+function checkedValues(page, selector) {
+  return Array.from(page.querySelectorAll(selector + ":checked"), (el) => el.value)
+}
+
+// The policy the editor's own boxes describe right now.
+export function rulesOf(page) {
+  const enabledBox = page.querySelector(ENABLED_BOX)
+  return {
+    enabled: !!(enabledBox && enabledBox.checked),
+    countries: checkedValues(page, COUNTRY_BOXES),
+    subdivisions: checkedValues(page, SUBDIVISION_BOXES)
+  }
+}
+
+// The summary chips are rebuilt from the editor's own squares, so they describe
+// the policy about to be saved and not the one on disk. Each chip is built from
+// its square's own flag, so there is no second copy of the artwork to keep in
+// step.
+export function refreshSummary(page, doc, kind, selector) {
+  const row = page.querySelector('[data-geo-summary="' + kind + '"]')
+  const counts = page.querySelectorAll('[data-geo-summary-count="' + kind + '"]')
+  if (!row) return
+
+  row.querySelectorAll(".geo-chip").forEach((chip) => chip.remove())
+
+  const boxes = Array.from(page.querySelectorAll(selector)).filter((box) => box.checked)
+  boxes.sort((a, b) => a.value.localeCompare(b.value))
+
+  boxes.forEach((box) => {
+    const square = box.closest("label")
+    const chip = doc.createElement("span")
+    chip.className = "geo-chip inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs font-mono"
+    const art = square && square.querySelector("img, span[role='img']")
+    if (art) chip.appendChild(art.cloneNode(true))
+    chip.appendChild(doc.createTextNode(box.value))
+    row.insertBefore(chip, row.querySelector(".geo-summary-empty"))
+  })
+
+  // The tab label and the summary heading carry the same number.
+  counts.forEach((el) => { el.textContent = boxes.length })
+}
+
+// Repaints the summaries, the root's data-geo-preview and the badge that shows
+// THIS visitor's location. A specimen badge rendered with other locals keeps
+// whatever it was given. Answers whether the visitor is blocked.
+export function paintGeo(page, doc) {
+  refreshSummary(page, doc, "states", SUBDIVISION_BOXES)
+  refreshSummary(page, doc, "countries", COUNTRY_BOXES)
+
+  const visitor = visitorOf(page)
+  const blocked = geoBlocked(rulesOf(page), visitor)
+  doc.documentElement.setAttribute("data-geo-preview", blocked ? "blocked" : "allowed")
+  doc.querySelectorAll("[data-geo-badge]").forEach((badge) => {
+    if (badge.dataset.country === visitor.country && (badge.dataset.subdivision || "") === (visitor.subdivision || "")) {
+      badge.setAttribute("data-blocked", blocked ? "true" : "false")
+    }
+  })
+  return blocked
+}