@caltho/site-kit 0.2.5 → 0.2.7

package/README.md

@@ -57,8 +57,8 @@ the kit only checks it's a URL.
 | --- | --- |
 | **Content** (`@caltho/site-kit/content`) | `defineSite` and the pieces to build blocks from (`text`, `md`, `image`, `link`, `href`, `business`, …); the checks, including that every link lands on a page and every `#part` exists; the JSON Schema. |
 | **prepare** | Loads the content from CalOS (`CALOS_CONTENT_URL`, `CALOS_SITE_TOKEN`; the site's own while nothing's published there) or `content/site.json`, sends CalOS the schema, checks it, writes the schema, and makes every picture the content names as WebP at the widths screens need plus a 1200×630 share crop, named by content so they cache for a year. |
-| **finish** | After the framework's build: a content security policy in every page (each inline script named by hash), `_headers` (security headers, long caching, `noindex` on preview addresses), and `_redirects` from CalOS (`CALOS_REDIRECTS_URL`; a build that can't reach CalOS fails rather than lose them). |
-| **check** | Every page in a real browser through axe (WCAG 2.0–2.2 A and AA, best practice) on a computer and a phone; fails on any violation, on anything the policy blocks, and on anything that doesn't load. |
+| **finish** | After the framework's build: a content security policy in every page (each inline script named by hash), `_headers` (security headers, long caching, `noindex` on preview addresses), and `_redirects` from CalOS (`CALOS_REDIRECTS_URL`; a build that can't reach CalOS fails rather than lose them). Where CalOS counts the site's visits (its content answer says where they go), the analytics script in every published page but the preview, with its addresses in the policy, and phone and map links marked so a tap is counted (`phone_tap`, `directions_tap`; a link marked `data-track` already is left as it is). No cookies. |
+| **check** | Every page in a real browser on a computer and a phone: fails on anything the policy blocks and anything that doesn't load. What axe finds (WCAG 2.0–2.2 A and AA, best practice) is said with where, for the site to weigh (a colour the business chose over the contrast rule is their choice); `--strict` fails on it too, `--allow=rule,rule` leaves named rules out. |
 | **Search** | Titles that fit, canonical addresses, the business as schema.org data (hours, areas, address), FAQ and breadcrumb data, robots.txt, the sitemap. |
 | **Policies** | Privacy, accessibility and terms, written from the business's facts and what the site does. Optional: a site calls `policy()` where it wants them. |
 | **Helpers for components** (`@caltho/site-kit/lib`) | The pieces that touch no files: `md` (Markdown that can't run HTML), `plain`, `policy`, the search data, `imagesIn`, `clock`, `dayRange`, `telHref`. |

package/dist/cli/check.d.ts

@@ -1,4 +1,5 @@
 export declare function check(dir: string, o?: {
-    allow?: string[];
+    allow?: string[]; /** What axe finds fails the check too. */
+    strict?: boolean;
     log?: (line: string) => void;
 }): Promise<boolean>;

package/dist/cli/check.js

@@ -1,7 +1,9 @@
 // Checks a built site in a real browser before it's published: every page in its sitemap and the
-// 404 page, on a computer screen and a phone, with axe (WCAG 2.2 AA and best practice), and with
-// nothing blocked by the site's own content security policy or failing to load. Says what's wrong
-// and where; true when nothing is.
+// 404 page, on a computer screen and a phone, with nothing blocked by the site's own content
+// security policy or failing to load, and with axe (WCAG 2.2 AA and best practice). Something
+// broken fails the check. What axe finds is said, with where, but is the site's to weigh (a colour
+// the business chose over the contrast rule is their choice): it fails the check only with
+// `strict`. True when nothing is broken (and, strict, nothing is found).
 var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
     if (typeof path === "string" && /^\.\.?\//.test(path)) {
         return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
@@ -28,6 +30,7 @@ export async function check(dir, o = {}) {
     paths.push("/404.html");
     const server = await serve(dir, port);
     const problems = [];
+    const found = [];
     const browser = await chromium.launch(process.env.CHROMIUM_PATH ? { executablePath: process.env.CHROMIUM_PATH } : {}).catch((err) => {
         server.close();
         throw err;
@@ -58,7 +61,7 @@ export async function check(dir, o = {}) {
                 window.axe.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa", "best-practice"] } })));
                 for (const v of result.violations.filter((x) => !allow.has(x.id))) {
                     const targets = v.nodes.slice(0, 3).map((n) => n.target.join(" "));
-                    problems.push(`${path} (${screen}): ${v.id}: ${v.help} [${v.impact}] at ${targets.join(", ")}${v.nodes.length > 3 ? ` and ${v.nodes.length - 3} more` : ""}`);
+                    found.push(`${path} (${screen}): ${v.id}: ${v.help} [${v.impact}] at ${targets.join(", ")}${v.nodes.length > 3 ? ` and ${v.nodes.length - 3} more` : ""}`);
                 }
             }
             await context.close();
@@ -68,10 +71,14 @@ export async function check(dir, o = {}) {
         await browser.close();
         server.close();
     }
-    if (problems.length) {
-        log(`✗ ${dir}: ${problems.length} problem${problems.length === 1 ? "" : "s"}\n  - ${[...new Set(problems)].join("\n  - ")}`);
-        return false;
-    }
-    log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: no accessibility problems axe can find${allow.size ? ` (except the ones allowed: ${[...allow].join(", ")})` : ""}, nothing blocked or broken`);
-    return true;
+    const list = (lines) => `\n  - ${[...new Set(lines)].join("\n  - ")}`;
+    if (problems.length)
+        log(`✗ ${dir}: ${problems.length} problem${problems.length === 1 ? "" : "s"}${list(problems)}`);
+    else
+        log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: nothing blocked or broken`);
+    if (found.length)
+        log(`${o.strict ? "✗" : "•"} ${dir}: accessibility, ${found.length} thing${found.length === 1 ? "" : "s"} to look at${o.strict ? "" : " (the site's to weigh; --strict fails on them)"}${list(found)}`);
+    else
+        log(`✓ ${dir}: no accessibility problems axe can find${allow.size ? ` (except the ones allowed: ${[...allow].join(", ")})` : ""}`);
+    return !problems.length && (!o.strict || !found.length);
 }

package/dist/cli/index.js

@@ -2,7 +2,7 @@
 // site-kit prepare            content checked, schema written, images ready for the build (.site/, public/)
 // site-kit finish [out]       after the build: the content security policy, _headers, _redirects
 // site-kit serve [out] [port] the build served as Cloudflare Pages will
-// site-kit check [out] [--allow=rule,rule]  every page in a real browser: axe, blocked or broken loads
+// site-kit check [out] [--allow=rule,rule] [--strict]  every page in a real browser: blocked or broken loads fail; what axe finds is said (fails only with --strict)
 import { resolve } from "node:path";
 import { finish } from "../finish.js";
 import { prepare } from "../prepare.js";
@@ -23,7 +23,7 @@ try {
         const { check } = await import("./check.js");
         const allow = args.filter((a) => a.startsWith("--allow=")).flatMap((a) => a.slice(8).split(","));
         const dir = args.find((a) => !a.startsWith("--")) ?? "out";
-        process.exitCode = (await check(resolve(dir), { allow })) ? 0 : 1;
+        process.exitCode = (await check(resolve(dir), { allow, strict: args.includes("--strict") })) ? 0 : 1;
     }
     else {
         console.error("Usage: site-kit prepare | finish [out] | serve [out] [port] | check [out]");

package/dist/content/index.js

@@ -149,7 +149,7 @@ export function defineSite(blocks, o = {}) {
         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?$/ }).meta({ title: "Where its forms send" }).optional(),
+        form: z.url({ protocol: /^https?$/ }).meta({ title: "Where its forms send", "x-ui": "form" }).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({

package/dist/finish.d.ts

@@ -1,3 +1,10 @@
+import type { Analytics } from "./prepare.ts";
 type Log = (line: string) => void;
 export declare function finish(root: string, outDir: string, env?: Record<string, string | undefined>, log?: Log): Promise<void>;
+/**
+ * A page with its visits counted: the analytics script, queued before it loads (its pages, the links
+ * out, and what's marked to count), and each phone link and map link marked: a call or directions
+ * tapped is what a business wants to know came from the site. No cookies: nothing to consent to.
+ */
+export declare function counted(html: string, a: Analytics): string;
 export {};

package/dist/finish.js

@@ -1,7 +1,9 @@
 // What a site's build output needs after the framework is done: a content security policy in every
 // page, naming by hash each inline script and style the page carries (Next.js writes its page data
 // as inline scripts; a static page can't carry a per-request nonce), and Cloudflare Pages' `_headers`
-// and `_redirects` beside the pages.
+// and `_redirects` beside the pages. Where CalOS counts its visits, every published page (not the
+// preview) gets the script that sends them, and its phone and map links are marked, so a tap on one
+// is counted too.
 import { createHash } from "node:crypto";
 import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
@@ -16,6 +18,12 @@ export async function finish(root, outDir, env = process.env, log = console.log)
     const attributes = [];
     for (const file of pages) {
         let html = await readFile(file, "utf8");
+        // 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);
+        // Before the hashing: its own little script is named in the policy like any other.
+        if (prepared.analytics && !isPreview)
+            html = counted(html, prepared.analytics);
         const scripts = new Set();
         const styles = new Set();
         for (const m of html.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)) {
@@ -31,21 +39,18 @@ export async function finish(root, outDir, env = process.env, log = console.log)
             attributes.push(relative(outDir, file));
         const directives = {
             "default-src": ["'self'"],
-            "script-src": ["'self'", ...[...scripts].map((h) => `'${h}'`)],
+            "script-src": ["'self'", ...[...scripts].map((h) => `'${h}'`), ...(prepared.analytics && !isPreview ? [new URL(prepared.analytics.script).origin] : [])],
             "style-src": ["'self'", ...[...styles].map((h) => `'${h}'`)],
             "img-src": ["'self'", "data:"],
             "font-src": ["'self'"],
             // A form sends with fetch as often as by posting the page: its address for both.
-            "connect-src": ["'self'", ...(formOrigin ? [formOrigin] : [])],
+            "connect-src": ["'self'", ...(formOrigin ? [formOrigin] : []), ...(prepared.analytics && !isPreview ? [new URL(prepared.analytics.api).origin] : [])],
             "form-action": ["'self'", ...(formOrigin ? [formOrigin] : [])],
             "base-uri": ["'self'"],
             "object-src": ["'none'"],
         };
         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; 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");
@@ -62,7 +67,24 @@ export async function finish(root, outDir, env = process.env, log = console.log)
     await writeFile(join(outDir, "_headers"), headersFile(editors));
     const redirects = await loadRedirects(site, env.CALOS_REDIRECTS_URL);
     await writeFile(join(outDir, "_redirects"), redirects.file);
-    log(`site-kit: a content security policy in ${pages.length} pages; _headers; _redirects from ${redirects.from}`);
+    log(`site-kit: a content security policy in ${pages.length} pages; _headers; _redirects from ${redirects.from}${prepared.analytics ? "; visits counted" : ""}`);
+}
+/**
+ * A page with its visits counted: the analytics script, queued before it loads (its pages, the links
+ * out, and what's marked to count), and each phone link and map link marked: a call or directions
+ * tapped is what a business wants to know came from the site. No cookies: nothing to consent to.
+ */
+export function counted(html, a) {
+    const init = `window.op=window.op||function(){(window.op.q=window.op.q||[]).push(arguments)};window.op("init",${JSON.stringify({ apiUrl: a.api, clientId: a.client, trackScreenViews: true, trackOutgoingLinks: true, trackAttributes: true })});`;
+    const tags = `<script>${init}</script><script src="${a.script}" defer async></script>`;
+    html = html.replace(/<\/head>/i, () => `${tags}</head>`);
+    return html.replace(/<a\b([^>]*)>/gi, (tag, attrs) => {
+        if (/\sdata-track\s*=/i.test(attrs))
+            return tag;
+        const href = /\shref\s*=\s*["']([^"']*)["']/i.exec(attrs)?.[1] ?? "";
+        const event = /^tel:/i.test(href) ? "phone_tap" : /^https?:\/\/(www\.)?(google\.[a-z.]+\/maps|maps\.google\.[a-z.]+|goo\.gl\/maps|maps\.app\.goo\.gl|maps\.apple\.com)/i.test(href) ? "directions_tap" : null;
+        return event ? `<a${attrs} data-track="${event}">` : tag;
+    });
 }
 const hash = (body) => `sha256-${createHash("sha256").update(body, "utf8").digest("base64")}`;
 async function walk(dir) {

package/dist/prepare.d.ts

@@ -25,7 +25,19 @@ export type Prepared = {
     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;
+    /** Where its visits are counted, when CalOS counts them (Caltho's analytics server): finish puts its script in every page. */
+    analytics?: Analytics;
 };
+/** A site's visits counted: the id its pages send them with, where they're sent, and the script that sends them. */
+export type Analytics = {
+    client: string;
+    api: string;
+    script: string;
+};
+/** What CalOS says of the site's analytics, taken only when it's whole and its addresses are https (or a laptop's). */
+export declare function analyticsIn(body: {
+    analytics?: unknown;
+} | null): Analytics | undefined;
 type Log = (line: string) => void;
 export declare function prepare(root: string, env?: Record<string, string | undefined>, log?: Log): Promise<Prepared>;
 export {};

package/dist/prepare.js

@@ -21,6 +21,15 @@ import sharp from "sharp";
 import { pathToFileURL } from "node:url";
 import { imagesIn, shareImageOf } from "./images.js";
 import { makeCards } from "./share.js";
+/** What CalOS says of the site's analytics, taken only when it's whole and its addresses are https (or a laptop's). */
+export function analyticsIn(body) {
+    const a = body?.analytics;
+    const address = (v) => typeof v === "string" && /^(https:\/\/|http:\/\/(localhost|127\.0\.0\.1)(:\d+)?\/?)/i.test(v) && URL.canParse(v);
+    if (!a || typeof a.client !== "string" || !/^[\w-]{8,64}$/.test(a.client) || !address(a.api) || !address(a.script))
+        return undefined;
+    // As URL writes them: a quote or an angle bracket escaped, so neither can leave the tag it goes in.
+    return { client: a.client, api: new URL(String(a.api)).href.replace(/\/+$/, ""), script: new URL(String(a.script)).href };
+}
 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");
@@ -31,6 +40,7 @@ export async function prepare(root, env = process.env, log = console.log) {
     let raw;
     let from;
     let editors = [];
+    let analytics;
     // A site CalOS has nothing published for yet (just made, its content not brought in) builds from
     // its own until there is: 404 is "nothing published", any other refusal is an error.
     const res = env.CALOS_CONTENT_URL
@@ -42,7 +52,9 @@ export async function prepare(root, env = process.env, log = console.log) {
     const editorsIn = (body) => (Array.isArray(body?.editors) ? body.editors.filter((o) => typeof o === "string" && /^https?:\/\/[a-z0-9.-]+(:\d+)?$/i.test(o)) : []);
     if (res && res.status === 404) {
         // Who may edit it is known before anything's published: its preview can be drawn from the start.
-        editors = editorsIn((await res.json().catch(() => null)));
+        const body = (await res.json().catch(() => null));
+        editors = editorsIn(body);
+        analytics = analyticsIn(body);
         log("site-kit: nothing published in CalOS yet; building from content/site.json");
     }
     if (res && res.status !== 404) {
@@ -51,6 +63,7 @@ export async function prepare(root, env = process.env, log = console.log) {
         const body = (await res.json());
         raw = body.content;
         editors = editorsIn(body);
+        analytics = analyticsIn(body);
         from = "CalOS";
         // Pictures uploaded in CalOS, fetched into the images folder once each.
         for (const [name, url] of Object.entries(body.images ?? {})) {
@@ -89,9 +102,9 @@ export async function prepare(root, env = process.env, log = console.log) {
     const images = await pictures(site, imagesDir, pub, log);
     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 } : {}) };
+    const prepared = { site, images, csp: definition.csp, cards, ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
     await writeFile(join(out, "prepared.json"), JSON.stringify(prepared));
-    log(`site-kit: content from ${from}, ${site.pages.length} pages, ${Object.keys(images).length} images`);
+    log(`site-kit: content from ${from}, ${site.pages.length} pages, ${Object.keys(images).length} images${analytics ? ", visits counted" : ""}`);
     return prepared;
 }
 // ---- pictures ----

package/package.json

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