@seamlet/astro 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.2.0
+
+- `productFields()`: the fields of a product of a catalog, for the record of a collection, with its address, photos, a short and a whole description, the price with a word about it, characteristics as pairs of a name and a value, the switch that hides it and what search engines show.
+- `recordPages(…, { shows })` leaves the pages of some records off the site: `site.pageOf` and `site.staticPaths` leave them out, `pathOf` gives them no address, and the preview shows them (`site.previewPageOf`), so the owner prepares a hidden record in the editor.
+
+## 1.1.0
+
+- Pages of records: `recordPages(schema, { collection, path: "/menu/[record]" })` gives every record of a collection a page, rendered by one component with `content`, `record` and `index`; `defineSeamletSite` takes them as `recordPages`, the site's description tells the CMS about them, and the preview shows them, a record the editor has just added too.
+- `slug({ label })`: the address of a record's page, checked as an address (`invalid-slug`) and as one of a kind in its collection (`taken-slug`); `slugOf` spells it from Russian words. A record without a slug has its page at its id.
+- `site.pageOf(rest, content)` and `site.staticPaths(content)` render every page of a site from one `[...page]` route, the pages of records too. `site.pageAt` renders the site's own pages only, and is deprecated.
+- The preview answers an address of no page at once, without asking the CMS or reading the draft.
+
+A site with a `slug` or pages of records needs a CMS that reads descriptions of 1.1 (cms.seamlet.ru from its release 1.1.0): an older one refuses the kind `slug`. Code with an exhaustive `switch` over `Field`, `ContentIssue`, `SchemaProblemReason` or `SiteDescriptionProblem` gets their new members to handle.
+
 ## 1.0.0
 
 The first stable version. From here the package follows semver: what a site writes against it keeps building until the next major version.

package/README.md

@@ -67,7 +67,7 @@ npx astro add @seamlet/astro node                   # the integration, and an ad
    <h1 {...edit("title")}>{content.title}</h1>
    ```
 
-4. Describe the site for the CMS in `src/seamlet.ts`: its schema, the content it starts with, and its pages, each with the name the editor gives it and the component that renders it (it takes the content as its `content` prop). The home page `/` comes first; `searchTexts` names where the content holds a page's title and description for search engines, a group of a `title` and a `description` text (`seoFields`).
+4. Describe the site for the CMS in `src/seamlet.ts`: its schema, the content it starts with, and its pages, each with the name the editor gives it and the component that renders it (it takes the content as its `content` prop), and the pages of records if it has them (see «Pages of records»). The home page `/` comes first; `searchTexts` names where the content holds a page's title and description for search engines, a group of a `title` and a `description` text (`seoFields`).
 
    ```ts
    // src/seamlet.ts
@@ -98,6 +98,23 @@ npx astro add @seamlet/astro node                   # the integration, and an ad
    });
    ```
 
+A site renders all its pages, the pages of records too (below), from one route `src/pages/[...page].astro`: `site.staticPaths(content)` lists every page for a static build, and `site.pageOf(rest, content)` finds the one asked for on request; each gives the component and the props to render it with.
+
+```astro
+---
+// src/pages/[...page].astro, built as static pages
+import site from "../seamlet";
+
+export async function getStaticPaths() {
+  return site.staticPaths(await site.loadPublishedContent());
+}
+
+const { component: Page, props } = Astro.props;
+---
+
+<Page {...props} />
+```
+
 The site's pages take their published content with `site.loadPublishedContent()`: at build time for a static site, on request otherwise. Until the first publication, and while the CMS does not know the site yet (a site connected from its repository is built before that), it is the site's initial content; any other refusal of the CMS stops the build. A module that needs the content without importing every page takes it with `loadPublishedContent(schema)` of `@seamlet/astro/site`.
 
 ## Fields
@@ -109,6 +126,7 @@ The site's pages take their published content with `site.loadPublishedContent()`
 | `number({ label, min?, max? })`            | a number                                                                | `null`           |
 | `date({ label })`                          | `YYYY-MM-DD`                                                            | `null`           |
 | `time({ label })`                          | `HH:MM`, 00:00 to 23:59                                                 | `null`           |
+| `slug({ label })`                          | the address of a record's page, `latte` in `/menu/latte` (below)        | `""`             |
 | `image({ label })`                         | `{ src, alt }`                                                          | `null`           |
 | `link({ label })`                          | `{ text, href }`: a page of the site, another site, a phone or an email | `null`           |
 | `url({ label })`                           | a web address without a text: a booking widget, a map                   | `null`           |
@@ -212,6 +230,33 @@ Sets of fields almost every site has, edited the same way everywhere; they are p
 
 Each takes `{ label }` to name it otherwise.
 
+`productFields()` is the fields of a product of a catalog, for the record of a collection: `name`, `slug` (the address of its page), `photos` (records of one `photo`, the first is the main one), `summary` (one line for a card), `description`, `price` with `priceNote` («от», «за м²»), `characteristics` (records of a `name` and a `value`, so the owner adds a property without code: «Площадь» — «36 м²»), `isHidden` and `seo`. A site adds its own fields beside them, a category for one:
+
+```ts
+export const schema = defineSchema({
+  categories: collection({
+    label: "Категории",
+    itemTitle: "name",
+    item: { name: text({ label: "Название" }) },
+  }),
+  products: collection({
+    label: "Товары",
+    itemTitle: "name",
+    item: {
+      ...productFields(),
+      category: reference({ label: "Категория", collection: "categories" }),
+    },
+  }),
+});
+
+export const productPages = recordPages(schema, {
+  collection: "products",
+  path: "/catalog/[record]",
+  searchTexts: "seo",
+  shows: (product) => !product.isHidden,
+});
+```
+
 ## Records and references
 
 Every record of a collection has an `id` of its own, which never changes when records move, so a record has no field named `id`. The CMS gives ids to records that have none (`withRecordIds`), so a site's initial content may leave them out, unless something refers to those records.
@@ -239,6 +284,72 @@ const schema = defineSchema({
 
 A reference to a record removed since is kept, with the issue `missing-record`: the content is not saved until the person picks another one or clears it.
 
+## Pages of records
+
+A collection can have a page for each of its records: a product, a dish, an article. The site writes one component, and the owner who adds a record in the CMS gets its page, which the CMS's editor opens and edits like any other page (a CMS that reads descriptions of version 1.1, as cms.seamlet.ru does from its release 1.1.0). `recordPages` names the collection and the address of its pages, `[record]` standing for the record:
+
+```ts
+// src/schema.ts
+import { recordPages, slug } from "@seamlet/astro/schema";
+
+export const schema = defineSchema({
+  menu: collection({
+    label: "Меню",
+    itemTitle: "name",
+    item: {
+      name: text({ label: "Название" }),
+      price: number({ label: "Цена, ₽", min: 0 }),
+      slug: slug({ label: "Адрес страницы" }),
+    },
+  }),
+});
+
+export const drinkPages = recordPages(schema, {
+  collection: "menu",
+  path: "/menu/[record]",
+});
+```
+
+```ts
+// src/seamlet.ts
+export default defineSeamletSite({
+  schema,
+  initialContent,
+  pages: {
+    "/": { title: "Главная", component: HomePage },
+    "/menu": { title: "Меню", component: MenuPage },
+  },
+  recordPages: [{ pages: drinkPages, component: DrinkPage }],
+});
+```
+
+The component takes the content, the record and its place in its collection as `content`, `record` and `index`, so its markers point at the record's fields:
+
+```astro
+---
+// src/components/DrinkPage.astro
+import { editable } from "@seamlet/astro/schema";
+import type { Content } from "../schema";
+
+interface Props {
+  content: Content;
+  record: Content["menu"][number];
+  index: number;
+}
+
+const { record, index } = Astro.props;
+const edit = editable<Content>();
+---
+
+<h1 {...edit("menu", index, "name")}>{record.name}</h1>
+```
+
+`shows` leaves the pages of some records off the site, a hidden product's for one: `site.pageOf` and `site.staticPaths` leave them out and `pathOf` gives them no address, while the preview shows them, so the owner prepares a product before showing it.
+
+`drinkPages.pathOf(drink)` gives the address of a record's page for a link to it: `/menu/latte`. The address is the record's `slug` when it has one, a field the owner fills in (lower-case Latin letters, digits and hyphens; the CMS spells it from the record's name), and its id otherwise, so a record has its page from the moment it is added, and keeps it when it is renamed or moved. A slug another record of the collection has, as its slug or as its id, is the issue `taken-slug`; a slug with other characters, `invalid-slug`. A collection is `catalog.products` through groups, its pages have one segment more than a page of the site (`/catalog/[record]`, never `/[record]`), a record has one page, and no page of the site may stand among the pages of records (`/menu/specials` beside `/menu/[record]`). `searchTexts` names a group of the record with a `title` and a `description` text for its page.
+
+Every record of the initial content needs an address of its own, a slug or an id, since its page is built before the CMS saves anything. The preview shows a page of a record the owner has just added, so the editor opens it before it is saved or published: under the pages of records, an address that could be an id and names no record shows a blank record, which the editor's draft replaces at once.
+
 ## 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. 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:
@@ -253,7 +364,7 @@ What was opened stays open while the page is rendered anew after every edit: a p
 
 ## What the integration adds
 
-- `/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; its refusals (a page the site does not have, a draft that is not JSON or is over 1 MB) say the same.
+- `/preview` and `/preview/<page>`: the preview the CMS's editor frames, the pages of records too (at their address or at the record's id, a page the site does not show too). `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; its refusals (an address of no page, a record a draft does not have, a draft that is not JSON or is over 1 MB) say the same.
 - 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, formatted ones too.
 - `/seamlet/site.json`: what the site tells the CMS about itself (`SITE_DESCRIPTION_PATH`): its id and name from `seamlet.json`, its schema, the content it starts with and its pages. The CMS reads it with `readSiteDescription` whenever the site is opened in its editor.
 - `/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.

package/dist/bridge.d.ts

@@ -1,5 +1,5 @@
-import { F as Fields } from './parse-content-Eg8yRq_t.js';
-import { P as PageMessage, E as EditorMessage } from './messages-CvZhLRSE.js';
+import { F as Fields } from './parse-content-Bnn6Wa-l.js';
+import { P as PageMessage, E as EditorMessage } from './messages-C2OjqFmy.js';
 
 interface BridgeOptions {
     /** The origin of the CMS whose editor may frame the page, such as `https://cms.example.com`. */

package/dist/bridge.js

@@ -18,7 +18,7 @@ import {
   shortcutOf,
   toggleList,
   toggleMark
-} from "./chunk-SSECNMAD.js";
+} from "./chunk-Y4R4YV5O.js";
 import {
   FIELD_PATH_ATTRIBUTE,
   REVEALED_ATTRIBUTE,
@@ -28,7 +28,7 @@ import {
   readRichText,
   resolveFieldPath,
   safeHref
-} from "./chunk-ZS32CW5F.js";
+} from "./chunk-UL2C2IB2.js";
 
 // src/bridge/typed-fields.ts
 function typedKindAt(schema, path) {
@@ -42,6 +42,7 @@ function typedKindAt(schema, path) {
     case "number":
     case "date":
     case "time":
+    case "slug":
     case "image":
     case "link":
     case "url":

package/dist/chunk-HFPZVDST.js

@@ -0,0 +1,78 @@
+import {
+  HOME_PAGE_PATH,
+  PAGE_PATH_SEPARATOR,
+  collectionAt,
+  recordAddressOf,
+  recordAt,
+  recordPageAt,
+  recordPagePath
+} from "./chunk-UL2C2IB2.js";
+
+// src/site-pages.ts
+function pagePathOf(rest) {
+  return rest === void 0 ? HOME_PAGE_PATH : `${PAGE_PATH_SEPARATOR}${rest}`;
+}
+function pageParameterOf(path) {
+  return path === HOME_PAGE_PATH ? void 0 : path.slice(PAGE_PATH_SEPARATOR.length);
+}
+var SHOWN_ON_SITE = (recordPage, record) => recordPage.pages.isShown?.(record) ?? true;
+var EVERY_RECORD = () => true;
+function renderedPageAt(site, path, content) {
+  return ownPageAt(site, path, content) ?? renderedRecordPageAt(site, { path, content, isShown: SHOWN_ON_SITE });
+}
+function previewedPageAt(site, path, content) {
+  return ownPageAt(site, path, content) ?? renderedRecordPageAt(site, { path, content, isShown: EVERY_RECORD });
+}
+function staticPagesOf(site, content) {
+  const ownPages = Object.entries(site.pages).map(
+    ([path, page]) => staticPage(path, { component: page.component, props: { content } })
+  );
+  const recordPages = site.recordPages.flatMap(
+    (recordPage) => staticRecordPagesOf(site.schema, recordPage, content)
+  );
+  return [...ownPages, ...recordPages];
+}
+function ownPageAt(site, path, content) {
+  const page = Object.hasOwn(site.pages, path) ? site.pages[path] : void 0;
+  return page === void 0 ? void 0 : { component: page.component, props: { content } };
+}
+function renderedRecordPageAt(site, request) {
+  const { path, content, isShown } = request;
+  const described = site.recordPages.map((recordPage2) => ({
+    ...recordPage2.pages,
+    recordPage: recordPage2
+  }));
+  const found = recordPageAt(described, path);
+  if (found === void 0) return void 0;
+  const records = collectionAt(site.schema, content, found.page.collection);
+  if (records === void 0) return void 0;
+  const placed = recordAt(records.collection, records.records, found.address);
+  const { recordPage } = found.page;
+  if (placed === void 0 || !isShown(recordPage, placed.record)) {
+    return void 0;
+  }
+  const props = { content, record: placed.record, index: placed.index };
+  return { component: recordPage.component, props };
+}
+function staticRecordPagesOf(schema, recordPage, content) {
+  const found = collectionAt(schema, content, recordPage.pages.collection);
+  if (found === void 0) return [];
+  return found.records.flatMap((record, index) => {
+    const address = recordAddressOf(found.collection, record);
+    const hasPage = address !== void 0 && SHOWN_ON_SITE(recordPage, record);
+    if (!hasPage) return [];
+    const path = recordPagePath(recordPage.pages.path, address);
+    const props = { content, record, index };
+    return [staticPage(path, { component: recordPage.component, props })];
+  });
+}
+function staticPage(path, page) {
+  return { params: { page: pageParameterOf(path) }, props: page };
+}
+
+export {
+  pagePathOf,
+  renderedPageAt,
+  previewedPageAt,
+  staticPagesOf
+};

package/dist/{chunk-QL4K4HR6.js → chunk-OCA2WYK3.js}

@@ -1,3 +1,16 @@
+import {
+  pagePathOf
+} from "./chunk-HFPZVDST.js";
+import {
+  FIELD_PATH_SEPARATOR,
+  collectionAt,
+  isContentObject,
+  isRecordId,
+  newRecord,
+  recordAt,
+  recordPageAt
+} from "./chunk-UL2C2IB2.js";
+
 // src/preview-requests.ts
 var MAX_DRAFT_BYTES = 1024 * 1024;
 var BAD_REQUEST = 400;
@@ -22,6 +35,25 @@ async function readDraft(request) {
     return refused(BAD_REQUEST);
   }
 }
+function isPageAddress(description, rest) {
+  const path = pagePathOf(rest);
+  const isOwnPage = description.pages.some((page) => page.path === path);
+  const recordPage = recordPageAt(description.recordPages ?? [], path);
+  return isOwnPage || recordPage !== void 0;
+}
+function previewContentAt(description, content, rest) {
+  const recordPages = description.recordPages ?? [];
+  const found = recordPageAt(recordPages, pagePathOf(rest));
+  if (found === void 0 || !isRecordId(found.address)) return content;
+  const { collection: path } = found.page;
+  const records = collectionAt(description.schema, content, path);
+  if (records === void 0) return content;
+  const isPublished = recordAt(records.collection, records.records, found.address) !== void 0;
+  if (isPublished) return content;
+  const blank = newRecord(records.collection, found.address);
+  const names = path.split(FIELD_PATH_SEPARATOR);
+  return withRecordsAt(content, names, [...records.records, blank]);
+}
 function isUploadedPhoto(fileName) {
   return fileName !== void 0 && UPLOADED_PHOTO.test(fileName);
 }
@@ -51,6 +83,13 @@ function concatenated(chunks, size) {
   }
   return bytes;
 }
+function withRecordsAt(content, names, records) {
+  const [name, ...rest] = names;
+  if (name === void 0) return content;
+  if (rest.length === 0) return { ...content, [name]: records };
+  const group = content[name];
+  return isContentObject(group) ? { ...content, [name]: withRecordsAt(group, rest, records) } : content;
+}
 function refused(status) {
   return { isRead: false, response: new Response(null, { status }) };
 }
@@ -59,5 +98,7 @@ export {
   MAX_DRAFT_BYTES,
   previewHeadersOf,
   readDraft,
+  isPageAddress,
+  previewContentAt,
   isUploadedPhoto
 };