@tideworthy/tidysites 0.1.6 → 0.1.8

package/README.md

@@ -22,7 +22,9 @@ 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] [--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 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. A page taller than 2400px comes in 1600px bands (`<name>-band-01.jpg`, …), top to bottom, that an image reader can take in one at a time |
+| `tidysites measure <path or url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--full]` | the page as the browser lays it out: every heading, paragraph, button, picture and section box with its computed type (size, line height, weight, family, colour) and box (position, size, padding, margin, background), saved as JSON under `.tidysites/measures/` and printed. Measure the old page and the new one at the same width and style to the numbers |
+| `tidysites redirect [add <old path> <new path> \| rm <old path>]` | the website's redirects: an old address that must keep working after a port goes here; they ship with the next publish |
 | `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 |

package/bin/tidysites.mjs

@@ -7,7 +7,9 @@
  *   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] [--no-bands]   screenshot to .tidysites/shots (none = desktop and mobile); a tall one also in 1600px bands
+ *   shot <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen]   screenshot to .tidysites/shots (none = desktop and mobile); a tall page comes in 1600px bands
+ *   measure <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--full]   the computed type and boxes of a page: the numbers to style to and diff
+ *   redirect [add <old> <new> | rm <old>]      the website's redirects (an old address that must keep working goes here)
  *   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,7 +28,6 @@ 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);
@@ -369,22 +370,80 @@ async function shot(ctx, target = positional[0] ?? '/', opts = {}) {
 	const stamp = new Date().toISOString().replace(/[-:.]/g, '').slice(4, 18);
 	const base = (opts.name ?? (isUrl ? new URL(target).hostname + new URL(target).pathname : target)).replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '') || 'home';
 	const named = Array.isArray(json?.captures) ? json.captures : [];
+	// The pictures come in the order of the captures: a tall page as its bands (top to bottom), a short one whole.
+	const slots = named.filter((c) => !c.error).flatMap((c) => (Array.isArray(c.bands) && c.bands.length ? c.bands.map((b) => ({ view: c.view, band: b.index })) : [{ view: c.view, band: 0 }]));
 	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'}`);
-		const buf = Buffer.from(img.base64, 'base64');
-		writeFileSync(p, buf);
+		const v = slots[i]?.view ?? (view === 'both' ? ['desktop', 'mobile'][i] : view === 'all' ? ['desktop', 'mobile', 'tablet', 'wide'][i] : view.split(',')[i] ?? view);
+		const band = slots[i]?.band ? `-band-${String(slots[i].band).padStart(2, '0')}` : '';
+		const p = join(outDir, `${base}-${v}-${stamp}${band}.${img.mimeType.includes('png') ? 'png' : 'jpg'}`);
+		writeFileSync(p, Buffer.from(img.base64, 'base64'));
 		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.');
 }
 
+/** The computed type and boxes of a page, old or new, at one or several widths: the numbers a port styles to. */
+async function measure(ctx) {
+	const target = positional[0] ?? '/';
+	const isUrl = /^https?:\/\//.test(target);
+	const picked = ['desktop', 'mobile', 'tablet', 'wide'].filter((v) => flags[v]);
+	const view = flags.all ? 'all' : picked.length ? picked.join(',') : 'desktop';
+	const args = { site_id: ctx.cfg.site, view, ...(isUrl ? { url: target } : { path: target, site: flags.live ? 'live' : 'preview' }) };
+	const { json } = await tool(ctx.cfg, 'measure_website', args);
+	if (!json?.views) fail('No measurements came back.');
+	const outDir = join(ctx.dir, META, 'measures');
+	mkdirSync(outDir, { recursive: true });
+	const stamp = new Date().toISOString().replace(/[-:.]/g, '').slice(4, 18);
+	const base = (isUrl ? new URL(target).hostname + new URL(target).pathname : target).replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '') || 'home';
+	for (const v of json.views) {
+		if (v.error) { say(`${v.view}: ${v.error}`); continue; }
+		const file = join(outDir, `${base}-${v.view}-${stamp}.json`);
+		writeFileSync(file, JSON.stringify(v, null, '\t'));
+		say(`\n${v.view} (${v.width}px wide, page ${v.page_height}px tall; fonts: ${v.fonts.join(', ')})  →  ${relative(process.cwd(), file)}`);
+		const kinds = flags.kind ? String(flags.kind).split(',') : ['box', 'text', 'button', 'image'];
+		const items = v.items.filter((it) => kinds.includes(it.kind)).filter((it) => it.kind !== 'text' || /^h[1-6]$/.test(it.tag) || flags.all || flags.text || it.font?.size >= 16 || /^(p|li|a)$/.test(it.tag));
+		const shown = flags.full ? items : items.slice(0, 120);
+		for (const it of shown) {
+			const where = `y${String(it.y).padStart(5)} x${String(it.x).padStart(4)} ${String(it.width).padStart(4)}×${String(it.height).padEnd(4)}`;
+			if (it.kind === 'box') say(`  ${where} ▭ ${it.selector}  pad ${it.padding.join('/')}  bg ${it.background}${it.text ? `  "${it.text}"` : ''}`);
+			else if (it.kind === 'image') say(`  ${where} ▣ ${it.selector}  ${it.natural?.width}×${it.natural?.height} natural${it.radius && it.radius !== '0px' ? `  radius ${it.radius}` : ''}  ${it.text ? `"${it.text}"` : it.src?.split('/').pop()}`);
+			else {
+				const f = it.font;
+				const type = `${f.size}px/${f.line_height ?? 'auto'} w${f.weight} ${f.family}${f.letter_spacing !== 'normal' ? ` ls ${f.letter_spacing}` : ''}${f.transform !== 'none' ? ` ${f.transform}` : ''} ${f.color}`;
+				say(`  ${where} ${it.kind === 'button' ? '▶' : it.tag.padEnd(2)} ${type}${it.kind === 'button' ? `  pad ${it.padding.join('/')} bg ${it.background} r ${it.radius}` : ''}  "${it.text}"`);
+			}
+		}
+		if (items.length > shown.length) say(`  … ${items.length - shown.length} more in the file (--full prints all)`);
+	}
+}
+
+/** The website's redirects: list them, add one, remove one. They ship with the next publish. */
+async function redirect(ctx) {
+	const sub = positional[0];
+	if (sub === 'add') {
+		const [, from, to] = positional;
+		if (!from || !to) fail('Usage: tidysites redirect add <old path> <new path or url>');
+		const { json } = await tool(ctx.cfg, 'add_website_redirect', { site_id: ctx.cfg.site, source: from, destination: to });
+		say(json ? `${from} → ${to}` : 'Added.');
+		return;
+	}
+	if (sub === 'rm' || sub === 'remove') {
+		const from = positional[1];
+		if (!from) fail('Usage: tidysites redirect rm <old path>');
+		const { json: list } = await tool(ctx.cfg, 'list_website_redirects', { site_id: ctx.cfg.site });
+		const rows = list?.redirects ?? list?.items ?? [];
+		const hit = rows.find((r) => (r.source ?? r.from) === from || (r.source ?? r.from) === from.replace(/\/$/, '') || (r.source ?? r.from) === `${from}/`);
+		if (!hit) fail(`No redirect from ${from}.`);
+		await tool(ctx.cfg, 'remove_website_redirect', { site_id: ctx.cfg.site, redirect_id: hit.id });
+		say(`Removed ${from}.`);
+		return;
+	}
+	const { json } = await tool(ctx.cfg, 'list_website_redirects', { site_id: ctx.cfg.site });
+	const rows = json?.redirects ?? json?.items ?? [];
+	if (!rows.length) { say('No redirects.'); return; }
+	for (const r of rows) say(`${(r.source ?? r.from ?? '').padEnd(44)} → ${r.destination ?? r.to ?? ''}${r.status && r.status !== 301 ? `  (${r.status})` : ''}`);
+}
+
 async function pages(ctx) {
 	const { json } = await tool(ctx.cfg, 'list_website_pages', { site_id: ctx.cfg.site });
 	const list = json?.pages ?? json?.items ?? [];
@@ -554,6 +613,11 @@ async function main() {
 			const type = positional[0];
 			return shot(config(), `/_tidy/gallery${type ? `#${type}` : ''}`, { view: 'desktop', name: type ? `gallery-${type}` : 'gallery', firstScreen: Boolean(type) });
 		}
+		case 'measure':
+			return measure(config());
+		case 'redirect':
+		case 'redirects':
+			return redirect(config());
 		case 'pages':
 			return pages(config());
 		case 'page':

package/lib/fetch.mjs

@@ -56,6 +56,19 @@ export function outline(html, base) {
 	if (t) out.title = text(t[1]);
 	const d = html.match(/<meta[^>]+name=["']description["'][^>]*content=["']([^"']*)["']/i) || html.match(/<meta[^>]+content=["']([^"']*)["'][^>]*name=["']description["']/i);
 	if (d) out.description = decode(d[1]).trim();
+	// The rest of the page's SEO, so a port carries it over: canonical, robots, share tags, the icon, the structured data types.
+	const meta = (attr, name) => { const m = html.match(new RegExp(`<meta[^>]+${attr}=["']${name}["'][^>]*content=["']([^"']*)["']`, 'i')) || html.match(new RegExp(`<meta[^>]+content=["']([^"']*)["'][^>]*${attr}=["']${name}["']`, 'i')); return m ? decode(m[1]).trim() : null; };
+	const link = (rel) => { const m = html.match(new RegExp(`<link[^>]+rel=["'][^"']*\\b${rel}\\b[^"']*["'][^>]*href=["']([^"']+)["']`, 'i')) || html.match(new RegExp(`<link[^>]+href=["']([^"']+)["'][^>]*rel=["'][^"']*\\b${rel}\\b[^"']*["']`, 'i')); return m ? abs(base, m[1]) : null; };
+	out.seo = {
+		canonical: link('canonical'),
+		robots: meta('name', 'robots'),
+		og_title: meta('property', 'og:title'), og_description: meta('property', 'og:description'), og_image: meta('property', 'og:image') ? abs(base, meta('property', 'og:image')) : null, og_type: meta('property', 'og:type'),
+		twitter_card: meta('name', 'twitter:card'),
+		favicon: link('icon') || link('shortcut icon') || abs(base, '/favicon.ico'),
+		apple_touch_icon: link('apple-touch-icon'),
+		schema_types: Array.from(html.matchAll(/<script[^>]+type=["']application\/ld\+json["'][^>]*>([\s\S]*?)<\/script>/gi)).flatMap((m) => { try { const j = JSON.parse(m[1]); const list = Array.isArray(j) ? j : j['@graph'] ? j['@graph'] : [j]; return list.map((x) => x['@type']).filter(Boolean).flat(); } catch { return []; } }),
+		lang: (html.match(/<html[^>]+lang=["']([^"']+)["']/i) || [])[1] ?? null
+	};
 	for (const m of html.matchAll(/<(h[1-4])\b[^>]*>([\s\S]*?)<\/\1>/gi)) {
 		const s = text(m[2]);
 		if (s) out.headings.push({ level: Number(m[1][1]), text: s });
@@ -130,6 +143,10 @@ export function outlineText(o) {
 	lines.push(`URL: ${o.url}`);
 	if (o.title) lines.push(`Title: ${o.title}`);
 	if (o.description) lines.push(`Description: ${o.description}`);
+	if (o.seo) {
+		lines.push('', 'SEO (carry these over: meta_title, meta_description, canonical, share image, schema; the icon onto the Business record):');
+		for (const [k, v] of Object.entries(o.seo)) if (v && (!Array.isArray(v) || v.length)) lines.push(`  ${k}: ${Array.isArray(v) ? v.join(', ') : v}`);
+	}
 	if (o.nav.length) {
 		lines.push('', 'Navigation:');
 		for (const n of o.nav) lines.push(`  ${n.label}  →  ${n.href}`);

package/package.json

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

package/lib/bands.mjs

@@ -1,78 +0,0 @@
-/**
- * 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 };
-}