@caltho/site-kit 0.2.9 → 0.2.11

package/dist/sections/index.d.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+export { ICON_NAMES, ICONS, type IconName } from "./icons.ts";
 /** Photos in a grid, each with a caption if it has one: their work, the place, the team at it. */
 export declare const gallery: z.ZodObject<{
     heading: z.ZodOptional<z.ZodString>;
@@ -30,11 +31,245 @@ export declare const slideshow: z.ZodObject<{
     }, z.core.$strip>>;
     shape: z.ZodDefault<z.ZodEnum<{
         square: "square";
-        wide: "wide";
         landscape: "landscape";
+        wide: "wide";
     }>>;
     seconds: z.ZodDefault<z.ZodNumber>;
 }, z.core.$strip>;
+/**
+ * A YouTube or Vimeo address as the privacy-friendly player it's shown in (YouTube's no-cookie one,
+ * Vimeo's with tracking off), or null for any other address. Watch, share, Shorts and embed
+ * addresses all work.
+ */
+export declare function videoEmbed(url: string): {
+    src: string;
+    origin: string;
+} | null;
+/** Where a video part's players come from: a page showing one allows them in its frame-src. */
+export declare const VIDEO_ORIGINS: readonly ["https://www.youtube-nocookie.com", "https://player.vimeo.com"];
+export declare const parts: {
+    readonly heading: z.ZodObject<{
+        text: z.ZodString;
+        size: z.ZodDefault<z.ZodEnum<{
+            display: "display";
+            small: "small";
+            medium: "medium";
+            large: "large";
+            page: "page";
+        }>>;
+        font: z.ZodOptional<z.ZodEnum<{
+            heading: "heading";
+            text: "text";
+        }>>;
+    }, z.core.$strip>;
+    readonly text: z.ZodObject<{
+        text: z.ZodString;
+        font: z.ZodOptional<z.ZodEnum<{
+            heading: "heading";
+            text: "text";
+        }>>;
+    }, z.core.$strip>;
+    readonly photo: z.ZodObject<{
+        image: z.ZodOptional<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            square: "square";
+            landscape: "landscape";
+            portrait: "portrait";
+            "as-taken": "as-taken";
+        }>>;
+    }, z.core.$strip>;
+    readonly button: z.ZodObject<{
+        label: z.ZodString;
+        href: z.ZodString;
+        style: z.ZodDefault<z.ZodString>;
+    }, z.core.$strip>;
+    readonly list: z.ZodObject<{
+        items: z.ZodArray<z.ZodString>;
+        style: z.ZodDefault<z.ZodEnum<{
+            checks: "checks";
+            bullets: "bullets";
+            numbers: "numbers";
+        }>>;
+    }, z.core.$strip>;
+    readonly items: z.ZodObject<{
+        items: z.ZodArray<z.ZodObject<{
+            title: z.ZodString;
+            text: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        font: z.ZodOptional<z.ZodEnum<{
+            heading: "heading";
+            text: "text";
+        }>>;
+        numbered: z.ZodDefault<z.ZodBoolean>;
+        lines: z.ZodDefault<z.ZodBoolean>;
+    }, z.core.$strip>;
+    readonly quote: z.ZodObject<{
+        text: z.ZodString;
+        who: z.ZodOptional<z.ZodString>;
+        font: z.ZodOptional<z.ZodEnum<{
+            heading: "heading";
+            text: "text";
+        }>>;
+    }, z.core.$strip>;
+    readonly stats: z.ZodObject<{
+        items: z.ZodArray<z.ZodObject<{
+            value: z.ZodString;
+            label: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+    readonly price: z.ZodObject<{
+        amount: z.ZodString;
+        per: z.ZodOptional<z.ZodString>;
+        note: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    readonly gallery: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        columns: z.ZodDefault<z.ZodEnum<{
+            2: "2";
+            3: "3";
+            4: "4";
+        }>>;
+    }, z.core.$strip>;
+    readonly slideshow: z.ZodObject<{
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        seconds: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strip>;
+    readonly space: z.ZodObject<{
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            medium: "medium";
+            large: "large";
+        }>>;
+    }, z.core.$strip>;
+    readonly table: z.ZodObject<{
+        columns: z.ZodArray<z.ZodString>;
+        rows: z.ZodArray<z.ZodObject<{
+            label: z.ZodString;
+            cells: z.ZodArray<z.ZodString>;
+        }, z.core.$strip>>;
+        highlight: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>;
+    readonly icon: z.ZodObject<{
+        name: z.ZodEnum<{
+            card: "card";
+            check: "check";
+            phone: "phone";
+            file: "file";
+            home: "home";
+            play: "play";
+            x: "x";
+            search: "search";
+            link: "link";
+            calendar: "calendar";
+            clock: "clock";
+            users: "users";
+            user: "user";
+            chat: "chat";
+            mail: "mail";
+            "map-pin": "map-pin";
+            chart: "chart";
+            folder: "folder";
+            invoice: "invoice";
+            shield: "shield";
+            lock: "lock";
+            star: "star";
+            heart: "heart";
+            bolt: "bolt";
+            gear: "gear";
+            building: "building";
+            truck: "truck";
+            wrench: "wrench";
+            leaf: "leaf";
+            sun: "sun";
+            globe: "globe";
+            camera: "camera";
+            "arrow-right": "arrow-right";
+            plus: "plus";
+            minus: "minus";
+            info: "info";
+            warning: "warning";
+            list: "list";
+            grid: "grid";
+            tag: "tag";
+            award: "award";
+        }>;
+        size: z.ZodDefault<z.ZodEnum<{
+            small: "small";
+            medium: "medium";
+            large: "large";
+        }>>;
+    }, z.core.$strip>;
+    readonly logos: z.ZodObject<{
+        title: z.ZodOptional<z.ZodString>;
+        images: z.ZodArray<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+    readonly video: z.ZodObject<{
+        url: z.ZodOptional<z.ZodString>;
+        title: z.ZodString;
+    }, z.core.$strip>;
+};
+export type PartType = keyof typeof parts;
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export declare const own: z.ZodObject<{
+    heading: z.ZodOptional<z.ZodString>;
+    intro: z.ZodOptional<z.ZodString>;
+    layout: z.ZodDefault<z.ZodEnum<{
+        one: "one";
+        two: "two";
+        three: "three";
+        four: "four";
+        "wide-left": "wide-left";
+        "wide-right": "wide-right";
+    }>>;
+    align: z.ZodDefault<z.ZodEnum<{
+        left: "left";
+        center: "center";
+    }>>;
+    tone: z.ZodDefault<z.ZodEnum<{
+        soft: "soft";
+        plain: "plain";
+        brand: "brand";
+        dark: "dark";
+    }>>;
+    shape: z.ZodDefault<z.ZodEnum<{
+        card: "card";
+        band: "band";
+    }>>;
+    spacing: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        roomy: "roomy";
+        tight: "tight";
+    }>>;
+    background: z.ZodOptional<z.ZodObject<{
+        src: z.ZodString;
+        alt: z.ZodString;
+    }, z.core.$strip>>;
+    columns: z.ZodArray<z.ZodObject<{
+        card: z.ZodOptional<z.ZodBoolean>;
+        end: z.ZodOptional<z.ZodBoolean>;
+        place: z.ZodOptional<z.ZodEnum<{
+            top: "top";
+            middle: "middle";
+            bottom: "bottom";
+        }>>;
+        parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
 /** Every section the kit draws, by the type a block names. */
 export declare const sections: {
     readonly gallery: z.ZodObject<{
@@ -66,11 +301,58 @@ export declare const sections: {
         }, z.core.$strip>>;
         shape: z.ZodDefault<z.ZodEnum<{
             square: "square";
-            wide: "wide";
             landscape: "landscape";
+            wide: "wide";
         }>>;
         seconds: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strip>;
+    readonly own: z.ZodObject<{
+        heading: z.ZodOptional<z.ZodString>;
+        intro: z.ZodOptional<z.ZodString>;
+        layout: z.ZodDefault<z.ZodEnum<{
+            one: "one";
+            two: "two";
+            three: "three";
+            four: "four";
+            "wide-left": "wide-left";
+            "wide-right": "wide-right";
+        }>>;
+        align: z.ZodDefault<z.ZodEnum<{
+            left: "left";
+            center: "center";
+        }>>;
+        tone: z.ZodDefault<z.ZodEnum<{
+            soft: "soft";
+            plain: "plain";
+            brand: "brand";
+            dark: "dark";
+        }>>;
+        shape: z.ZodDefault<z.ZodEnum<{
+            card: "card";
+            band: "band";
+        }>>;
+        spacing: z.ZodDefault<z.ZodEnum<{
+            normal: "normal";
+            roomy: "roomy";
+            tight: "tight";
+        }>>;
+        background: z.ZodOptional<z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+        }, z.core.$strip>>;
+        columns: z.ZodArray<z.ZodObject<{
+            card: z.ZodOptional<z.ZodBoolean>;
+            end: z.ZodOptional<z.ZodBoolean>;
+            place: z.ZodOptional<z.ZodEnum<{
+                top: "top";
+                middle: "middle";
+                bottom: "bottom";
+            }>>;
+            parts: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
 };
 export type KitSectionType = keyof typeof sections;
 export declare const isKitSection: (type: string) => type is KitSectionType;
+/** Ready-made sections of the business's own, to add and then edit like any other (./presets.ts). */
+export { presets, type OwnBlock, type Preset } from "./presets.ts";

package/dist/sections/index.js

@@ -2,8 +2,11 @@
 // its own (README, "Sections"): each one's fields here, drawn by KitSection (../next/sections.tsx) and
 // styled by sections.css, themed by the site's Look. A site takes them all into its blocks
 // (`defineSite({ ...blocks, ...sections })`); one of its own by the same name is kept over the kit's.
+import { buttonStyleName } from "../content/look.js";
 import { z } from "zod";
-import { image, md, text } from "../content/index.js";
+import { href, image, md, text } from "../content/index.js";
+import { ICON_NAMES } from "./icons.js";
+export { ICON_NAMES, ICONS } from "./icons.js";
 /** Photos in a grid, each with a caption if it has one: their work, the place, the team at it. */
 export const gallery = z
     .object({
@@ -31,6 +34,157 @@ export const slideshow = z
     seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }),
 })
     .meta({ title: "Slideshow", description: "Photos one at a time, fading from one to the next" });
+/**
+ * A YouTube or Vimeo address as the privacy-friendly player it's shown in (YouTube's no-cookie one,
+ * Vimeo's with tracking off), or null for any other address. Watch, share, Shorts and embed
+ * addresses all work.
+ */
+export function videoEmbed(url) {
+    const yt = /^https:\/\/(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:[^#]*&)?v=|shorts\/|embed\/|live\/)|youtu\.be\/)([\w-]{11})(?![\w-])/.exec(url.trim());
+    if (yt)
+        return { src: `${YOUTUBE}/embed/${yt[1]}`, origin: YOUTUBE };
+    const vm = /^https:\/\/(?:www\.)?(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)(?:\/([\da-f]+))?(?![\w])/.exec(url.trim());
+    if (vm)
+        return { src: `${VIMEO}/video/${vm[1]}?${vm[2] ? `h=${vm[2]}&` : ""}dnt=1`, origin: VIMEO };
+    return null;
+}
+const YOUTUBE = "https://www.youtube-nocookie.com";
+const VIMEO = "https://player.vimeo.com";
+/** Where a video part's players come from: a page showing one allows them in its frame-src. */
+export const VIDEO_ORIGINS = [YOUTUBE, VIMEO];
+const VIDEO_HELP = "A YouTube or Vimeo address, like https://www.youtube.com/watch?v=… or https://vimeo.com/…";
+// The same test as videoEmbed's, as a pattern CalOS can check with from the JSON Schema alone.
+const videoUrl = z
+    .string()
+    .trim()
+    .regex(/^https:\/\/((www\.|m\.)?(youtube\.com\/(watch\?([^#]*&)?v=|shorts\/|embed\/|live\/)|youtu\.be\/)[\w-]{11}([^\w-].*)?|(www\.)?(vimeo\.com\/|player\.vimeo\.com\/video\/)\d+([^\w].*)?)$/, { error: VIDEO_HELP })
+    .meta({ title: "Video address", "x-error": VIDEO_HELP });
+/** A table's cell: plain words, or "yes" / "no", drawn as a tick and a dash. */
+const cell = z.string().trim().max(120);
+/**
+ * The parts a section of the business's own is put together from in CalOS: each drawn in the site's
+ * own type, buttons and widths (the classes it gives KitSection), so what's built looks like the
+ * site, not a template. A fixed set, no colours or fonts of their own.
+ */
+/** Which of the Look's fonts a part's words are in, where it isn't the usual (a heading in the text's font). */
+const font = z.enum(["heading", "text"]).optional().meta({ title: "Font", "x-labels": { heading: "Headings' font", text: "Text font" } });
+const photo = image.extend({ caption: text.optional().meta({ title: "Caption" }) });
+export const parts = {
+    heading: z
+        .object({
+        text,
+        size: z
+            .enum(["display", "page", "large", "medium", "small"])
+            .default("medium")
+            .meta({ title: "Size", "x-labels": { display: "Display (the largest)", page: "Page heading", large: "Section heading", medium: "Medium", small: "Small" } }),
+        font,
+    })
+        .meta({ title: "Heading" }),
+    text: z.object({ text: md, font }).meta({ title: "Text" }),
+    photo: z.object({ image: photo.optional(), shape: z.enum(["as-taken", "landscape", "square", "portrait"]).default("as-taken").meta({ title: "Shape" }) }).meta({ title: "Photo" }),
+    button: z
+        .object({
+        label: text.meta({ title: "Label" }),
+        href,
+        // The theme's Main, Accent or Quiet, or one of the business's own button styles (Look › Buttons), by its slug.
+        style: buttonStyleName.default("main").meta({ title: "Style", "x-ui": "button-style" }),
+    })
+        .meta({ title: "Button" }),
+    list: z.object({ items: z.array(text).min(1).max(20).meta({ title: "Items" }), style: z.enum(["bullets", "checks", "numbers"]).default("bullets").meta({ title: "Style" }) }).meta({ title: "List" }),
+    // Things with a name and a line about each: services, steps, what's included. Numbered (01, 02…) or
+    // not, with a rule between them or none.
+    items: z
+        .object({
+        items: z
+            .array(z.object({ title: text.meta({ title: "Title" }), text: text.optional().meta({ title: "Line about it" }) }).meta({ title: "Item" }))
+            .min(1)
+            .max(12)
+            .meta({ title: "Items" }),
+        // Their titles in the headings' font, or the text's (a sans title under a serif heading).
+        font,
+        numbered: z.boolean().default(true).meta({ title: "Numbered (01, 02…)" }),
+        lines: z.boolean().default(true).meta({ title: "Lines between them" }),
+    })
+        .meta({ title: "Items with titles", description: "Services or steps: each a title and a line about it, numbered or not" }),
+    quote: z.object({ text: text.meta({ title: "Quote" }), who: text.optional().meta({ title: "Who said it" }), font }).meta({ title: "Quote" }),
+    stats: z.object({ items: z.array(z.object({ value: text.meta({ title: "Number" }), label: text.meta({ title: "What it is" }) })).min(1).max(6).meta({ title: "Facts" }) }).meta({ title: "Facts in a row", description: "8 guests · 4 cabins · 2 baths" }),
+    price: z.object({ amount: text.meta({ title: "Price" }), per: text.optional().meta({ title: "Per" }), note: text.optional().meta({ title: "Note" }) }).meta({ title: "Price" }),
+    gallery: z.object({ images: z.array(photo).min(1).max(30).meta({ title: "Photos" }), columns: z.enum(["2", "3", "4"]).default("3").meta({ title: "Photos across" }) }).meta({ title: "Photos in a grid" }),
+    slideshow: z.object({ images: z.array(photo).min(2).max(20).meta({ title: "Photos" }), seconds: z.number().int().min(3).max(15).default(5).meta({ title: "Seconds on each photo" }) }).meta({ title: "Slideshow" }),
+    space: z.object({ size: z.enum(["small", "medium", "large"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Space" }),
+    // Rows of the same few things compared: plans, packages, what's included. The first column is the
+    // rows' labels (its heading may be ""); a cell "yes" or "no" is a tick or a dash.
+    table: z
+        .object({
+        columns: z.array(z.string().trim().max(60)).min(2).max(5).meta({ title: "Column headings", description: "The first is over the rows' labels and may be left empty" }),
+        rows: z
+            .array(z.object({ label: text.meta({ title: "Row" }), cells: z.array(cell).max(4).meta({ title: "Cells", description: "One for each column after the first: words, or yes or no for a tick or a dash" }) }).meta({ title: "Row" }))
+            .min(1)
+            .max(20)
+            .meta({ title: "Rows" }),
+        highlight: z.number().int().min(1).max(4).optional().meta({ title: "Column to pick out", description: "Which column (counting from 1 after the rows' labels) to pick out" }),
+    })
+        .meta({ title: "Table", description: "Rows compared across a few columns: plans, packages, what's included" }),
+    icon: z.object({ name: z.enum(ICON_NAMES).meta({ title: "Icon", "x-ui": "icon" }), size: z.enum(["small", "medium", "large"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Icon" }),
+    logos: z
+        .object({ title: text.optional().meta({ title: "Line above" }), images: z.array(image).min(2).max(12).meta({ title: "Logos" }) })
+        .meta({ title: "Logos", description: "A row of the logos of clients, partners or memberships" }),
+    // Optional while the business finds its address: a quiet box in CalOS's preview, nothing on the site.
+    video: z.object({ url: videoUrl.optional(), title: text.meta({ title: "What the video is", description: "Said to someone using a screen reader" }) }).meta({ title: "Video", description: "A YouTube or Vimeo video" }),
+};
+/** What a part's own fields can't say alone: a table's rows each have a cell for every column, its headings are named, and the column it picks out is one of them. */
+function partProblems(p, ctx) {
+    if (p.type !== "table")
+        return;
+    const t = p;
+    const n = t.columns.length - 1;
+    t.columns.forEach((c, i) => {
+        if (i > 0 && !c)
+            ctx.addIssue({ code: "custom", path: ["columns", i], message: "A column needs a heading" });
+    });
+    t.rows.forEach((r, i) => {
+        if (r.cells.length !== n)
+            ctx.addIssue({ code: "custom", path: ["rows", i, "cells"], message: `One cell for each of the ${n} column${n === 1 ? "" : "s"} after the first` });
+    });
+    if (t.highlight !== undefined && t.highlight > n)
+        ctx.addIssue({ code: "custom", path: ["highlight"], message: `The table has ${n} column${n === 1 ? "" : "s"} after the first` });
+}
+const part = z.discriminatedUnion("type", Object.keys(parts).map((type) => z.object({ type: z.literal(type) }).extend(parts[type].shape).meta(parts[type].meta()).superRefine(partProblems)));
+/** A section of the business's own: columns of parts, laid out as chosen, in the site's design. */
+export const own = z
+    .object({
+    // Its heading area: over its columns, in the site's section heading style.
+    heading: text.optional().meta({ title: "Heading" }),
+    intro: md.optional().meta({ title: "Intro" }),
+    layout: z.enum(["one", "two", "three", "four", "wide-left", "wide-right"]).default("one").meta({ title: "Columns" }),
+    align: z.enum(["left", "center"]).default("left").meta({ title: "Align" }),
+    // Plain: the page's own background; soft: a quiet tint of its text colour; brand: the brand
+    // colour; dark: the site's ink, words light on it. A photo behind (background) is under a scrim,
+    // words light over it, whatever the tone.
+    tone: z.enum(["plain", "soft", "brand", "dark"]).default("plain").meta({ title: "Background" }),
+    // On soft, brand or dark: a card inset within the content's width, in the theme's corners, or a
+    // band the page's full width. Plain has nothing to shape.
+    shape: z.enum(["card", "band"]).default("card").meta({ title: "Shape" }),
+    spacing: z.enum(["tight", "normal", "roomy"]).default("normal").meta({ title: "Space above and below" }),
+    background: image.optional().meta({ title: "Photo behind" }),
+    columns: z
+        .array(z
+        .object({
+        card: z.boolean().optional().meta({ title: "Drawn as a card" }),
+        // Against the far edge: a row's second half ("Where we work … Philadelphia, PA / Princeton, NJ").
+        end: z.boolean().optional().meta({ title: "Against the right edge" }),
+        // Where its parts sit when a column beside it is taller: words at the foot of a tall photo.
+        place: z.enum(["top", "middle", "bottom"]).optional().meta({ title: "Up and down", "x-labels": { top: "At the top", middle: "In the middle", bottom: "At the bottom" } }),
+        parts: z.array(part).max(12).meta({ title: "Parts" }),
+    })
+        .meta({ title: "Column" }))
+        .min(1)
+        .max(4)
+        .meta({ title: "Columns' parts" }),
+})
+    .meta({ title: "Your own section", description: "Put together from headings, text, photos, buttons and more, in the site's design" });
 /** Every section the kit draws, by the type a block names. */
-export const sections = { gallery, slideshow };
+export const sections = { gallery, slideshow, own };
 export const isKitSection = (type) => Object.prototype.hasOwnProperty.call(sections, type);
+/** Ready-made sections of the business's own, to add and then edit like any other (./presets.ts). */
+export { presets } from "./presets.js";

package/dist/sections/presets.d.ts

@@ -0,0 +1,13 @@
+import type { z } from "zod";
+import type { own } from "./index.ts";
+/** A section of the business's own, as content holds it. */
+export type OwnBlock = {
+    type: "own";
+} & z.input<typeof own>;
+export type Preset = {
+    key: string;
+    name: string;
+    description: string;
+    block: OwnBlock;
+};
+export declare const presets: Preset[];