@tideworthy/tidysites 0.1.5 → 0.1.6

package/README.md

@@ -22,7 +22,7 @@ nothing else; it lives in `.tidysites/key`, which is kept out of git.
 | `tidysites status` | what changed here since the pull |
 | `tidysites validate` | every file against the content model, with the file and the field in each message |
 | `tidysites push [--prune] [--force] [--dry] [--only pages]` | validate, then write the created and updated entries back (with `--prune`, delete the entries whose files are gone), then pull |
-| `tidysites shot <path or url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen] [--live]` | a screenshot of a page of the preview site, the live site, or any address, saved under `.tidysites/shots/`; none of the width flags means desktop and mobile; a port compares all four |
+| `tidysites shot <path or url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen] [--live] [--no-bands]` | a screenshot of a page of the preview site, the live site, or any address, saved under `.tidysites/shots/`; none of the width flags means desktop and mobile; a port compares all four. A picture taller than 2400px is also written in 1600px bands (`<name>-band-01.jpg`, …) that an image reader can take in one at a time |
 | `tidysites pages` | every address the website renders |
 | `tidysites page <path> [--html]` | the rendered page, section by section, with the key each section carries |
 | `tidysites schema [type or collection]` | the section types and layouts, or one type's or collection's fields |
@@ -62,6 +62,10 @@ Images: an image field, a hero's image or a Columns image slot takes
 push fetches the file into the website's library. An image already in the
 library keeps the value the pull gave it.
 
+A picture in custom HTML is written as a plain `<img src="{{ s.image.url }}" alt="{{ s.image.alt }}">`: a stored picture gets its resized variants (`srcset`, and a `sizes` hint when none is written) on the way out, so a phone downloads a phone-sized file; write your own `sizes` when the picture is narrower than half the screen on a laptop, and your own `srcset` to take over entirely. Pictures in the first section load at once and the first of them asks to go first; pictures below load when they are needed, unless the markup says `loading="eager"`.
+
+Every form carries a hidden trap field a scraper fills and a person never sees. A Forms record or a Request form section can add Cloudflare Turnstile through its **Spam protection** field; it is off unless chosen, and when chosen its script loads only as the form comes into view or is touched.
+
 References: a record names another by its id (what the pull shows), or by
 `"$ref:<slug>"` for one created in the same push.
 

package/bin/tidysites.mjs

@@ -7,7 +7,7 @@
  *   status                                    what changed here since the pull
  *   validate                                  check the files against the content model
  *   push [--prune] [--force] [--dry]          write the changes back, then pull
- *   shot <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen]   screenshot to .tidysites/shots (none = desktop and mobile)
+ *   shot <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen] [--no-bands]   screenshot to .tidysites/shots (none = desktop and mobile); a tall one also in 1600px bands
  *   pages                                     every address the website renders
  *   page <path> [--html]                      the rendered page, section by section
  *   schema [name]                             section types and layouts, or one type's or collection's fields
@@ -26,6 +26,7 @@ import { callTool, ApiError } from '../lib/api.mjs';
 import { diffEntries, entryToFiles, filesToEntry, FILE_NAME, menuItems, menuTree, pushDocument, sameEntry, snapshotOf, SIDECARS } from '../lib/folder.mjs';
 import { validateAll, indexSchema } from '../lib/validate.mjs';
 import { cleanHtml, cssSummary, fetchPage, outline, outlineText } from '../lib/fetch.mjs';
+import { writeBands } from '../lib/bands.mjs';
 
 const META = '.tidysites';
 const argv = process.argv.slice(2);
@@ -371,8 +372,15 @@ async function shot(ctx, target = positional[0] ?? '/', opts = {}) {
 	images.forEach((img, i) => {
 		const v = named[i]?.view ?? (view === 'both' ? ['desktop', 'mobile'][i] : view === 'all' ? ['desktop', 'mobile', 'tablet', 'wide'][i] : view.split(',')[i] ?? view);
 		const p = join(outDir, `${base}-${v}-${stamp}.${img.mimeType.includes('png') ? 'png' : 'jpg'}`);
-		writeFileSync(p, Buffer.from(img.base64, 'base64'));
+		const buf = Buffer.from(img.base64, 'base64');
+		writeFileSync(p, buf);
 		say(relative(process.cwd(), p));
+		// A tall full-page picture is also written in bands an image reader can take in one at a time.
+		if (!flags['no-bands']) {
+			const bands = writeBands(p, buf);
+			for (const b of bands.paths) say(`  ${relative(process.cwd(), b)}`);
+			if (bands.reason) say(`  (${bands.reason})`);
+		}
 	});
 	if (!images.length) say(json ? JSON.stringify(json).slice(0, 500) : 'No image came back.');
 }

package/lib/bands.mjs

@@ -0,0 +1,78 @@
+/**
+ * A full-page screenshot of a long page is too tall for an assistant's image
+ * reader to take in. Cut it into bands of a readable height, written beside
+ * the original as <name>-band-01.jpg, -02, ... so a compare can go band by
+ * band. The slicing uses a tool the machine already has (sips on macOS,
+ * ImageMagick where installed); without one the original stands alone and
+ * the caller is told.
+ */
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+
+export const BAND_HEIGHT = 1600;
+/** A picture no taller than this is readable whole and is not cut. */
+export const BAND_WHOLE = 2400;
+
+/** Width and height of a JPEG or PNG from its header, or null when it is neither. */
+export function imageSize(buf) {
+	if (buf.length > 24 && buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47) {
+		return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+	}
+	if (buf.length > 4 && buf[0] === 0xff && buf[1] === 0xd8) {
+		let i = 2;
+		while (i + 9 < buf.length) {
+			if (buf[i] !== 0xff) { i++; continue; }
+			const marker = buf[i + 1];
+			if (marker === 0xd8 || marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7)) { i += 2; continue; }
+			const len = buf.readUInt16BE(i + 2);
+			// SOF0..SOF15 except DHT (C4), JPG (C8), DAC (CC) carry the frame size.
+			if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+				return { height: buf.readUInt16BE(i + 5), width: buf.readUInt16BE(i + 7) };
+			}
+			i += 2 + len;
+		}
+	}
+	return null;
+}
+
+/** The band files a picture of this height needs: [{ y, height }] from the top. */
+export function bandPlan(height, band = BAND_HEIGHT, whole = BAND_WHOLE) {
+	if (height <= whole) return [];
+	const out = [];
+	for (let y = 0; y < height; y += band) out.push({ y, height: Math.min(band, height - y) });
+	return out;
+}
+
+function slicer() {
+	if (process.platform === 'darwin' && existsSync('/usr/bin/sips')) return 'sips';
+	for (const bin of ['magick', 'convert']) {
+		const r = spawnSync(bin, ['-version'], { stdio: 'ignore' });
+		if (r.status === 0) return bin;
+	}
+	return null;
+}
+
+/**
+ * Write the bands of a saved picture beside it. Returns the band paths, or
+ * an empty list with `reason` when the picture needs no cutting or the
+ * machine has no tool to cut it with.
+ */
+export function writeBands(file, buf) {
+	const size = imageSize(buf);
+	if (!size) return { paths: [], reason: 'not a JPEG or PNG' };
+	const plan = bandPlan(size.height);
+	if (!plan.length) return { paths: [], reason: null };
+	const tool = slicer();
+	if (!tool) return { paths: [], reason: `the picture is ${size.height}px tall; no sips or ImageMagick here to cut it into bands` };
+	const stem = file.replace(/\.(jpe?g|png)$/i, '');
+	const ext = /\.png$/i.test(file) ? 'png' : 'jpg';
+	const paths = [];
+	plan.forEach((b, i) => {
+		const out = `${stem}-band-${String(i + 1).padStart(2, '0')}.${ext}`;
+		const r = tool === 'sips'
+			? spawnSync('/usr/bin/sips', ['-c', String(b.height), String(size.width), '--cropOffset', String(b.y), '0', file, '--out', out], { stdio: 'ignore' })
+			: spawnSync(tool, [file, '-crop', `${size.width}x${b.height}+0+${b.y}`, '+repage', out], { stdio: 'ignore' });
+		if (r.status === 0 && existsSync(out)) paths.push(out);
+	});
+	return { paths, reason: null };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tideworthy/tidysites",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Pull a Tidysites website to files, edit, validate against its content model, push it back, screenshot the result.",
   "type": "module",
   "bin": {