@tideworthy/tidysites 0.1.7 → 0.1.8

package/README.md

@@ -23,6 +23,8 @@ nothing else; it lives in `.tidysites/key`, which is kept out of git.
 | `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. 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

@@ -8,6 +8,8 @@
  *   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); 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
@@ -380,6 +382,68 @@ async function shot(ctx, target = positional[0] ?? '/', opts = {}) {
 	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 ?? [];
@@ -549,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.7",
+  "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": {