@caltho/site-kit 0.2.3 → 0.2.5

package/README.md

@@ -66,6 +66,31 @@ the kit only checks it's a URL.
 | **Preview** (`@caltho/site-kit/next/preview`) | `SitePreview`: CalOS's draft drawn with the site's own components, a click matched to its field, outlines with each section's name. |
 | **Schema** (`@caltho/site-kit/schema`) | What CalOS needs of a declaration with no site code: validate content against the JSON Schema with messages a person can act on, make a blank block or entry, list the kinds of block, and the checks across pages. |
 
+## Share cards
+
+Each page is shared (Open Graph) with a 1200×630 card made at build from its words: its title and
+description, or the **Share title** and **Share text** an owner can set in CalOS's page settings, with
+the business's name. Every publish rebuilds the site, so a card always says what the page says. A
+**Share picture** chosen for a page is used instead.
+
+A site sets how its cards look in `content/schema.ts`:
+
+```ts
+export default defineSite(blocks, {
+  share: {
+    background: "#13262f", color: "#ffffff", muted: "#b8c7cf", accent: "#f2b134",
+    backgroundImage: "public/og.png",       // drawn behind, stretched to 1200×630
+    logo: "public/logo.svg",                // instead of the business's name in words
+    fonts: [{ name: "Brand Sans", path: "assets/fonts/BrandSans-Bold.woff", weight: 700 }],
+    prefer: "picture",                      // a page's first picture before its card
+    render: (card, h) => h.el({ width: "100%", height: "100%", padding: 72 }, card.title), // a card of its own
+  },
+});
+```
+
+`share: false` turns cards off: pages are shared with a picture from them. The kit carries DM Sans (SIL
+Open Font License, `src/fonts/OFL.txt`) for cards that don't name fonts of their own.
+
 ## A build
 
 ```sh

package/dist/content/index.d.ts

@@ -1,4 +1,8 @@
+import type { ShareOptions } from "../share.ts";
+export type { CardNode, ShareCard, ShareFont, ShareOptions } from "../share.ts";
 import { z } from "zod";
+import { type Look, type LookOptions } from "./look.ts";
+export { contrast, lookCss, lookProblems, lookVars, type Look, type LookOptions } from "./look.ts";
 export { checkStructure, describePath, type StructureIssue } from "../schema.ts";
 export { z };
 export declare const text: z.ZodString;
@@ -24,6 +28,38 @@ export declare const link: z.ZodObject<{
 }, z.core.$strip>;
 export declare const time: z.ZodString;
 export declare const DAYS: readonly ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+/**
+ * How a section sits on the page, for a site that offers it (defineSite's `placement`): its alignment,
+ * width, spacing and the screens it shows on. The site's design says what each means at every width,
+ * so a choice here stays sensible on a phone. CalOS shows it as the section's Layout. (A block's own
+ * `layout`, a site's choice of how it's drawn, is a different thing and keeps its name.)
+ */
+export declare const placement: z.ZodObject<{
+    align: z.ZodDefault<z.ZodEnum<{
+        left: "left";
+        center: "center";
+    }>>;
+    width: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        narrow: "narrow";
+        wide: "wide";
+    }>>;
+    spacing: z.ZodDefault<z.ZodEnum<{
+        normal: "normal";
+        compact: "compact";
+        roomy: "roomy";
+    }>>;
+    show: z.ZodDefault<z.ZodEnum<{
+        phone: "phone";
+        all: "all";
+        desktop: "desktop";
+    }>>;
+}, z.core.$strip>;
+export type Placement = z.output<typeof placement>;
+/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". */
+export declare function placementClass(block: {
+    placement?: Partial<Placement>;
+}): string;
 /** The business's facts: the header, footer, hours, contact details and search data all come from here. */
 export declare const business: z.ZodObject<{
     name: z.ZodString;
@@ -87,6 +123,8 @@ export type Page = {
         src: string;
         alt: string;
     };
+    shareTitle?: string;
+    shareText?: string;
     noindex: boolean;
     blocks: Block[];
 };
@@ -99,14 +137,53 @@ export type Redirect = {
     status: 301 | 302;
 };
 /** What every site has, whatever its blocks. */
+export type MenuLink = {
+    label: string;
+    href: string;
+    emphasis?: boolean;
+};
+export type Menu = {
+    links: MenuLink[];
+    button?: {
+        label: string;
+        href: string;
+    };
+};
+export type FooterLink = {
+    label: string;
+    href: string;
+};
+export type Footer = {
+    columns: {
+        heading?: string;
+        links: FooterLink[];
+    }[];
+    legal: FooterLink[];
+    note?: string;
+};
 export type SiteBase = {
     url: string;
     lang: string;
     business: Business;
     form?: string;
+    menu?: Menu;
+    footer?: Footer;
+    look?: Look;
     redirects: Redirect[]; /** Whether page paths end in a slash (the default). */
     trailingSlash?: boolean;
 };
+/**
+ * The site's menu, as its header draws it: the one edited in CalOS (its links in order, one picked out,
+ * and the header's button), else the pages that have a menu label, in page order (and no button: the
+ * site's own default).
+ */
+export declare function menuOf(site: Pick<Site, "pages" | "menu">): Menu;
+/**
+ * The site's footer links, as its footer draws them: the ones edited in CalOS (columns, each with
+ * its heading; the legal row; a line of small print), else one column of the menu's links and no
+ * legal row (the site's own default, its policy pages say).
+ */
+export declare function footerOf(site: Pick<Site, "pages" | "menu" | "footer">): Footer;
 /** The content as the kit sees it: what search, security, images and the checks need. A site's own type has its blocks and extra fields. */
 export type Site = SiteBase & {
     pages: Page[];
@@ -117,6 +194,7 @@ export type BlocksOf<B extends Record<string, z.ZodObject>> = {
     [K in keyof B & string]: z.output<B[K]> & {
         type: K;
         id?: string;
+        placement?: Placement;
     };
 }[keyof B & string];
 /** A site's content with its own blocks typed: `ContentOf<typeof blocks> & { headerAction?: Link }`. */
@@ -136,6 +214,12 @@ export type DefineOptions = {
     extend?: z.ZodRawShape;
     /** Checks only the site can make (a contact block needs somewhere to send), added to the kit's own. */
     refine?: (site: Site, ctx: z.RefinementCtx) => void;
+    /** How each page's share card looks (colours, fonts, a logo, or a card of the site's own); `false` for none (../share.ts). */
+    share?: ShareOptions;
+    /** Every section gets a Layout (placement: alignment, width, spacing, screens), drawn by the site through placementClass. */
+    placement?: boolean;
+    /** The site's Look, chosen in CalOS (fonts from the ones it carries, colours, corners, buttons), drawn through CSS variables (./look.ts). */
+    look?: LookOptions;
 };
 /**
  * A site's content shape from its blocks: each a name and the fields it has. The site's own block
@@ -153,8 +237,29 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 src: z.ZodString;
                 alt: z.ZodString;
             }, z.core.$strip>>;
+            shareTitle: z.ZodOptional<z.ZodString>;
+            shareText: z.ZodOptional<z.ZodString>;
             noindex: z.ZodDefault<z.ZodBoolean>;
         }, z.core.$strip>>;
+        look?: z.ZodOptional<z.ZodObject<{
+            brand: z.ZodDefault<z.ZodString>;
+            accent: z.ZodDefault<z.ZodString>;
+            corners: z.ZodDefault<z.ZodEnum<{
+                square: "square";
+                soft: "soft";
+                round: "round";
+            }>>;
+            buttons: z.ZodDefault<z.ZodEnum<{
+                solid: "solid";
+                outline: "outline";
+            }>>;
+            headingFont?: z.ZodDefault<z.ZodEnum<{
+                [x: string]: string;
+            }>> | undefined;
+            bodyFont?: z.ZodDefault<z.ZodEnum<{
+                [x: string]: string;
+            }>> | undefined;
+        }, z.core.$strip>> | undefined;
         url: z.ZodURL;
         lang: z.ZodDefault<z.ZodString>;
         business: z.ZodObject<{
@@ -205,6 +310,31 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
             }, z.core.$strip>>;
         }, z.core.$strip>;
         form: z.ZodOptional<z.ZodURL>;
+        menu: z.ZodOptional<z.ZodObject<{
+            links: z.ZodArray<z.ZodObject<{
+                label: z.ZodString;
+                href: z.ZodString;
+                emphasis: z.ZodDefault<z.ZodBoolean>;
+            }, z.core.$strip>>;
+            button: z.ZodOptional<z.ZodObject<{
+                label: z.ZodString;
+                href: z.ZodString;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
+        footer: z.ZodOptional<z.ZodObject<{
+            columns: z.ZodArray<z.ZodObject<{
+                heading: z.ZodOptional<z.ZodString>;
+                links: z.ZodArray<z.ZodObject<{
+                    label: z.ZodString;
+                    href: z.ZodString;
+                }, z.core.$strip>>;
+            }, z.core.$strip>>;
+            legal: z.ZodDefault<z.ZodArray<z.ZodObject<{
+                label: z.ZodString;
+                href: z.ZodString;
+            }, z.core.$strip>>>;
+            note: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
         redirects: z.ZodDefault<z.ZodArray<z.ZodObject<{
             from: z.ZodString;
             to: z.ZodString;
@@ -224,8 +354,29 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                     src: z.ZodString;
                     alt: z.ZodString;
                 }, z.core.$strip>>;
+                shareTitle: z.ZodOptional<z.ZodString>;
+                shareText: z.ZodOptional<z.ZodString>;
                 noindex: z.ZodDefault<z.ZodBoolean>;
             }, z.core.$strip>>;
+            look?: z.ZodOptional<z.ZodObject<{
+                brand: z.ZodDefault<z.ZodString>;
+                accent: z.ZodDefault<z.ZodString>;
+                corners: z.ZodDefault<z.ZodEnum<{
+                    square: "square";
+                    soft: "soft";
+                    round: "round";
+                }>>;
+                buttons: z.ZodDefault<z.ZodEnum<{
+                    solid: "solid";
+                    outline: "outline";
+                }>>;
+                headingFont?: z.ZodDefault<z.ZodEnum<{
+                    [x: string]: string;
+                }>> | undefined;
+                bodyFont?: z.ZodDefault<z.ZodEnum<{
+                    [x: string]: string;
+                }>> | undefined;
+            }, z.core.$strip>> | undefined;
             url: z.ZodURL;
             lang: z.ZodDefault<z.ZodString>;
             business: z.ZodObject<{
@@ -276,6 +427,31 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
                 }, z.core.$strip>>;
             }, z.core.$strip>;
             form: z.ZodOptional<z.ZodURL>;
+            menu: z.ZodOptional<z.ZodObject<{
+                links: z.ZodArray<z.ZodObject<{
+                    label: z.ZodString;
+                    href: z.ZodString;
+                    emphasis: z.ZodDefault<z.ZodBoolean>;
+                }, z.core.$strip>>;
+                button: z.ZodOptional<z.ZodObject<{
+                    label: z.ZodString;
+                    href: z.ZodString;
+                }, z.core.$strip>>;
+            }, z.core.$strip>>;
+            footer: z.ZodOptional<z.ZodObject<{
+                columns: z.ZodArray<z.ZodObject<{
+                    heading: z.ZodOptional<z.ZodString>;
+                    links: z.ZodArray<z.ZodObject<{
+                        label: z.ZodString;
+                        href: z.ZodString;
+                    }, z.core.$strip>>;
+                }, z.core.$strip>>;
+                legal: z.ZodDefault<z.ZodArray<z.ZodObject<{
+                    label: z.ZodString;
+                    href: z.ZodString;
+                }, z.core.$strip>>>;
+                note: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>>;
             redirects: z.ZodDefault<z.ZodArray<z.ZodObject<{
                 from: z.ZodString;
                 to: z.ZodString;
@@ -293,6 +469,8 @@ export declare function defineSite<const B extends Record<string, z.ZodObject>>(
     };
     trailingSlash: boolean;
     csp: Record<string, string[]>;
+    share: ShareOptions | undefined;
+    look: LookOptions | undefined;
     /** The declaration CalOS draws its editing forms from. */
     jsonSchema: () => Record<string, unknown>;
 };

package/dist/content/index.js

@@ -10,6 +10,8 @@
 // them with no further work.
 import { z } from "zod";
 import { checkStructure, describePath } from "../schema.js";
+import { lookProblems, lookSchema } from "./look.js";
+export { contrast, lookCss, lookProblems, lookVars } from "./look.js";
 export { checkStructure, describePath } from "../schema.js";
 export { z };
 // Fields carry an "x-ui" hint in the JSON Schema, so CalOS draws the right control: a text area, a
@@ -36,6 +38,29 @@ export const time = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/, { error: "A ti
 export const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 /** What every block has: a place on the page, for links like /#contact. */
 const blockBase = { id: z.string().regex(/^[a-z][\w-]*$/).optional() };
+/**
+ * How a section sits on the page, for a site that offers it (defineSite's `placement`): its alignment,
+ * width, spacing and the screens it shows on. The site's design says what each means at every width,
+ * so a choice here stays sensible on a phone. CalOS shows it as the section's Layout. (A block's own
+ * `layout`, a site's choice of how it's drawn, is a different thing and keeps its name.)
+ */
+export const placement = z
+    .object({
+    align: z.enum(["left", "center"]).default("left").meta({ title: "Alignment" }),
+    width: z.enum(["narrow", "normal", "wide"]).default("normal").meta({ title: "Width" }),
+    spacing: z.enum(["compact", "normal", "roomy"]).default("normal").meta({ title: "Spacing" }),
+    show: z.enum(["all", "desktop", "phone"]).default("all").meta({ title: "Show on" }),
+})
+    .meta({ title: "Layout" });
+/** A section's placement as class names, only what differs from the usual: "place-align-center place-width-narrow", or "". */
+export function placementClass(block) {
+    const l = block.placement ?? {};
+    const usual = { align: "left", width: "normal", spacing: "normal", show: "all" };
+    return Object.keys(usual)
+        .filter((k) => l[k] && l[k] !== usual[k])
+        .map((k) => `place-${k}-${l[k]}`)
+        .join(" ");
+}
 const address = z.object({
     street: text,
     locality: text,
@@ -77,10 +102,29 @@ const pageBase = (trailingSlash) => ({
     description: text,
     /** Its label in the menu; leave out to keep it off the menu. */
     menu: text.optional(),
-    /** The picture shown when the page is shared; defaults to the first image on it. */
-    share: image.optional(),
+    /** A picture to share the page with instead of its card (made from its words at build). */
+    share: image.optional().meta({ title: "Share picture" }),
+    /** What the page's share card says, when not its title and description. */
+    shareTitle: text.optional().meta({ title: "Share title" }),
+    shareText: longText.optional().meta({ title: "Share text" }),
     noindex: z.boolean().default(false),
 });
+/**
+ * The site's menu, as its header draws it: the one edited in CalOS (its links in order, one picked out,
+ * and the header's button), else the pages that have a menu label, in page order (and no button: the
+ * site's own default).
+ */
+export function menuOf(site) {
+    return site.menu ?? { links: site.pages.filter((p) => p.menu).map((p) => ({ label: p.menu, href: p.path })) };
+}
+/**
+ * The site's footer links, as its footer draws them: the ones edited in CalOS (columns, each with
+ * its heading; the legal row; a line of small print), else one column of the menu's links and no
+ * legal row (the site's own default, its policy pages say).
+ */
+export function footerOf(site) {
+    return site.footer ?? { columns: [{ links: menuOf(site).links.map(({ label, href }) => ({ label, href })) }], legal: [] };
+}
 /**
  * A site's content shape from its blocks: each a name and the fields it has. The site's own block
  * type is `z.output<typeof content.schema>["pages"][number]["blocks"][number]`.
@@ -92,7 +136,7 @@ export function defineSite(blocks, o = {}) {
     const union = z.discriminatedUnion("type", 
     // Each kind keeps what the site said of it (its title, for CalOS to call it by).
     names.map((type) => {
-        const kind = z.object({ type: z.literal(type), ...blockBase }).extend(blocks[type].shape);
+        const kind = z.object({ type: z.literal(type), ...blockBase, ...(o.placement ? { placement: placement.optional() } : {}) }).extend(blocks[type].shape);
         const meta = blocks[type].meta();
         return meta ? kind.meta(meta) : kind;
     }));
@@ -106,8 +150,26 @@ export function defineSite(blocks, o = {}) {
         business,
         /** Where the contact forms post to, if the site has any (a CalOS form's address, or another service's). */
         form: z.url({ protocol: /^https?$/ }).meta({ title: "Where its forms send" }).optional(),
+        /** The header's links in order, and its button: edited as one list in CalOS. Left out, the pages' menu labels are used. */
+        menu: z
+            .object({
+            links: z.array(z.object({ label: text, href, emphasis: z.boolean().default(false).meta({ title: "Emphasize" }) })).max(10),
+            button: z.object({ label: text, href }).optional().meta({ title: "Button" }),
+        })
+            .optional()
+            .meta({ title: "Menu" }),
+        /** The footer's links: columns, the legal row, and a line of small print. Left out, the menu's links are used. */
+        footer: z
+            .object({
+            columns: z.array(z.object({ heading: text.optional(), links: z.array(z.object({ label: text, href })).max(12) })).max(4),
+            legal: z.array(z.object({ label: text, href })).max(6).default([]).meta({ title: "Legal links" }),
+            note: text.optional().meta({ title: "Small print" }),
+        })
+            .optional()
+            .meta({ title: "Footer" }),
         /** Old addresses kept answering, when CalOS doesn't supply them at build. */
         redirects: z.array(z.object({ from: z.string().startsWith("/"), to: href, status: z.union([z.literal(301), z.literal(302)]).default(301) })).default([]),
+        ...(o.look ? { look: lookSchema(o.look) } : {}),
         ...o.extend,
         pages: z.array(page).min(1),
     })
@@ -115,6 +177,9 @@ export function defineSite(blocks, o = {}) {
         const s = site;
         for (const i of checkStructure(s))
             ctx.addIssue({ code: "custom", path: i.path, message: i.message });
+        if (o.look)
+            for (const i of lookProblems(s.look, o.look))
+                ctx.addIssue({ code: "custom", path: i.path, message: i.message });
         o.refine?.(s, ctx);
     });
     return {
@@ -128,6 +193,8 @@ export function defineSite(blocks, o = {}) {
         },
         trailingSlash,
         csp: o.csp ?? {},
+        share: o.share,
+        look: o.look,
         /** The declaration CalOS draws its editing forms from. */
         jsonSchema: () => z.toJSONSchema(schema, { io: "input", unrepresentable: "any" }),
     };

package/dist/content/look.d.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+export type LookOptions = {
+    /** The fonts the site carries, by the name CalOS shows → the font-family it's drawn with. */
+    fonts?: Record<string, string>;
+    /** Which of them the site's headings and text are in, until others are chosen; else the first. */
+    headingFont?: string;
+    bodyFont?: string;
+    /** The site's own colours, used until others are chosen. */
+    brand: string;
+    accent?: string;
+    /** The page's background, which a brand colour must read against. */
+    background?: string;
+    corners?: Corners;
+    buttons?: Buttons;
+};
+declare const CORNERS: readonly ["square", "soft", "round"];
+declare const BUTTONS: readonly ["solid", "outline"];
+type Corners = (typeof CORNERS)[number];
+type Buttons = (typeof BUTTONS)[number];
+/** The Look's fields, for the site's content. */
+export declare function lookSchema(o: LookOptions): z.ZodOptional<z.ZodObject<{
+    brand: z.ZodDefault<z.ZodString>;
+    accent: z.ZodDefault<z.ZodString>;
+    corners: z.ZodDefault<z.ZodEnum<{
+        square: "square";
+        soft: "soft";
+        round: "round";
+    }>>;
+    buttons: z.ZodDefault<z.ZodEnum<{
+        solid: "solid";
+        outline: "outline";
+    }>>;
+    headingFont?: z.ZodDefault<z.ZodEnum<{
+        [x: string]: string;
+    }>> | undefined;
+    bodyFont?: z.ZodDefault<z.ZodEnum<{
+        [x: string]: string;
+    }>> | undefined;
+}, z.core.$strip>>;
+export type Look = {
+    headingFont?: string;
+    bodyFont?: string;
+    brand?: string;
+    accent?: string;
+    corners?: Corners;
+    buttons?: Buttons;
+};
+/** How readable one colour is on another (WCAG): 1 to 21. */
+export declare function contrast(a: string, b: string): number;
+/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it. */
+export declare function lookProblems(look: Look | undefined, o: LookOptions): {
+    path: string[];
+    message: string;
+}[];
+/** The Look as CSS variables: what's chosen, else the site's own. */
+export declare function lookVars(look: Look | undefined, o: LookOptions): Record<string, string>;
+/** The Look as a stylesheet for the page's head: `:root { … }`. */
+export declare function lookCss(look: Look | undefined, o: LookOptions): string;
+export {};

package/dist/content/look.js

@@ -0,0 +1,87 @@
+// A site's Look, chosen in CalOS: its fonts (from the ones the site carries), its brand and accent
+// colours, its corners and its buttons. The site says what may be chosen and its own defaults
+// (defineSite's `look`); what's chosen reaches its CSS as variables, which its design reads:
+//
+//   --look-heading-font, --look-body-font   font-family stacks
+//   --look-brand, --look-on-brand           the brand colour, and the text that reads on it
+//   --look-accent                           the accent colour
+//   --look-radius, --look-button-radius     corners: of cards and pictures, and of buttons
+//   --look-button-bg, --look-button-fg, --look-button-border
+//   --look-button-fill                      1 filled, 0 outlined
+//
+// Published, they're a <style> in the page (LookStyle, allowed by its hash); in CalOS's preview they're
+// set on the page as the draft changes (allowed: a style set from script isn't a style attribute).
+import { z } from "zod";
+const CORNERS = ["square", "soft", "round"];
+const BUTTONS = ["solid", "outline"];
+const HEX = /^#[0-9a-f]{6}$/i;
+const color = z.string().regex(HEX, { error: "A colour like #2b5f8a" }).meta({ "x-ui": "color", "x-error": "A colour like #2b5f8a" });
+/** The Look's fields, for the site's content. */
+export function lookSchema(o) {
+    const fonts = Object.keys(o.fonts ?? {});
+    // Each starts as the site's own, so CalOS shows what the site looks like now.
+    const font = (title, own) => z.enum(fonts).default(own && fonts.includes(own) ? own : fonts[0]).meta({ title });
+    return z
+        .object({
+        ...(fonts.length ? { headingFont: font("Heading font", o.headingFont), bodyFont: font("Text font", o.bodyFont) } : {}),
+        brand: color.default(o.brand).meta({ title: "Brand colour" }),
+        accent: color.default(o.accent ?? o.brand).meta({ title: "Accent colour" }),
+        corners: z.enum(CORNERS).default(o.corners ?? "soft").meta({ title: "Corners" }),
+        buttons: z.enum(BUTTONS).default(o.buttons ?? "solid").meta({ title: "Buttons" }),
+    })
+        .optional()
+        .meta({ title: "Look" });
+}
+/** How readable one colour is on another (WCAG): 1 to 21. */
+export function contrast(a, b) {
+    const lum = (hex) => {
+        const [r, g, bl] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+        return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+    };
+    const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}
+/** The colours chosen that won't read: the brand colour is used for text and buttons on the page, so it must stand out from it. */
+export function lookProblems(look, o) {
+    const bg = o.background ?? "#ffffff";
+    if (look?.brand && HEX.test(look.brand) && HEX.test(bg) && contrast(look.brand, bg) < 3)
+        return [{ path: ["look", "brand"], message: "Too close to the page's background to read: choose a darker or stronger colour" }];
+    return [];
+}
+const RADIUS = { square: ["0", "0"], soft: ["8px", "8px"], round: ["16px", "999px"] };
+/** The Look as CSS variables: what's chosen, else the site's own. */
+export function lookVars(look, o) {
+    const l = look ?? {};
+    const fonts = o.fonts ?? {};
+    const first = Object.values(fonts)[0];
+    const own = (name) => (name && fonts[name]) || first;
+    const brand = l.brand && HEX.test(l.brand) ? l.brand : o.brand;
+    const onBrand = HEX.test(brand) && contrast(brand, "#ffffff") >= contrast(brand, "#111111") ? "#ffffff" : "#111111";
+    const [radius, buttonRadius] = RADIUS[l.corners ?? o.corners ?? "soft"];
+    const outline = (l.buttons ?? o.buttons ?? "solid") === "outline";
+    const vars = {
+        "--look-brand": brand,
+        "--look-on-brand": onBrand,
+        "--look-accent": (l.accent && HEX.test(l.accent) ? l.accent : o.accent) ?? brand,
+        "--look-radius": radius,
+        "--look-button-radius": buttonRadius,
+        "--look-button-bg": outline ? "transparent" : brand,
+        "--look-button-fg": outline ? brand : onBrand,
+        "--look-button-border": brand,
+        /** 1 for a filled button, 0 for an outlined one: for a design that mixes its own colours by it. */
+        "--look-button-fill": outline ? "0" : "1",
+    };
+    const heading = (l.headingFont && fonts[l.headingFont]) || own(o.headingFont);
+    const body = (l.bodyFont && fonts[l.bodyFont]) || own(o.bodyFont);
+    if (heading)
+        vars["--look-heading-font"] = heading;
+    if (body)
+        vars["--look-body-font"] = body;
+    return vars;
+}
+/** The Look as a stylesheet for the page's head: `:root { … }`. */
+export function lookCss(look, o) {
+    return `:root{${Object.entries(lookVars(look, o))
+        .map(([k, v]) => `${k}:${v.replace(/[<>{};]/g, "")}`)
+        .join(";")}}`;
+}

package/dist/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) and the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/next/index.d.ts

@@ -2,4 +2,5 @@ export { image, pageAt, prepared, site } from "./data.ts";
 export { JsonLd } from "./JsonLd.tsx";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.ts";
 export { Img, type Ratio } from "./parts/Img.tsx";
+export { LookStyle } from "./parts/LookStyle.tsx";
 export { Md } from "./parts/Md.tsx";

package/dist/next/index.js

@@ -5,4 +5,5 @@ export { image, pageAt, prepared, site } from "./data.js";
 export { JsonLd } from "./JsonLd.js";
 export { pageMetadata, robots, sitemap, staticParams } from "./metadata.js";
 export { Img } from "./parts/Img.js";
+export { LookStyle } from "./parts/LookStyle.js";
 export { Md } from "./parts/Md.js";

package/dist/next/metadata.js

@@ -2,13 +2,18 @@
 // all from the prepared content.
 import { shareImageOf } from "../images.js";
 import { canonical, fullTitle } from "../seo.js";
-import { image, site } from "./data.js";
+import { image, prepared, site } from "./data.js";
 export function pageMetadata(page) {
     const s = site();
     const title = fullTitle(s, page);
     const url = canonical(s, page.path);
-    const share = shareImageOf(s, page);
-    const shareUrl = share ? image(share.src).share : undefined;
+    // Shared with: the picture chosen for it, else its card (else, with cards off or a site that
+    // prefers them, its first picture).
+    const p = prepared();
+    const card = p.cards?.[page.path];
+    const picture = page.share ?? (!card || p.preferPicture ? shareImageOf(s, page) : undefined);
+    const share = picture && !picture.src.endsWith(".svg") ? picture : undefined;
+    const shareUrl = share ? image(share.src).share : card;
     return {
         metadataBase: new URL(s.url),
         title: { absolute: title },
@@ -22,7 +27,7 @@ export function pageMetadata(page) {
             description: page.description,
             url,
             locale: s.lang.replace("-", "_"),
-            images: shareUrl && share ? [{ url: new URL(shareUrl, s.url).href, width: 1200, height: 630, alt: share.alt }] : undefined,
+            images: shareUrl ? [{ url: new URL(shareUrl, s.url).href, width: 1200, height: 630, alt: share?.alt ?? page.title }] : undefined,
         },
         twitter: { card: shareUrl ? "summary_large_image" : "summary" },
     };

package/dist/next/parts/LookStyle.d.ts

@@ -0,0 +1,5 @@
+import { type LookOptions } from "../../content/look.ts";
+/** The site's Look as CSS variables, for its layout's <head> (content/look.ts). */
+export declare function LookStyle({ look }: {
+    look: LookOptions;
+}): import("react").JSX.Element;

package/dist/next/parts/LookStyle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lookCss } from "../../content/look.js";
+import { prepared } from "../data.js";
+/** The site's Look as CSS variables, for its layout's <head> (content/look.ts). */
+export function LookStyle({ look }) {
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: lookCss(prepared().site.look, look) } });
+}

package/dist/next/preview.d.ts

@@ -1,6 +1,9 @@
 import { type ReactNode } from "react";
 import type { Page, Site } from "../content/index.ts";
-export declare function SitePreview({ origins, render }: {
+import { type LookOptions } from "../content/look.ts";
+/** `look`: the same Look options the site's defineSite has, for the draft's Look to be drawn as it's chosen. */
+export declare function SitePreview({ origins, render, look }: {
     origins: string[];
     render: (page: Page, site: Site) => ReactNode;
+    look?: LookOptions;
 }): import("react").JSX.Element | null;

package/dist/next/preview.js

@@ -7,12 +7,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // them: its caltho.app address and its own domain, from the build) are listened to.
 //
 // CalOS → page: { type: "calos:show", site, images, path, selected?, scroll?, labels? }
-// page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block }, { type: "calos:go", path },
+// page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block },
 //               { type: "calos:error", message }
 import { Component, useEffect, useRef, useState } from "react";
+import { lookVars } from "../content/look.js";
 import { BUILT_IMAGES, fieldForImage, fieldForText } from "../preview-match.js";
 import { setPrepared } from "./data.js";
-export function SitePreview({ origins, render }) {
+/** `look`: the same Look options the site's defineSite has, for the draft's Look to be drawn as it's chosen. */
+export function SitePreview({ origins, render, look }) {
     const [shown, setShown] = useState(null);
     const [round, setRound] = useState(0);
     const latest = useRef(null);
@@ -66,14 +68,7 @@ export function SitePreview({ origins, render }) {
                 return;
             e.preventDefault();
             e.stopPropagation();
-            const main = document.querySelector("main");
-            const link = target.closest("a");
-            if (link && !main?.contains(link)) {
-                const to = internalPath(link.getAttribute("href"), m.site);
-                if (to)
-                    post({ type: "calos:go", path: to });
-                return;
-            }
+            // A link anywhere (a section's, the menu's, the footer's) is edited, never followed: CalOS's page picker moves between pages.
             // A picture under the pointer counts, even when something over it (a frame, a caption's box) took the click.
             const under = document.elementsFromPoint(e.clientX, e.clientY).find((el) => el.tagName === "IMG") ?? target;
             post({ type: "calos:pick", ...pick(under, m, wordsAt(e.clientX, e.clientY)) });
@@ -138,6 +133,13 @@ export function SitePreview({ origins, render }) {
             window.removeEventListener("resize", keep);
         };
     }, [shown, round]);
+    // The draft's Look, set on the page (LookStyle drew the published one into the build).
+    useEffect(() => {
+        if (!shown || !look)
+            return;
+        for (const [k, v] of Object.entries(lookVars(shown.site.look, look)))
+            document.documentElement.style.setProperty(k, v);
+    }, [shown, look]);
     if (!shown)
         return null;
     const page = shown.site.pages.find((p) => p.path === shown.path) ?? shown.site.pages[0];
@@ -169,17 +171,6 @@ function asBuilt(images) {
     }
     return out;
 }
-/** A path on this site from a link's address, as the content writes it; null for anywhere else. */
-function internalPath(href, site) {
-    if (!href || href.startsWith("#") || /^(mailto|tel):/.test(href))
-        return null;
-    const url = new URL(href, location.href);
-    if (url.origin !== location.origin && url.origin !== new URL(site.url).origin)
-        return null;
-    const bare = url.pathname.replace(/\/$/, "") || "/";
-    const withSlash = bare === "/" ? "/" : `${bare}/`;
-    return site.pages.some((p) => p.path === bare) ? bare : site.pages.some((p) => p.path === withSlash) ? withSlash : null;
-}
 const pageIndex = (m) => m.site.pages.findIndex((p) => p.path === m.path);
 /** What's in `main` without being drawn: a page's structured data (JSON-LD) and the like. */
 const UNDRAWN = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "LINK", "META"]);
@@ -226,7 +217,9 @@ function pick(target, m, words = null) {
             return { path: found, block: blockOf(found) ?? block };
     }
     if (words) {
-        const exact = (scope && fieldForText(scope, block, words, false)) ?? fieldForText(shared, [], words, false) ?? fieldForText(pageOwn, ["pages", pi], words, false);
+        // Outside a section, a menu made from the pages' menu labels is any page's label.
+        const labels = { pages: m.site.pages.map((p) => ({ menu: p.menu })) };
+        const exact = (scope && fieldForText(scope, block, words, false)) ?? fieldForText(shared, [], words, false) ?? fieldForText(pageOwn, ["pages", pi], words, false) ?? (n < 0 ? fieldForText(labels, [], words, false) : null);
         if (exact)
             return { path: exact, block: blockOf(exact) ?? block };
     }

package/dist/prepare.d.ts

@@ -21,6 +21,10 @@ export type Prepared = {
     csp: Record<string, string[]>;
     /** The addresses of the CalOS this content came from (every one the business uses it on): those that may draw drafts in the preview. */
     editors?: string[];
+    /** Each page's share card (../share.ts), by its path; none when the site turned them off. */
+    cards?: Record<string, string>;
+    /** Whether a page with pictures but no share picture chosen is shared with its first picture rather than its card. */
+    preferPicture?: boolean;
 };
 type Log = (line: string) => void;
 export declare function prepare(root: string, env?: Record<string, string | undefined>, log?: Log): Promise<Prepared>;

package/dist/prepare.js

@@ -20,6 +20,7 @@ import { dirname, extname, join, relative } from "node:path";
 import sharp from "sharp";
 import { pathToFileURL } from "node:url";
 import { imagesIn, shareImageOf } from "./images.js";
+import { makeCards } from "./share.js";
 const WIDTHS = [400, 640, 800, 1024, 1280, 1600, 2000];
 export async function prepare(root, env = process.env, log = console.log) {
     const out = join(root, ".site");
@@ -86,7 +87,9 @@ export async function prepare(root, env = process.env, log = console.log) {
     if (env.CALOS_CONTENT_URL)
         await pushSchema(env.CALOS_CONTENT_URL, env.CALOS_SCHEMA_URL, env.CALOS_SITE_TOKEN, schema, log);
     const images = await pictures(site, imagesDir, pub, log);
-    const prepared = { site, images, csp: definition.csp, ...(editors.length ? { editors } : {}) };
+    const cards = await makeCards(site, definition.share, root, pub, log);
+    const preferPicture = !!definition.share && definition.share.prefer === "picture";
+    const prepared = { site, images, csp: definition.csp, cards, ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}) };
     await writeFile(join(out, "prepared.json"), JSON.stringify(prepared));
     log(`site-kit: content from ${from}, ${site.pages.length} pages, ${Object.keys(images).length} images`);
     return prepared;

package/dist/share.d.ts

@@ -0,0 +1,54 @@
+import type { Page, Site } from "./content/index.ts";
+export declare const SHARE_WIDTH = 1200;
+export declare const SHARE_HEIGHT = 630;
+/** What a card says. */
+export type ShareCard = {
+    title: string;
+    text: string;
+    business: string;
+    path: string;
+};
+/** A node of the card, as satori draws it (a subset of HTML and CSS, flexbox only). */
+export type CardNode = {
+    type: string;
+    props: Record<string, unknown> & {
+        style?: Record<string, unknown>;
+        children?: unknown;
+    };
+};
+export type ShareFont = {
+    name: string; /** A .woff, .ttf or .otf, from the site's root. */
+    path: string;
+    weight?: 400 | 500 | 600 | 700;
+    style?: "normal" | "italic";
+};
+export type ShareOptions = false | {
+    /** The card's colour behind everything (any CSS colour). */
+    background?: string;
+    /** A picture behind it, from the site's root (public/og.png), stretched to 1200×630. */
+    backgroundImage?: string;
+    /** The title's colour, the text's, and the line above the title. */
+    color?: string;
+    muted?: string;
+    accent?: string;
+    /** The business's logo (a .png or .svg from the site's root), top left; else its name in words. */
+    logo?: string;
+    /** The site's own fonts; the first's name is the family used. Else DM Sans, which the kit carries. */
+    fonts?: ShareFont[];
+    /** Which first, for a page that has pictures but no share picture chosen: the card (the default) or its first picture. */
+    prefer?: "card" | "picture";
+    /** A card of the site's own: given what it says and helpers, the node to draw. */
+    render?: (card: ShareCard, h: {
+        el: typeof el;
+        image: (path: string) => Promise<string>;
+    }) => CardNode | Promise<CardNode>;
+};
+/** A box: a div, flex by default as satori wants it. */
+export declare const el: (style: Record<string, unknown>, children?: unknown, props?: Record<string, unknown>) => CardNode;
+/** What a page's card says: the share title and text CalOS can set, else its title and description. */
+export declare function cardOf(site: Site, page: Page): ShareCard;
+/**
+ * Each page's card, made into public/_img/share/ (named from what it says and how it's drawn, so a
+ * card already made is kept); its address by page path. Nothing when the site turned cards off.
+ */
+export declare function makeCards(site: Site, options: ShareOptions | undefined, root: string, pub: string, log?: (line: string) => void): Promise<Record<string, string>>;

package/dist/share.js

@@ -0,0 +1,87 @@
+// The card each page is shared with (Open Graph, 1200×630): made at build from the page's own words
+// (its share title and text when CalOS gives it them, else its title and description) and the
+// business's name, in the site's colours and fonts. Content edited in CalOS rebuilds the site, so a
+// card always says what the page says. A page with a share picture chosen keeps the picture.
+//
+// A site sets how its cards look with `defineSite(blocks, { share })`: colours, a background picture,
+// fonts, a logo, or its own `render` for a different card altogether; `share: false` turns cards
+// off (pages are shared with a picture from them, as before).
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { extname, join } from "node:path";
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+export const SHARE_WIDTH = 1200;
+export const SHARE_HEIGHT = 630;
+/** A box: a div, flex by default as satori wants it. */
+export const el = (style, children, props = {}) => ({ type: "div", props: { ...props, style: { display: "flex", ...style }, children } });
+/** What a page's card says: the share title and text CalOS can set, else its title and description. */
+export function cardOf(site, page) {
+    const p = page;
+    return { title: (p.shareTitle ?? page.title).slice(0, 120), text: (p.shareText ?? page.description).slice(0, 180), business: site.business.name, path: page.path };
+}
+const KIT_FONTS = [
+    { name: "DM Sans", path: "DMSans-Regular.woff", weight: 400 },
+    { name: "DM Sans", path: "DMSans-Medium.woff", weight: 500 },
+    { name: "DM Sans", path: "DMSans-Bold.woff", weight: 700 },
+];
+const TYPES = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp", ".svg": "image/svg+xml" };
+async function dataUri(root, path) {
+    const type = TYPES[extname(path).toLowerCase()];
+    if (!type)
+        throw new Error(`The share card's picture ${path} isn't a .png, .jpg, .webp or .svg`);
+    return `data:${type};base64,${(await readFile(join(root, path))).toString("base64")}`;
+}
+/** The card the kit draws when a site doesn't draw its own: its name (or logo), the title large, the text under it. */
+async function defaultCard(card, o, root, family) {
+    const size = card.title.length > 60 ? 54 : card.title.length > 32 ? 66 : 80;
+    const bg = o.backgroundImage ? { backgroundImage: `url(${await dataUri(root, o.backgroundImage)})`, backgroundSize: "100% 100%" } : {};
+    const top = o.logo
+        ? { type: "img", props: { src: await dataUri(root, o.logo), height: 56, style: { height: 56, objectFit: "contain" } } }
+        : el({ fontSize: 30, fontWeight: 700, color: o.color ?? "#16181d", letterSpacing: "-0.02em" }, card.business);
+    return el({ width: "100%", height: "100%", flexDirection: "column", justifyContent: "space-between", padding: "72px", background: o.background ?? "#f7f6f2", fontFamily: family, ...bg }, [
+        top,
+        el({ flexDirection: "column", gap: "24px", maxWidth: "980px" }, [
+            el({ width: 72, height: 6, borderRadius: 3, background: o.accent ?? "#2b5f8a" }),
+            el({ fontSize: size, fontWeight: 700, lineHeight: 1.08, letterSpacing: "-0.03em", color: o.color ?? "#16181d" }, card.title),
+            ...(card.text ? [el({ fontSize: 30, fontWeight: 400, lineHeight: 1.4, color: o.muted ?? "#575c66", maxWidth: "900px" }, card.text)] : []),
+        ]),
+    ]);
+}
+/**
+ * Each page's card, made into public/_img/share/ (named from what it says and how it's drawn, so a
+ * card already made is kept); its address by page path. Nothing when the site turned cards off.
+ */
+export async function makeCards(site, options, root, pub, log = () => { }) {
+    if (options === false)
+        return {};
+    const o = options ?? {};
+    const fonts = o.fonts?.length ? o.fonts.map((f) => ({ ...f, from: root })) : KIT_FONTS.map((f) => ({ ...f, from: new URL("./fonts/", import.meta.url).pathname }));
+    const loaded = await Promise.all(fonts.map(async (f) => ({ name: f.name, data: await readFile(join(f.from, f.path)), weight: f.weight ?? 400, style: f.style ?? "normal" })));
+    const family = fonts[0].name;
+    const dir = join(pub, "_img", "share");
+    await mkdir(dir, { recursive: true });
+    // How the cards are drawn, in the names: a change of colours, fonts or the site's own render makes them anew.
+    const look = createHash("sha256")
+        .update(JSON.stringify({ ...o, render: o.render?.toString() ?? null }))
+        .digest("hex");
+    const out = {};
+    let made = 0;
+    for (const page of site.pages) {
+        const card = cardOf(site, page);
+        const hash = createHash("sha256").update(look).update(JSON.stringify(card)).digest("hex").slice(0, 10);
+        const slug = page.path.replace(/^\/|\/$/g, "").replace(/[^\w-]+/g, "-") || "home";
+        const name = `${slug}.${hash}.png`;
+        out[page.path] = `/_img/share/${name}`;
+        if (existsSync(join(dir, name)))
+            continue;
+        const node = o.render ? await o.render(card, { el, image: (path) => dataUri(root, path) }) : await defaultCard(card, o, root, family);
+        const svg = await satori(node, { width: SHARE_WIDTH, height: SHARE_HEIGHT, fonts: loaded });
+        await writeFile(join(dir, name), new Resvg(svg, { fitTo: { mode: "width", value: SHARE_WIDTH } }).render().asPng());
+        made++;
+    }
+    if (made)
+        log(`site-kit: ${made} share card${made === 1 ? "" : "s"} made`);
+    return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "What every Caltho site is built with: the contract with CalOS (content, and how a site declares what is editable), images, search and security, and the checks",
   "license": "MIT",
   "type": "module",
@@ -50,13 +50,15 @@
     "node": ">=22.18"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && chmod +x dist/cli/index.js",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp -R src/fonts dist/fonts && chmod +x dist/cli/index.js",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "bun test src",
     "prepack": "bun run build"
   },
   "dependencies": {
+    "@resvg/resvg-js": "2.6.2",
     "marked": "18.1.0",
+    "satori": "0.33.4",
     "sharp": "0.35.5",
     "zod": "4.6.7"
   },