@caltho/site-kit 0.2.10 → 0.3.0

package/dist/cli/check.js

@@ -39,7 +39,12 @@ export async function check(dir, o = {}) {
         for (const [screen, viewport] of [
             ["computer", { width: 1280, height: 800 }],
             ["phone", { width: 390, height: 844 }],
+            // Sizes in between, looked at for what runs past the screen's edge only.
+            ["tablet", { width: 768, height: 1024 }],
+            ["small laptop", { width: 1024, height: 768 }],
+            ["wide screen", { width: 1600, height: 900 }],
         ]) {
+            const fullCheck = screen === "computer" || screen === "phone";
             const context = await browser.newContext({ viewport });
             const page = await context.newPage();
             let where = "";
@@ -54,6 +59,31 @@ export async function check(dir, o = {}) {
             for (const path of paths) {
                 where = path;
                 await page.goto(base + path, { waitUntil: "networkidle" });
+                // Anything drawn past the screen's edge (words out of a card, a row too wide), unless a box
+                // around it clips what it holds on purpose (a slideshow, a scrolling row).
+                const over = await page.evaluate(() => {
+                    const edge = document.documentElement.clientWidth;
+                    const clipped = (el) => {
+                        for (let at = el.parentElement; at && at !== document.body; at = at.parentElement) {
+                            const c = getComputedStyle(at);
+                            if (c.overflowX !== "visible")
+                                return true;
+                        }
+                        return false;
+                    };
+                    return [...document.querySelectorAll("body *")]
+                        .filter((el) => {
+                        const r = el.getBoundingClientRect();
+                        // Across the edge, not wholly off the screen (a field kept out of sight on purpose).
+                        return r.width > 0 && r.height > 0 && ((r.right > edge + 1 && r.left < edge) || (r.left < -1 && r.right > 0)) && !clipped(el);
+                    })
+                        .slice(0, 3)
+                        .map((el) => `${el.tagName.toLowerCase()}${el.className && typeof el.className === "string" ? `.${el.className.trim().split(/\s+/)[0]}` : ""} "${(el.textContent ?? "").trim().slice(0, 40)}"`);
+                });
+                if (over.length)
+                    problems.push(`${path} (${screen}, ${viewport.width}px): runs past the screen's edge: ${over.join(", ")}`);
+                if (!fullCheck)
+                    continue;
                 // Through the browser's devtools channel: the page's own policy (rightly) blocks an injected <script>.
                 await page.evaluate(axeSource);
                 const result = (await page.evaluate(() => 
@@ -75,7 +105,7 @@ export async function check(dir, o = {}) {
     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`);
+        log(`✓ ${dir}: ${paths.length} pages, on a computer and a phone: nothing blocked or broken, nothing past the screen's edge from a phone to a wide screen`);
     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

package/dist/consent.d.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+/** Where the visitor's choice is kept, in their own browser: "yes" or "no". */
+export declare const CONSENT_KEY = "kit-consent";
+/** The setting: whether the site asks, the banner's words and buttons, where it sits, and its design. */
+export declare const consent: z.ZodObject<{
+    on: z.ZodDefault<z.ZodBoolean>;
+    text: z.ZodDefault<z.ZodString>;
+    accept: z.ZodDefault<z.ZodString>;
+    decline: z.ZodDefault<z.ZodString>;
+    policy: z.ZodOptional<z.ZodObject<{
+        label: z.ZodString;
+        href: z.ZodString;
+    }, z.core.$strip>>;
+    place: z.ZodDefault<z.ZodEnum<{
+        top: "top";
+        bottom: "bottom";
+        "bottom-left": "bottom-left";
+        "bottom-right": "bottom-right";
+    }>>;
+    design: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type Consent = z.output<typeof consent>;
+/** Whether the site asks before counting. */
+export declare const asksConsent: (site: {
+    consent?: unknown;
+}) => boolean;
+/**
+ * The banner's script: shows the banner where no choice has been made, keeps the choice when a
+ * button is pressed, tells the page (a `kit:consent` event, "yes" or "no"), and shows the banner
+ * again from anything marked data-kit-consent="change". Without scripting, the banner stays hidden
+ * and nothing is counted.
+ */
+export declare function consentScript(): string;

package/dist/consent.js

@@ -0,0 +1,36 @@
+// A cookie banner as a site's configuration, not its code (the site's `consent` setting). Off by
+// default: a site that counts its visits does it without cookies (the kit's counter, ./finish.ts),
+// which needs no banner. On, the site asks first: a banner in its words and place, in the kit's
+// design or one of the site's components (a built tree with the slots text, accept, decline and
+// policy), and its visits are counted only once a visitor accepts. The choice is kept in the
+// visitor's browser (localStorage, not a cookie), and any element marked data-kit-consent="change"
+// (a footer link) brings the banner back. The privacy policy says which (./policies.ts).
+//
+// Pure: the schema, the scripts finish puts in each page, and whether a site asks.
+import { z } from "zod";
+/** Where the visitor's choice is kept, in their own browser: "yes" or "no". */
+export const CONSENT_KEY = "kit-consent";
+/** The setting: whether the site asks, the banner's words and buttons, where it sits, and its design. */
+export const consent = z
+    .object({
+    on: z.boolean().default(false).meta({ title: "Ask before counting visits" }),
+    text: z.string().trim().min(1).max(600).default("We'd like to count visits to this site, to see what's useful. Is that all right?").meta({ title: "What it says", "x-ui": "markdown" }),
+    accept: z.string().trim().min(1).max(40).default("Accept").meta({ title: "Accept button" }),
+    decline: z.string().trim().min(1).max(40).default("Decline").meta({ title: "Decline button" }),
+    policy: z.object({ label: z.string().trim().min(1).max(60), href: z.string().regex(/^\/[\w\-./#]*$/) }).optional().meta({ title: "Link to the privacy policy" }),
+    place: z.enum(["bottom", "bottom-left", "bottom-right", "top"]).default("bottom").meta({ title: "Where it sits", "x-labels": { bottom: "Along the bottom", "bottom-left": "Bottom left corner", "bottom-right": "Bottom right corner", top: "Along the top" } }),
+    /** One of the site's components drawn as the banner, its slots filled (text, accept, decline, policy); the kit's own design without one. */
+    design: z.string().regex(/^[a-z][a-z0-9-]{0,39}$/).optional().meta({ title: "Design (a component)" }),
+})
+    .meta({ title: "Cookie banner" });
+/** Whether the site asks before counting. */
+export const asksConsent = (site) => !!site.consent?.on;
+/**
+ * The banner's script: shows the banner where no choice has been made, keeps the choice when a
+ * button is pressed, tells the page (a `kit:consent` event, "yes" or "no"), and shows the banner
+ * again from anything marked data-kit-consent="change". Without scripting, the banner stays hidden
+ * and nothing is counted.
+ */
+export function consentScript() {
+    return `(()=>{const K=${JSON.stringify(CONSENT_KEY)};const get=()=>{try{return localStorage.getItem(K)}catch{return null}};const banner=()=>document.querySelector("[data-kit-consent-banner]");const go=()=>{const b=banner();if(b&&!get())b.hidden=false;document.addEventListener("click",(e)=>{const t=e.target.closest&&e.target.closest("[data-kit-consent]");if(!t)return;const v=t.getAttribute("data-kit-consent");if(v==="change"){e.preventDefault();const b=banner();if(b){b.hidden=false;b.querySelector("[data-kit-consent=accept]")?.focus()}return}if(v!=="accept"&&v!=="decline")return;e.preventDefault();const yes=v==="accept"?"yes":"no";try{localStorage.setItem(K,yes)}catch{}const b=banner();if(b)b.hidden=true;dispatchEvent(new CustomEvent("kit:consent",{detail:yes}))})};if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",go,{once:true});else go();})();`;
+}

package/dist/consent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/consent.test.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "bun:test";
+import { mkdir, mkdtemp, readFile, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { renderToStaticMarkup } from "react-dom/server";
+import { consentScript } from "./consent.js";
+import { defineSite } from "./content/index.js";
+import { counted, finish } from "./finish.js";
+import { KitConsent } from "./next/consent.js";
+import { setPrepared } from "./next/data.js";
+import { policy } from "./policies.js";
+import { sections } from "./sections/index.js";
+// A cookie banner as configuration: off unless the site turns it on; on, visits are counted only once accepted.
+const base = { url: "https://acme.example", lang: "en", business: { name: "Acme" }, redirects: [], pages: [{ path: "/", title: "Acme", description: "Acme does things.", blocks: [{ type: "gallery", images: [{ src: "a.jpg", alt: "A" }] }] }] };
+const analytics = { client: "5c2bbecb-9956-4f13-a458-9528dd049210", api: "https://analytics-api.caltho.com", script: "https://analytics.caltho.com/op1.js" };
+describe("consent", () => {
+    it("is off unless turned on, with its words and place defaulted, and its design one of the site's components", () => {
+        const site = defineSite({ ...sections });
+        const off = site.parse(base);
+        expect(off.site?.consent).toBeUndefined();
+        const on = site.parse({ ...base, consent: { on: true } });
+        expect(on.site?.consent).toMatchObject({ on: true, accept: "Accept", decline: "Decline", place: "bottom" });
+        expect(site.parse({ ...base, consent: { on: true, design: "banner" } }).problems?.join(" ")).toMatch(/no component called banner/);
+    });
+    it("starts the counter only once accepted, and puts the banner's script in each page", async () => {
+        const gated = counted("<html><head></head><body></body></html>", analytics, true);
+        expect(gated).not.toContain('<script src=');
+        expect(gated).toContain('localStorage.getItem("kit-consent")==="yes"');
+        expect(gated).toContain('addEventListener("kit:consent"');
+        expect(() => new Function(/<script>([\s\S]*?)<\/script>/.exec(gated)[1])).not.toThrow();
+        expect(() => new Function(consentScript())).not.toThrow();
+        const root = await mkdtemp(join(tmpdir(), "finish-"));
+        await mkdir(join(root, ".site"), { recursive: true });
+        await mkdir(join(root, "out"), { recursive: true });
+        await writeFile(join(root, ".site", "prepared.json"), JSON.stringify({ site: { ...base, consent: { on: true } }, images: {}, csp: {}, analytics }));
+        await writeFile(join(root, "out", "index.html"), "<html><head></head><body></body></html>");
+        await finish(root, join(root, "out"), {}, () => { });
+        const html = await readFile(join(root, "out", "index.html"), "utf8");
+        expect(html).toContain("data-kit-consent-banner");
+        expect(html).toContain("script-src 'self' 'sha256-");
+    });
+    it("draws the banner hidden for the script to show, in the kit's design or the site's component, its buttons marked", () => {
+        const components = [{ key: "banner", name: "Banner", root: { id: "ban0000001", tag: "div", class: "p-4 bg-ink", children: [{ id: "txt0000001", tag: "p", slot: "text", text: "x" }, { id: "yes0000001", tag: "button", slot: "accept", text: "x" }, { id: "no00000001", tag: "button", slot: "decline", text: "x" }] } }];
+        setPrepared({ site: { ...base, components }, images: {}, csp: {} }, false);
+        const kit = renderToStaticMarkup(_jsx(KitConsent, { site: { consent: { on: true, text: "Count **visits**?", accept: "OK", decline: "No thanks", place: "bottom-right", policy: { label: "Privacy", href: "/privacy/" } } } }));
+        expect(kit).toContain('class="kit-consent kit-consent-bottom-right" data-kit-consent-banner="" role="region" aria-label="Cookie choices" hidden=""');
+        expect(kit).toContain("Count <strong>visits</strong>?");
+        expect(kit).toContain('data-kit-consent="accept">OK</button>');
+        expect(kit).toContain('<a class="kit-consent-policy" href="/privacy/">Privacy</a>');
+        const own = renderToStaticMarkup(_jsx(KitConsent, { site: { consent: { on: true, text: "Cookies?", accept: "Yes", decline: "No", place: "bottom", design: "banner" } } }));
+        expect(own).toContain('<p>Cookies?</p><button data-kit-consent="accept" type="button">Yes</button><button data-kit-consent="decline" type="button">No</button>');
+        expect(renderToStaticMarkup(_jsx(KitConsent, { site: {} }))).toBe("");
+    });
+    it("says in the privacy policy that visits are counted only with agreement", () => {
+        const asks = policy({ ...base, countsVisits: true, consent: { on: true } }, "privacy").body;
+        expect(asks).toContain("only if you agree when it asks");
+        expect(asks).not.toContain("doesn't use cookies");
+        expect(policy({ ...base, countsVisits: true }, "privacy").body).toContain("This site doesn't use cookies or advertising trackers.");
+    });
+});