@seamlet/astro 0.4.0 → 0.5.1

package/README.md

@@ -164,7 +164,7 @@ A reference to a record removed since is kept, with the issue `missing-record`:
 
 ## What the page hides
 
-A field is edited where it is seen, so the editor opens what hides it when a person chooses it in the list of fields. A native `<details>` needs nothing: a click on its summary opens it in the editor too. A part the site hides and shows by itself (its own accordion, a step of a quiz, a dialog, a tab) gets the attribute `data-cms-reveal` (`REVEAL_ATTRIBUTE`). When a field inside it is chosen, the bridge sets `data-cms-revealed` on it and sends it the event `cms:reveal`, which bubbles; the site shows the part with CSS or with its own script:
+A field is edited where it is seen, so the editor opens what hides it when a person chooses it in the list of fields. A native `<details>` needs nothing: a click on its summary opens it in the editor too. Neither do tabs, filters and toggles made of radio buttons and checkboxes and shown with CSS: a click on one or its label flips it in the editor, and the page keeps it flipped after every edit. A part the site hides and shows by itself (its own accordion, a step of a quiz, a dialog, a tab) gets the attribute `data-cms-reveal` (`REVEAL_ATTRIBUTE`). When a field inside it is chosen, the bridge sets `data-cms-revealed` on it and sends it the event `cms:reveal`, which bubbles; the site shows the part with CSS or with its own script:
 
 ```css
 [data-cms-reveal][data-cms-revealed] {
@@ -178,7 +178,7 @@ What was opened stays open while the page is rendered anew after every edit.
 
 - `/preview` and `/preview/<page>`: the preview the CMS's editor frames. `GET` shows the published content; `POST` with the content as JSON shows that content without saving it, which is how the editor shows every edit at once. Only the CMS may frame it (`Content-Security-Policy: frame-ancestors`), and it is never indexed or cached.
 - The bridge on the preview: it tells the editor where the marked elements are and what a person does on the page, and types texts in place.
-- `/media/<site>/<file>`: the photos uploaded in the CMS, taken from it.
+- `/media/<site>/<file>`: the photos uploaded in the CMS, taken from it on request; a static build copies every uploaded photo its built pages refer to next to them, so a static host serves them too.
 
 A site never renders content as raw HTML (`set:html`): the editor acts on what its preview says.
 

package/dist/bridge.js

@@ -62,6 +62,7 @@ function asElement(value) {
 // src/bridge/page-reveals.ts
 var DETAILS_SELECTOR = "details";
 var REVEAL_SELECTOR = `[${REVEAL_ATTRIBUTE}]`;
+var SWITCH_SELECTOR = 'input[type="radio"], input[type="checkbox"]';
 function revealAround(element) {
   for (let part = element; part !== null; ) {
     if (isDetails(part)) part.open = true;
@@ -78,14 +79,28 @@ function toggleDetailsAt(target, isOnField) {
   }
   if (!isOnField) details.open = false;
 }
+function flipSwitchAt(target, isOnField) {
+  const control = switchAround(target);
+  if (control === void 0) return;
+  const isRadio = control.type === "radio";
+  const isFlipped = isRadio ? !control.checked : !isOnField;
+  if (!isFlipped) return;
+  control.checked = isRadio || !control.checked;
+  announceSwitch(control);
+}
 function revealedPartsOf(document2) {
   const details = [...document2.querySelectorAll(DETAILS_SELECTOR)];
   const parts = [...document2.querySelectorAll(REVEAL_SELECTOR)];
+  const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
   return {
     openDetails: indexesWhere(details, (part) => isDetails(part) && part.open),
     revealed: indexesWhere(
       parts,
       (part) => part.hasAttribute(REVEALED_ATTRIBUTE)
+    ),
+    flippedSwitches: indexesWhere(
+      switches,
+      (control) => isSwitch(control) && control.checked !== control.defaultChecked
     )
   };
 }
@@ -100,6 +115,26 @@ function restoreRevealedParts(document2, revealed) {
     const part = parts[index];
     if (part !== void 0) reveal(part);
   }
+  restoreSwitches(document2, revealed.flippedSwitches);
+}
+function restoreSwitches(document2, flipped) {
+  const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
+  for (const index of flipped) {
+    const control = switches[index];
+    if (control === void 0 || !isSwitch(control)) continue;
+    control.checked = !control.defaultChecked;
+    announceSwitch(control);
+  }
+}
+function announceSwitch(control) {
+  control.dispatchEvent(new Event("input", { bubbles: true }));
+  control.dispatchEvent(new Event("change", { bubbles: true }));
+}
+function switchAround(target) {
+  if (!isElement(target)) return void 0;
+  const label = target.closest("label");
+  const control = isLabel(label) ? label.control : target;
+  return control !== null && isSwitch(control) ? control : void 0;
 }
 function reveal(part) {
   if (part.hasAttribute(REVEALED_ATTRIBUTE)) return;
@@ -120,6 +155,12 @@ function indexesWhere(elements, isPicked) {
 function isDetails(element) {
   return element.localName === "details";
 }
+function isLabel(element) {
+  return element?.localName === "label";
+}
+function isSwitch(element) {
+  return element.matches(SWITCH_SELECTOR);
+}
 function isElement(value) {
   return value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
 }
@@ -147,7 +188,9 @@ function listenToPage(document2, listeners) {
       return;
     }
     const marked = markedElementAround(event.target);
-    toggleDetailsAt(event.target, marked !== void 0);
+    const isOnField = marked !== void 0;
+    toggleDetailsAt(event.target, isOnField);
+    flipSwitchAt(event.target, isOnField);
     listeners.onClick(
       marked === void 0 ? void 0 : { ...marked, point: { x: event.clientX, y: event.clientY } }
     );
@@ -194,6 +237,8 @@ function listenToPage(document2, listeners) {
     ["scroll", listeners.onLayoutChange],
     // An opened or closed `<details>` moves what is below it; toggle does not bubble.
     ["toggle", listeners.onLayoutChange],
+    // A flipped switch shows and hides parts of the page.
+    ["change", listeners.onLayoutChange],
     // Images load after the page is shown and move what is below them; load does not bubble.
     ["load", listeners.onLayoutChange]
   ];

package/dist/index.js

@@ -1,5 +1,53 @@
+import {
+  isUploadedPhoto
+} from "./chunk-P2OQOZBC.js";
+
 // src/index.ts
 import { fileURLToPath } from "url";
+
+// src/uploaded-photos.ts
+import { mkdir, readdir, readFile, writeFile } from "fs/promises";
+import { dirname, join } from "path";
+var PHOTO_ADDRESS = /\/media\/([a-z0-9-]+)\/([A-Za-z0-9_-]+\.webp)/gu;
+var HTML_EXTENSION = ".html";
+function uploadedPhotoAddresses(html) {
+  const addresses = [...html.matchAll(PHOTO_ADDRESS)].flatMap(
+    ([address, , fileName]) => isUploadedPhoto(fileName) ? [address] : []
+  );
+  return [...new Set(addresses)];
+}
+async function copyUploadedPhotos(options) {
+  const pages = await htmlFilesIn(options.directory);
+  const texts = await Promise.all(pages.map((page) => readFile(page, "utf8")));
+  const addresses = new Set(texts.flatMap(uploadedPhotoAddresses));
+  await Promise.all(
+    [...addresses].map(
+      (address) => copyPhoto(address, options.directory, options.cmsOrigin)
+    )
+  );
+  return addresses.size;
+}
+async function copyPhoto(address, directory, cmsOrigin) {
+  const url = new URL(address, cmsOrigin);
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(
+      `Copying the photo ${url.href} into the build failed with status ${String(response.status)}`
+    );
+  }
+  const target = join(directory, address);
+  await mkdir(dirname(target), { recursive: true });
+  await writeFile(target, new Uint8Array(await response.arrayBuffer()));
+}
+async function htmlFilesIn(directory) {
+  const entries = await readdir(directory, {
+    recursive: true,
+    withFileTypes: true
+  });
+  return entries.filter((entry) => entry.isFile() && entry.name.endsWith(HTML_EXTENSION)).map((entry) => join(entry.parentPath, entry.name));
+}
+
+// src/index.ts
 var CONFIG_MODULE = "virtual:seamlet/config";
 var SITE_MODULE = "virtual:seamlet/site";
 var RESOLVED_CONFIG_MODULE = `\0${CONFIG_MODULE}`;
@@ -41,6 +89,16 @@ function seamlet(options) {
           entrypoint: "@seamlet/astro/routes/media",
           prerender: false
         });
+      },
+      // A static host has no route to take the uploaded photos from the CMS on request: the photos
+      // the built pages refer to are copied next to them. Pages rendered on request take them
+      // through the route above.
+      "astro:build:done": async ({ dir, logger }) => {
+        const copied = await copyUploadedPhotos({
+          directory: fileURLToPath(dir),
+          cmsOrigin
+        });
+        if (copied > 0) logger.info(`copied ${String(copied)} uploaded photos`);
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlet/astro",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Connects an Astro site to the Seamlet CMS: the schema of its content, the preview the editor frames, and its published content.",
   "license": "MIT",
   "type": "module",