@escape-game-over/atlas 0.1.85 → 0.1.87

package/docs/client-scripts.md

@@ -521,6 +521,12 @@ is what every embed needs and has no taste in:
 - **Focus moves to the player.** The button that had it has just left the page,
   which would drop a keyboard reader back at the top of the document.
 
+Two choices stay with the project. `rel` lets the player suggest videos from
+other channels, and is off by default, so `rel=0` keeps the suggestions to the
+channel's own; YouTube has no setting that removes them altogether. `playsInline`
+keeps the video in the page on an iPhone rather than going full screen on the
+press.
+
 `frame` is called after all of that and before the iframe is in the page, so its
 word is the last one and nothing is drawn unstyled first.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.85",
+    "version": "0.1.87",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,
@@ -38,9 +38,10 @@
         "node": ">=24.0.0"
     },
     "scripts": {
-        "test": "npm run test:types && npm run test:unit && npm run test:examples",
+        "test": "npm run test:types && npm run test:unit && npm run test:astro && npm run test:examples",
         "test:types": "tsc --noEmit && astro check --root checks/astro",
         "test:unit": "vitest run --coverage",
+        "test:astro": "vitest run --config vitest.astro.config.ts",
         "test:watch": "vitest",
         "test:examples": "npm run test --workspaces",
         "lint": "biome check .",
@@ -61,7 +62,7 @@
         "@biomejs/biome": "2.6.5",
         "@types/node": "26.6.6",
         "@vitest/coverage-istanbul": "5.1.0",
-        "astro": "7.4.5",
+        "astro": "7.4.7",
         "typescript": "6.0.3",
         "vitest": "5.1.0"
     }

package/src/astro/Document.astro

@@ -27,11 +27,13 @@
  * </Document>
  * ```
  */
+
 import { Font } from "astro:assets";
 import type { HTMLAttributes } from "astro/types";
 import type { Fonts } from "../fonts.ts";
 import { iconLinks } from "../meta/index.ts";
 import type { PageMeta } from "../site/index.ts";
+import { recordConsentBanner } from "./consent-pages.ts";
 import MetaTags from "./MetaTags.astro";
 import RememberCampaign from "./RememberCampaign.astro";
 import RememberLocale from "./RememberLocale.astro";
@@ -62,6 +64,13 @@ const {
     rememberLocale = true,
 } = Astro.props;
 
+// Before the slots render, so a component in the page can tell: `GoogleMap`
+// refuses to load on sight where nobody can be asked.
+recordConsentBanner(
+    Astro.request,
+    meta.consentVendors.length > 0 && Astro.slots.has("consent")
+);
+
 if (meta.consentVendors.length > 0 && !Astro.slots.has("consent")) {
     throw new Error(
         `${meta.consentVendors.join(", ")} ${meta.consentVendors.length === 1 ? "needs" : "need"} permission, but this page has no consent banner. Pass one to Document: <ConsentBanner slot="consent" …>.`

package/src/astro/GoogleMap.astro

@@ -2,7 +2,19 @@
 /**
  * A Google map of `places`, loaded only when asked for. Until then the element
  * shows its children: a picture and a button, say. With `load="click"` (the
- * default) a click anywhere on them loads it; with `"visible"`, scrolling near.
+ * default) a click anywhere on them loads it, and that click is the reader
+ * asking for Google, so say so on the button. With `"visible"`, scrolling near
+ * loads it, but only once the reader has granted marketing consent: Google
+ * sets its cookies either way, and nobody asked for the map. A page using
+ * `"visible"` without a consent banner fails the build.
+ *
+ * The check trusts that a filled `consent` slot shows a banner. Astro counts the
+ * slot as filled whenever an element names it, so one that renders nothing —
+ * `{shown && <div slot="consent">}`, an empty element, a component of your own
+ * that renders nothing — passes it with no banner on the page. Put the banner
+ * in the slot unconditionally: `ConsentBanner` already renders nothing on a
+ * site that needs no permission. Until a reader grants marketing, the map's
+ * children stay, so they should read sensibly on their own.
  *
  * `mapId` is required: markers are `AdvancedMarkerElement`, which needs one,
  * and its colours are set on the Map ID in the Cloud console. `colorScheme`
@@ -26,6 +38,7 @@ import type { HTMLAttributes } from "astro/types";
 import { type MapPlace, mapFrame } from "../map.ts";
 import type { NonEmpty } from "../types.ts";
 import AtlasElement from "./AtlasElement.astro";
+import { showsConsentBanner } from "./consent-pages.ts";
 import { type GoogleMapConfig, googleMap } from "./google-map.ts";
 
 type Props = HTMLAttributes<"div"> & {
@@ -45,6 +58,12 @@ const {
     ...attrs
 } = Astro.props;
 
+if (load === "visible" && showsConsentBanner(Astro.request) !== true) {
+    throw new Error(
+        `${Astro.url.pathname}: GoogleMap with load="visible" waits for marketing consent, but this page shows no consent banner to ask for it. Use load="click", where the reader's click is the asking, or give the page a banner: <ConsentBanner slot="consent" …> in Document, with a vendor that needs it.`
+    );
+}
+
 const config: GoogleMapConfig = {
     apiKey,
     mapId,

package/src/astro/consent-pages.ts

@@ -0,0 +1,24 @@
+/**
+ * Which pages of a build show a consent banner, for a component that must not
+ * render without one.
+ *
+ * `Document` records it from the page's `meta` before it renders its slots, so
+ * anything in the page's body can ask. Keyed by the page's request: each page
+ * of a static build renders with its own, and a `WeakMap` lets them go.
+ *
+ * Server-only, like `Document`.
+ */
+const pages = new WeakMap<Request, boolean>();
+
+/** What `Document` records: whether this page shows a consent banner. */
+export function recordConsentBanner(request: Request, shown: boolean): void {
+    pages.set(request, shown);
+}
+
+/**
+ * Whether this page shows a consent banner. `undefined` when no `Document` has
+ * rendered for it, which a caller should treat as no.
+ */
+export function showsConsentBanner(request: Request): boolean | undefined {
+    return pages.get(request);
+}

package/src/astro/google-map.ts

@@ -1,6 +1,7 @@
 /// <reference types="google.maps" />
 import type { MapFrame } from "../map.ts";
 import { appendScript } from "./append-script.ts";
+import { whenGranted } from "./consent-gate.ts";
 import { reportDevError } from "./dev-log.ts";
 import { element } from "./element.ts";
 import { triggered } from "./load-script.ts";
@@ -122,10 +123,24 @@ export const googleMap = element("atlas-google-map", ({ root, signal }) => {
         draw(root, config).catch((error) => reportDevError("GoogleMap", error));
     };
 
-    triggered(
-        config.load === "click"
-            ? { on: "click", element: root }
-            : { on: "visible", element: root },
+    if (config.load === "click") {
+        triggered({ on: "click", element: root }, signal).then(show);
+        return;
+    }
+
+    // On sight, but never before marketing is granted: the build makes sure
+    // there is a banner to grant it. Once drawn, a withdrawn grant leaves the
+    // map be — Google has already set what it sets.
+    let asked = false;
+    whenGranted(
+        "marketing",
+        {
+            grant: () => {
+                if (asked) return;
+                asked = true;
+                triggered({ on: "visible", element: root }, signal).then(show);
+            },
+        },
         signal
-    ).then(show);
+    );
 });

package/src/astro/youtube.ts

@@ -55,6 +55,19 @@ export interface YouTubeEmbedOptions {
      * player has no way to tell which video it is.
      */
     readonly title: string;
+    /**
+     * Whether the player may suggest videos from other channels. Off unless
+     * asked for: with `rel=0` it suggests only the channel's own, so a trailer
+     * on a project's page does not end on someone else's video.
+     *
+     * YouTube has no setting that removes the suggestions altogether.
+     */
+    readonly rel?: boolean;
+    /**
+     * Whether an iPhone plays the video in the page rather than taking it
+     * full screen on the press.
+     */
+    readonly playsInline?: boolean;
     /**
      * Anything the project wants on the iframe — classes, above all.
      *
@@ -106,7 +119,7 @@ const ALLOW =
     "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
 
 export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
-    const { id, title, frame } = options;
+    const { id, title, rel = false, playsInline = false, frame } = options;
 
     if (!VIDEO_ID.test(id)) {
         throw new Error(
@@ -122,7 +135,10 @@ export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
     // `youtube-nocookie.com` rather than `youtube.com`: the same player, which
     // sets no cookie until the video is played — and here it is only ever
     // loaded to be played, so nothing is lost by it.
-    const src = `https://www.youtube-nocookie.com/embed/${id}?autoplay=1`;
+    const url = new URL(`https://www.youtube-nocookie.com/embed/${id}`);
+    url.searchParams.set("autoplay", "1");
+    url.searchParams.set("rel", rel ? "1" : "0");
+    if (playsInline) url.searchParams.set("playsinline", "1");
 
     return {
         attach(trigger, container) {
@@ -133,7 +149,7 @@ export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
                 () => {
                     const iframe =
                         container.ownerDocument.createElement("iframe");
-                    iframe.src = src;
+                    iframe.src = url.href;
                     iframe.title = title;
                     iframe.allow = ALLOW;
                     iframe.allowFullscreen = true;