@escape-game-over/atlas 0.1.104 → 0.1.106

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.104",
+    "version": "0.1.106",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,
@@ -18,6 +18,7 @@
         "./client": "./src/astro/client.ts",
         "./astro/auto-dialog": "./src/astro/AutoDialog.astro",
         "./astro/background-video": "./src/astro/BackgroundVideo.astro",
+        "./astro/booking-widget": "./src/astro/BookingWidget.astro",
         "./astro/consent-banner": "./src/astro/ConsentBanner.astro",
         "./astro/document": "./src/astro/Document.astro",
         "./astro/element": "./src/astro/AtlasElement.astro",

package/src/astro/BookingWidget.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * A booking widget, whatever its vendor: the one place that picks the
+ * vendor's component, so a site passes what its config holds and nothing
+ * else. Attributes go to that component's element.
+ *
+ * `vars` are the widget's own vendor's CSS variables, typed by the widget it
+ * is given (`BookingWidgetVars`): 4escape's for a 4escape widget. A widget
+ * whose vendor is not known where it is passed accepts any vendor's.
+ *
+ * ```astro
+ * <BookingWidget widget={settings.booking} locale={locale} vars={{ "--f-top-offset": "5.5rem" }} />
+ * ```
+ */
+import type { HTMLAttributes } from "astro/types";
+import type { BookingWidget, BookingWidgetVars } from "../booking/widget.ts";
+import FourEscape from "./FourEscape.astro";
+
+type Props<W extends BookingWidget = BookingWidget> = HTMLAttributes<"div"> & {
+    readonly widget: W;
+    /** The page's: the widget speaks it when its vendor has it. */
+    readonly locale: string;
+    /** The widget's vendor's CSS variables, set on its widgets. */
+    readonly vars?: BookingWidgetVars<W>;
+};
+
+const { widget, locale, vars, ...attrs } = Astro.props;
+---
+
+{widget.vendor === "4escape" && (
+    <FourEscape
+        {...attrs}
+        widgetId={widget.widgetId}
+        domain={widget.domain}
+        locale={locale}
+        vars={vars}
+    />
+)}

package/src/astro/FourEscape.astro

@@ -8,9 +8,10 @@
  * the account's language as 4escape sets it. The cart is one per page: give
  * the second catalog on a page `cart={false}`.
  *
- * The widgets draw themselves, in 4escape's style. Attributes go on the
- * element around the catalog, which is the place to give it room; the cart
- * follows it.
+ * The widgets draw themselves, in 4escape's style; `vars` sets 4escape's own
+ * variables on them (see `FourEscapeVars`), such as `--f-top-offset` for a
+ * fixed header. Attributes go on the element around the catalog, which is the
+ * place to give it room; the cart follows it.
  *
  * ```astro
  * <FourEscape widgetId={id} domain="acme.4escape.io" locale={locale} class="my-8" />
@@ -21,23 +22,28 @@ import {
     checkFourEscape,
     FOUR_ESCAPE_SCRIPT,
     FOUR_ESCAPE_STYLESHEET,
+    type FourEscapeVars,
     type FourEscapeWidget,
     fourEscapeLanguage,
     fourEscapeSettings,
+    fourEscapeStyle,
 } from "../booking/four-escape.ts";
 
 type Props = HTMLAttributes<"div"> &
     FourEscapeWidget & {
         readonly locale: string;
         readonly cart?: boolean;
+        /** 4escape's variables, set on both widgets. */
+        readonly vars?: FourEscapeVars;
     };
 
-const { widgetId, domain, locale, cart = true, ...attrs } = Astro.props;
+const { widgetId, domain, vars, locale, cart = true, ...attrs } = Astro.props;
 
 checkFourEscape({ widgetId, domain }, Astro.url.pathname);
 
 const settings = fourEscapeSettings(domain);
 const language = fourEscapeLanguage(locale);
+const style = fourEscapeStyle(vars);
 ---
 
 <link
@@ -51,6 +57,7 @@ const language = fourEscapeLanguage(locale);
         data-widget-id={widgetId}
         data-settings={settings}
         data-language={language}
+        style={style}
     ></div>
 </div>
 {cart && (
@@ -58,6 +65,7 @@ const language = fourEscapeLanguage(locale);
         class='forescape-cart'
         data-settings={settings}
         data-language={language}
+        style={style}
     />
 )}
 <script

package/src/booking/four-escape.ts

@@ -25,6 +25,17 @@ export interface FourEscapeWidget {
     readonly domain: string;
 }
 
+/**
+ * 4escape's own CSS variables, by name, as a page sets them on the widgets.
+ * Free, beyond the `--f-` prefix: 4escape documents none, and its stylesheet
+ * (`.forescape`) declares some 670. The ones that matter most:
+ *
+ * - `--f-top-offset`: the space a fixed header takes. The cart button's
+ *   offset (`--f-cart-top-offset`) and the widgets' scroll margins follow it.
+ * - `--f-primary`, `--f-primary-hover`: buttons and highlights.
+ */
+export type FourEscapeVars = Readonly<Partial<Record<`--f-${string}`, string>>>;
+
 /** The languages the widgets are translated into, as `data-language` takes them. */
 export const FOUR_ESCAPE_LANGUAGES = [
     "fr",
@@ -64,6 +75,18 @@ export function checkFourEscape(widget: FourEscapeWidget, at: string): void {
     }
 }
 
+/**
+ * The widgets' elements' inline style, from a page's `vars`. Inline because
+ * 4escape declares its variables on those same elements, in an unlayered
+ * stylesheet: a site's own CSS loses to it, and inline does not.
+ */
+export function fourEscapeStyle(vars: FourEscapeVars = {}): string | undefined {
+    const declarations = Object.entries(vars).map(
+        ([name, value]) => `${name}: ${value}`
+    );
+    return declarations.length > 0 ? declarations.join("; ") : undefined;
+}
+
 /** `data-settings` for an account: `b64.` and the settings as base64 JSON. */
 export function fourEscapeSettings(domain: string): string {
     return `b64.${btoa(JSON.stringify({ domain }))}`;

package/src/booking/widget.ts

@@ -1,4 +1,4 @@
-import type { FourEscapeWidget } from "./four-escape.ts";
+import type { FourEscapeVars, FourEscapeWidget } from "./four-escape.ts";
 
 /**
  * A booking widget a site embeds, by its vendor: what a site's config names,
@@ -8,3 +8,12 @@ export type BookingWidget = { readonly vendor: "4escape" } & FourEscapeWidget;
 
 /** Who makes a booking widget: what `storedItems` takes for their rows. */
 export type BookingVendor = BookingWidget["vendor"];
+
+/** Each vendor's CSS variables, as a page sets them on its widgets. */
+export interface BookingVendorVars {
+    readonly "4escape": FourEscapeVars;
+}
+
+/** The CSS variables a widget takes: its own vendor's, and no other's. */
+export type BookingWidgetVars<W extends BookingWidget> =
+    BookingVendorVars[W["vendor"]];

package/src/index.ts

@@ -61,11 +61,18 @@ export {
     FOUR_ESCAPE_SCRIPT,
     FOUR_ESCAPE_STYLESHEET,
     type FourEscapeLanguage,
+    type FourEscapeVars,
     type FourEscapeWidget,
     fourEscapeLanguage,
     fourEscapeSettings,
+    fourEscapeStyle,
 } from "./booking/four-escape.ts";
-export type { BookingVendor, BookingWidget } from "./booking/widget.ts";
+export type {
+    BookingVendor,
+    BookingVendorVars,
+    BookingWidget,
+    BookingWidgetVars,
+} from "./booking/widget.ts";
 export type {
     LanguageTag,
     LocaleMeta,