@caltho/site-kit 0.2.0 → 0.2.2

package/dist/content/index.js

@@ -101,11 +101,11 @@ export function defineSite(blocks, o = {}) {
     const schema = z
         .object({
         /** The address it's served at once live (its main domain). */
-        url: z.url({ protocol: /^https$/, error: "The site's address, starting https://" }),
-        lang: z.string().default("en-US"),
+        url: z.url({ protocol: /^https$/, error: "The site's address, starting https://" }).meta({ title: "Web address" }),
+        lang: z.string().default("en-US").meta({ title: "Language" }),
         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?$/ }).optional(),
+        form: z.url({ protocol: /^https?$/ }).meta({ title: "Where its forms send" }).optional(),
         /** 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.extend,

package/dist/finish.js

@@ -5,6 +5,7 @@
 import { createHash } from "node:crypto";
 import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
+import { BUILT_IMAGES } from "./preview-match.js";
 import { headersFile, loadRedirects, PREVIEW_PATH } from "./seo.js";
 export async function finish(root, outDir, env = process.env, log = console.log) {
     const prepared = JSON.parse(await readFile(join(root, ".site", "prepared.json"), "utf8"));
@@ -42,9 +43,14 @@ export async function finish(root, outDir, env = process.env, log = console.log)
         };
         for (const [directive, sources] of Object.entries(prepared.csp ?? {}))
             directives[directive] = [...new Set([...(directives[directive] ?? ["'self'"]), ...sources])];
-        // The preview shows the draft's pictures from CalOS, before any build has made them.
-        if (relative(outDir, file).replace(/(\/index)?\.html$/, "") === PREVIEW_PATH.slice(1))
+        // The preview shows the draft's pictures from CalOS, before any build has made them; those this
+        // build made, it shows as built (./next/preview.tsx), from the list it carries.
+        const isPreview = relative(outDir, file).replace(/(\/index)?\.html$/, "") === PREVIEW_PATH.slice(1);
+        if (isPreview) {
             directives["img-src"].push(...editors);
+            const built = JSON.stringify(prepared.images ?? {}).replace(/</g, "\\u003c");
+            html = html.replace(/<\/head>/i, () => `<script type="application/json" id="${BUILT_IMAGES}">${built}</script></head>`);
+        }
         const policy = Object.entries(directives).map(([d, v]) => `${d} ${v.join(" ")}`).join("; ");
         html = html.replace(/<meta http-equiv="content-security-policy"[^>]*>/i, "");
         html = html.replace(/<head([^>]*)>/i, `<head$1><meta http-equiv="content-security-policy" content="${policy}">`);

package/dist/next/data.js

@@ -8,10 +8,20 @@ let loader = null;
 export function loadPreparedWith(load) {
     loader = load;
 }
+/** Whether the store holds a draft from CalOS's preview, rather than a build's content. */
+let drafting = false;
 /** Puts content in the store: CalOS's preview, with the draft it's editing. */
 export function setPrepared(p) {
     current = p;
+    drafting = true;
 }
+/** A picture not chosen yet, in a draft: a grey box where it will go. */
+const NOT_CHOSEN = {
+    width: 1600,
+    height: 1000,
+    src: `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000"><rect width="100%" height="100%" fill="#e5e5e5"/></svg>')}`,
+    srcset: [],
+};
 export function prepared() {
     if (loader && (!current || process.env.NODE_ENV === "development"))
         current = loader();
@@ -22,6 +32,10 @@ export function prepared() {
 export const site = () => prepared().site;
 export function image(src) {
     const found = prepared().images[src];
+    // A section being filled in, in the preview, is drawn with its picture still to choose; a build
+    // with a picture it didn't prepare stops.
+    if (!found && drafting)
+        return NOT_CHOSEN;
     if (!found)
         throw new Error(`The image "${src}" wasn't prepared: run \`site-kit prepare\` again`);
     return found;

package/dist/next/preview.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // page → CalOS: { type: "calos:ready" }, { type: "calos:pick", path, block }, { type: "calos:go", path },
 //               { type: "calos:error", message }
 import { Component, useEffect, useRef, useState } from "react";
-import { fieldForImage, fieldForText } from "../preview-match.js";
+import { BUILT_IMAGES, fieldForImage, fieldForText } from "../preview-match.js";
 import { setPrepared } from "./data.js";
 export function SitePreview({ origins, render }) {
     const [shown, setShown] = useState(null);
@@ -31,9 +31,10 @@ export function SitePreview({ origins, render }) {
         const onMessage = (e) => {
             if (!origins.includes(e.origin) || e.source !== window.parent)
                 return;
-            const m = e.data;
-            if (m?.type !== "calos:show")
+            const sent = e.data;
+            if (sent?.type !== "calos:show")
                 return;
+            const m = { ...sent, images: asBuilt(sent.images) };
             replyTo.current = e.origin;
             setPrepared({ site: m.site, images: m.images, csp: {} });
             latest.current = m;
@@ -114,13 +115,18 @@ export function SitePreview({ origins, render }) {
         const el = blockElement(shown);
         const label = (m) => (m?.selected && typeof m.selected[3] === "number" ? m.labels?.[m.selected[3]] : undefined);
         outline("selected", el, label(shown));
-        // The section just chosen is outlined as chosen, not as under the pointer too.
-        if (el && hovered === el)
-            outline("section", null);
+        // What was under the pointer has moved with the drawing: outlined again on the next move.
+        hovered = null;
+        outline("section", null);
+        outline("hover", null);
         // Scrolled here only: scrollIntoView would scroll CalOS's page around the frame too.
         if (el && shown.scroll)
             window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - window.innerHeight / 4, behavior: "smooth" });
-        const keep = () => outline("selected", blockElement(latest.current), label(latest.current));
+        const keep = () => {
+            outline("selected", blockElement(latest.current), label(latest.current));
+            outline("section", null);
+            outline("hover", null);
+        };
         window.addEventListener("scroll", keep, { passive: true });
         window.addEventListener("resize", keep);
         return () => {
@@ -135,6 +141,30 @@ export function SitePreview({ origins, render }) {
         return null;
     return (_jsx(Fallback, { onError: (message) => post({ type: "calos:error", message }), children: render(page, shown.site) }, round));
 }
+/** The pictures this build made (finish writes the list into this page), by path. */
+let built = null;
+/**
+ * CalOS's pictures, each one the build made unchanged (the same file: its built names carry the
+ * start of its SHA-256, CalOS's address all of it) swapped for the built copies, sized as the site
+ * serves them; a picture new since the build comes from CalOS.
+ */
+function asBuilt(images) {
+    if (!built) {
+        try {
+            built = JSON.parse(document.getElementById(BUILT_IMAGES)?.textContent || "{}");
+        }
+        catch {
+            built = {};
+        }
+    }
+    const out = {};
+    for (const [path, img] of Object.entries(images)) {
+        const sha = /\/assets\/([0-9a-f]{64})$/.exec(img.src)?.[1];
+        const made = built[path];
+        out[path] = made?.hash && sha?.startsWith(made.hash) ? made : img;
+    }
+    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))
@@ -147,13 +177,15 @@ function internalPath(href, site) {
     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);
-/** The page's blocks as drawn: `main`'s children, when there's one for each block. */
+/** 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"]);
+/** The page's blocks as drawn: `main`'s children (those drawn), when there's one for each block. */
 function blockElements(m) {
     const main = document.querySelector("main");
     const page = m.site.pages[pageIndex(m)];
     if (!main || !page)
         return null;
-    const kids = [...main.children];
+    const kids = [...main.children].filter((e) => !UNDRAWN.has(e.tagName));
     return kids.length === page.blocks.length ? kids : null;
 }
 function blockElement(m) {

package/dist/prepare.d.ts

@@ -11,6 +11,8 @@ export type PreparedImage = {
     }[];
     /** A 1200×630 JPEG, where a page shares it. */
     share?: string;
+    /** The start of the file's SHA-256, as in its built names: CalOS's preview knows a picture unchanged since the build by it. */
+    hash?: string;
 };
 export type Prepared = {
     site: Site;

package/dist/prepare.js

@@ -113,7 +113,7 @@ async function pictures(site, imagesDir, pub, log) {
             if (!existsSync(join(dir, name)))
                 await writeFile(join(dir, name), bytes);
             const meta = await sharp(bytes).metadata();
-            result[src] = { width: meta.width ?? 0, height: meta.height ?? 0, src: `/_img/${name}`, srcset: [] };
+            result[src] = { width: meta.width ?? 0, height: meta.height ?? 0, src: `/_img/${name}`, srcset: [], hash };
             continue;
         }
         const img = sharp(bytes).rotate();
@@ -135,7 +135,7 @@ async function pictures(site, imagesDir, pub, log) {
             }
             srcset.push({ w, url: `/_img/${name}` });
         }
-        const entry = { width, height, src: srcset.at(-1).url, srcset };
+        const entry = { width, height, src: srcset.at(-1).url, srcset, hash };
         if (shared.has(src)) {
             const name = `${base}.${hash}.share.jpg`;
             if (!existsSync(join(dir, name))) {

package/dist/preview-match.d.ts

@@ -1,3 +1,5 @@
+/** The preview page's list of the pictures its build made (by path), as a JSON script with this id (../finish.ts). */
+export declare const BUILT_IMAGES = "calos-built-images";
 export type Path = (string | number)[];
 /** Words as they read on the page: Markdown's marks gone, a link's address gone, spacing and case evened. */
 export declare function readable(text: string): string;

package/dist/preview-match.js

@@ -1,6 +1,8 @@
 // Which field of the content a click in CalOS's preview landed on, with no markers in the site's
 // components: the words clicked are matched against the content's text, a picture by its address.
 // Pure, so it's tested here and runs in the preview in the browser.
+/** The preview page's list of the pictures its build made (by path), as a JSON script with this id (../finish.ts). */
+export const BUILT_IMAGES = "calos-built-images";
 /** Keys that hold no words a visitor reads: never what a click on words means. */
 const SKIP = new Set(["type", "id", "href", "path", "style", "menuStyle", "footer", "ratio", "tone"]);
 /** Words as they read on the page: Markdown's marks gone, a link's address gone, spacing and case evened. */

package/dist/seo.js

@@ -111,7 +111,8 @@ export function headersFile(editors = []) {
     // Every page refuses to be framed (X-Frame-Options, which every browser honours), but the
     // preview: there, only the CalOS addresses the build was given (./next/preview.tsx), which is
     // why the refusal isn't also a frame-ancestors policy on every page, which the preview's couldn't
-    // loosen. With no CalOS addresses, the preview refuses too.
+    // loosen. With no CalOS addresses, the preview refuses too. Both of its addresses: Cloudflare
+    // serves a page built as a folder at the one with the slash, and sends the other there.
     const preview = editors.length ? `  ! X-Frame-Options\n  Content-Security-Policy: frame-ancestors ${editors.join(" ")}\n` : "";
     return `/*
   X-Content-Type-Options: nosniff
@@ -133,6 +134,10 @@ ${PREVIEW_PATH}
 ${preview}  X-Robots-Tag: noindex
   Cache-Control: no-store
 
+${PREVIEW_PATH}/
+${preview}  X-Robots-Tag: noindex
+  Cache-Control: no-store
+
 https://:project.pages.dev/*
   X-Robots-Tag: noindex
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caltho/site-kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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",