@caltho/site-kit 0.2.10 → 0.3.0

package/dist/sections/index.js

@@ -2,8 +2,12 @@
 // 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 { href, image, md, text } from "../content/index.js";
+import { ICON_NAMES } from "./icons.js";
+import { built, use } from "../tree/index.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,39 +35,161 @@ 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(["large", "medium", "small"]).default("medium").meta({ title: "Size" }) }).meta({ title: "Heading" }),
-    text: z.object({ text: md }).meta({ title: "Text" }),
-    photo: z.object({ image: photo, 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, style: z.enum(["main", "quiet"]).default("main").meta({ title: "Style" }) }).meta({ title: "Button" }),
+    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" }),
-    quote: z.object({ text: text.meta({ title: "Quote" }), who: text.optional().meta({ title: "Who said it" }) }).meta({ title: "Quote" }),
+    // 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" }),
 };
-const part = z.discriminatedUnion("type", Object.keys(parts).map((type) => z.object({ type: z.literal(type) }).extend(parts[type].shape).meta(parts[type].meta())));
+/** 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" }),
-    tone: z.enum(["plain", "brand"]).default("plain").meta({ title: "Background" }),
+    // 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({ parts: z.array(part).max(12).meta({ title: "Parts" }) }).meta({ title: "Column" }))
+        .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, own };
+/**
+ * Every section the kit draws, by the type a block names. `built`: a tree of elements styled with
+ * Tailwind, made in CalOS's editor or by Cal (../tree, cal-os docs/design/site-builder.md); `use`:
+ * one of the site's components (a tree kept once in the content's `components`) with its slots filled.
+ */
+export const sections = { gallery, slideshow, own, built, use };
 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[];

package/dist/sections/presets.js

@@ -0,0 +1,300 @@
+// The placeholder every site has in CalOS (a soft grey with a small landscape mark): replaced in the editor.
+const PHOTO = "photos/placeholder.jpg";
+const LOGO = "logos/replace-me.png";
+export const presets = [
+    {
+        key: "hero",
+        name: "Opening",
+        description: "A large heading, a line about the business, two buttons and a photo beside them",
+        block: {
+            type: "own",
+            layout: "two",
+            spacing: "roomy",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Work done properly, the first time", size: "large" },
+                        { type: "text", text: "Say in a sentence or two what the business does, who it's for and where it works." },
+                        { type: "button", label: "Get in touch", href: "/", style: "main" },
+                        { type: "button", label: "See our services", href: "/", style: "quiet" },
+                    ],
+                },
+                { parts: [{ type: "photo", image: { src: PHOTO, alt: "" }, shape: "landscape" }] },
+            ],
+        },
+    },
+    {
+        key: "banner",
+        name: "Words over a photo",
+        description: "A heading, a line and a button over a photo, darkened so the words read",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            spacing: "roomy",
+            background: { src: PHOTO, alt: "" },
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Careful work, from first visit to last", size: "large" },
+                        { type: "text", text: "A line on what sets the business apart." },
+                        { type: "button", label: "Book a visit", href: "/", style: "main" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "features",
+        name: "Three reasons",
+        description: "Three columns side by side, each a heading and a few words",
+        block: {
+            type: "own",
+            layout: "three",
+            columns: [
+                { parts: [{ type: "heading", text: "Clear pricing", size: "small" }, { type: "text", text: "You know the cost before any work starts, in writing." }] },
+                { parts: [{ type: "heading", text: "On time", size: "small" }, { type: "text", text: "We agree a date and keep to it, and tell you early if anything changes." }] },
+                { parts: [{ type: "heading", text: "Easy to reach", size: "small" }, { type: "text", text: "Call or write and you hear back the same working day." }] },
+            ],
+        },
+    },
+    {
+        key: "testimonial",
+        name: "What a client said",
+        description: "A client's words, centred on a quiet background",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "soft",
+            columns: [{ parts: [{ type: "quote", text: "They were careful, quick to answer and finished when they said they would. We would use them again.", who: "Client's name, their company" }] }],
+        },
+    },
+    {
+        key: "pricing",
+        name: "Prices",
+        description: "Three packages side by side, each with its price, what's included and a button",
+        block: {
+            type: "own",
+            layout: "three",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Essential", size: "small" },
+                        { type: "price", amount: "Price", per: "a visit" },
+                        { type: "list", items: ["One visit", "Written quote", "Work guaranteed for a year"], style: "checks" },
+                        { type: "button", label: "Choose essential", href: "/", style: "quiet" },
+                    ],
+                },
+                {
+                    parts: [
+                        { type: "heading", text: "Standard", size: "small" },
+                        { type: "price", amount: "Price", per: "a month", note: "Most chosen" },
+                        { type: "list", items: ["Up to three visits", "Priority booking", "Work guaranteed for two years"], style: "checks" },
+                        { type: "button", label: "Choose standard", href: "/", style: "main" },
+                    ],
+                },
+                {
+                    parts: [
+                        { type: "heading", text: "Complete", size: "small" },
+                        { type: "price", amount: "Price", per: "a month" },
+                        { type: "list", items: ["Unlimited visits", "Same-day response", "A named contact"], style: "checks" },
+                        { type: "button", label: "Choose complete", href: "/", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "call-to-action",
+        name: "Ask to get in touch",
+        description: "A heading and a button on the brand colour, to end a page",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "brand",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Ready when you are", size: "large" },
+                        { type: "text", text: "Tell us what you need and we'll reply within one working day." },
+                        { type: "button", label: "Get in touch", href: "/", style: "main" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "contact",
+        name: "Contact",
+        description: "A heading, a few words and buttons to write or call",
+        block: {
+            type: "own",
+            layout: "one",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Get in touch", size: "medium" },
+                        { type: "text", text: "Write or call during working hours. We reply to every message within one working day." },
+                        { type: "button", label: "Email us", href: "mailto:hello@example.com", style: "main" },
+                        { type: "button", label: "Call us", href: "tel:+15550100000", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "questions",
+        name: "Common questions",
+        description: "A heading beside a list of questions and their answers",
+        block: {
+            type: "own",
+            layout: "wide-right",
+            columns: [
+                { parts: [{ type: "heading", text: "Common questions", size: "medium" }, { type: "text", text: "Anything else, just ask." }] },
+                {
+                    parts: [
+                        {
+                            type: "list",
+                            style: "bullets",
+                            items: [
+                                "How soon can you start? Usually within two weeks of agreeing the work.",
+                                "Do you give written quotes? Yes, always, before any work starts.",
+                                "Which areas do you cover? Say here where the business works.",
+                                "How do I pay? By card or bank transfer, once the work is done.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "photo-text",
+        name: "Photo and words",
+        description: "A photo beside a heading, a few words and a button",
+        block: {
+            type: "own",
+            layout: "two",
+            columns: [
+                { parts: [{ type: "photo", image: { src: PHOTO, alt: "" }, shape: "square" }] },
+                {
+                    parts: [
+                        { type: "heading", text: "About us", size: "medium" },
+                        { type: "text", text: "Who runs the business, how long it has been going and what it cares about." },
+                        { type: "button", label: "Meet the team", href: "/", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "stats",
+        name: "Facts in a row",
+        description: "A few numbers that say what the business has done",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "soft",
+            spacing: "tight",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "stats",
+                            items: [
+                                { value: "Number", label: "years in business" },
+                                { value: "Number", label: "clients served" },
+                                { value: "Number", label: "days to hear back" },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "comparison",
+        name: "Comparison",
+        description: "A heading over a table comparing a few options, one of them picked out",
+        block: {
+            type: "own",
+            layout: "one",
+            heading: "Compare the options",
+            intro: "Say in a line how the options differ and who each one suits.",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "table",
+                            columns: ["", "Option one", "Option two", "Option three"],
+                            rows: [
+                                { label: "Price", cells: ["Price", "Price", "Price"] },
+                                { label: "Feature one", cells: ["yes", "yes", "yes"] },
+                                { label: "Feature two", cells: ["no", "yes", "yes"] },
+                                { label: "Feature three", cells: ["no", "no", "yes"] },
+                            ],
+                            highlight: 2,
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "features-icons",
+        name: "Features with icons",
+        description: "Three cards side by side, each an icon, a heading and a few words",
+        block: {
+            type: "own",
+            layout: "three",
+            heading: "What you get",
+            columns: [
+                { card: true, parts: [{ type: "icon", name: "check", size: "medium" }, { type: "heading", text: "Feature one", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+                { card: true, parts: [{ type: "icon", name: "clock", size: "medium" }, { type: "heading", text: "Feature two", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+                { card: true, parts: [{ type: "icon", name: "chat", size: "medium" }, { type: "heading", text: "Feature three", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+            ],
+        },
+    },
+    {
+        key: "logo-strip",
+        name: "Logo strip",
+        description: "A row of the logos of clients, partners or memberships",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            spacing: "tight",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "logos",
+                            title: "Who we work with",
+                            images: [
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "video",
+        name: "Video",
+        description: "A heading, a line and a YouTube or Vimeo video under them",
+        block: {
+            type: "own",
+            layout: "one",
+            heading: "See how it works",
+            intro: "A line on what the video shows.",
+            columns: [{ parts: [{ type: "video", title: "Video of how it works" }] }],
+        },
+    },
+];