@seamlet/astro 0.5.0 → 0.6.0

package/README.md

@@ -125,6 +125,22 @@ A photo may carry the point that must stay in view when the site crops it, chose
 />
 ```
 
+A photo may also be one of the site's own files, named by an address of the site (`/menu/01.jpg`) that the site turns into its image when it renders. Give `defineSeamletSite` a `photos` function that finds that image, and the CMS's editor shows the photo in its field too:
+
+```ts
+const MENU_FILES = import.meta.glob<{ default: ImageMetadata }>(
+  "./assets/menu/*.jpg",
+  { eager: true },
+);
+
+export default defineSeamletSite({
+  id: "zerno",
+  schema,
+  pages: { "/": HomePage },
+  photos: (src) => MENU_FILES[src.replace("/menu/", "./assets/menu/")]?.default,
+});
+```
+
 ## Presets
 
 Sets of fields almost every site has, edited the same way everywhere; they are plain groups and collections, rendered as the site likes:
@@ -164,7 +180,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,6 +194,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.
+- `/seamlet-photos/<address>`: the site's own photo at an address its content gives it, found by `photos` of `defineSeamletSite`, for the CMS's editor.
 - `/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/chunk-3BS5CE26.js

@@ -0,0 +1,20 @@
+// src/own-photos.ts
+var OWN_PHOTOS_PATH = "/seamlet-photos";
+var UPLOADS_PATH = "/media/";
+var PARENT_SEGMENT = "..";
+function isOwnPhotoSrc(src) {
+  const isOnSite = src.startsWith("/") && !src.startsWith("//");
+  const isUpload = src.startsWith(UPLOADS_PATH);
+  const isPlainPath = !/[?#\\]/u.test(src);
+  const climbsUp = src.split("/").includes(PARENT_SEGMENT);
+  return isOnSite && !isUpload && isPlainPath && !climbsUp;
+}
+function ownPhotoPath(src) {
+  return isOwnPhotoSrc(src) ? `${OWN_PHOTOS_PATH}${src}` : void 0;
+}
+
+export {
+  OWN_PHOTOS_PATH,
+  isOwnPhotoSrc,
+  ownPhotoPath
+};

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  OWN_PHOTOS_PATH
+} from "./chunk-3BS5CE26.js";
 import {
   isUploadedPhoto
 } from "./chunk-P2OQOZBC.js";
@@ -89,6 +92,11 @@ function seamlet(options) {
           entrypoint: "@seamlet/astro/routes/media",
           prerender: false
         });
+        injectRoute({
+          pattern: `${OWN_PHOTOS_PATH}/[...path]`,
+          entrypoint: "@seamlet/astro/routes/own-photos",
+          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

package/dist/protocol.d.ts

@@ -16,4 +16,11 @@ declare function imageFieldAt(schema: Fields, path: string | undefined): {
  */
 declare function closestMarkedPath(path: FieldPath, isMarked: (path: string) => boolean): string | undefined;
 
-export { carriesFiles, closestMarkedPath, imageFieldAt };
+/** Where a site hands out its own photos: `/seamlet-photos/menu/cafe/01.jpg`. */
+declare const OWN_PHOTOS_PATH = "/seamlet-photos";
+/** An address of the site itself that is not an upload, and that cannot climb out of the site. */
+declare function isOwnPhotoSrc(src: string): boolean;
+/** Where the site hands out its own photo; undefined for an upload or another site's address. */
+declare function ownPhotoPath(src: string): string | undefined;
+
+export { OWN_PHOTOS_PATH, carriesFiles, closestMarkedPath, imageFieldAt, isOwnPhotoSrc, ownPhotoPath };

package/dist/protocol.js

@@ -1,3 +1,8 @@
+import {
+  OWN_PHOTOS_PATH,
+  isOwnPhotoSrc,
+  ownPhotoPath
+} from "./chunk-3BS5CE26.js";
 import {
   PROTOCOL_VERSION,
   carriesFiles,
@@ -9,10 +14,13 @@ import {
 } from "./chunk-XCBYYKWR.js";
 import "./chunk-GLXC5OLC.js";
 export {
+  OWN_PHOTOS_PATH,
   PROTOCOL_VERSION,
   carriesFiles,
   closestMarkedPath,
   imageFieldAt,
+  isOwnPhotoSrc,
+  ownPhotoPath,
   readEditorMessage,
   readPageMessage,
   shortcutOf

package/dist/routes/own-photos.d.ts

@@ -0,0 +1,5 @@
+import { APIRoute } from 'astro';
+
+declare const GET: APIRoute;
+
+export { GET };

package/dist/routes/own-photos.js

@@ -0,0 +1,19 @@
+import {
+  isOwnPhotoSrc
+} from "../chunk-3BS5CE26.js";
+
+// src/routes/own-photos.ts
+import site from "virtual:seamlet/site";
+var NOT_FOUND = 404;
+var FOUND = 302;
+var GET = ({ params, redirect }) => {
+  const src = `/${params["path"] ?? ""}`;
+  const photo = isOwnPhotoSrc(src) ? site.ownPhotoAt(src) : void 0;
+  if (photo === void 0) {
+    return new Response(null, { status: NOT_FOUND });
+  }
+  return redirect(photo.src, FOUND);
+};
+export {
+  GET
+};

package/dist/site.d.ts

@@ -1,3 +1,4 @@
+import { ImageMetadata } from 'astro';
 import { AstroComponentFactory } from 'astro/runtime/server/index.js';
 import { F as Fields, C as ContentOf } from './content-C_WpiWBm.js';
 
@@ -10,6 +11,11 @@ interface SeamletSiteDefinition<F extends Fields> {
      * as their `content` prop. The CMS lists the same addresses for its editor.
      */
     readonly pages: Readonly<Record<string, AstroComponentFactory>>;
+    /**
+     * The site's own photo at the address its content gives it (`/menu/cafe/01.jpg`), so the CMS's
+     * editor can show it in the photo's field. A site without own photos leaves it out.
+     */
+    readonly photos?: (src: string) => ImageMetadata | undefined;
 }
 interface SeamletSite<F extends Fields = Fields> {
     readonly id: string;
@@ -18,6 +24,8 @@ interface SeamletSite<F extends Fields = Fields> {
     readonly pageAt: (rest: string | undefined) => AstroComponentFactory | undefined;
     /** What the CMS published: the site's initial content until the first publication. */
     readonly loadPublishedContent: () => Promise<ContentOf<F>>;
+    /** The site's own photo at an address its content gives it, if it has one there. */
+    readonly ownPhotoAt: (src: string) => ImageMetadata | undefined;
 }
 /** Describes the site for the integration: `src/seamlet.ts` exports it as its default. */
 declare function defineSeamletSite<F extends Fields>(definition: SeamletSiteDefinition<F>): SeamletSite<F>;

package/dist/site.js

@@ -14,7 +14,8 @@ function defineSeamletSite(definition) {
     loadPublishedContent: async () => {
       const published = await fetchPublished(definition.id);
       return parseContent(definition.schema, published).content;
-    }
+    },
+    ownPhotoAt: (src) => definition.photos?.(src)
   };
 }
 async function fetchPublished(siteId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlet/astro",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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",
@@ -42,6 +42,10 @@
     "./routes/media": {
       "types": "./dist/routes/media.d.ts",
       "default": "./dist/routes/media.js"
+    },
+    "./routes/own-photos": {
+      "types": "./dist/routes/own-photos.d.ts",
+      "default": "./dist/routes/own-photos.js"
     }
   },
   "files": [