@tideworthy/tidysites 0.1.11 → 0.1.13

package/README.md

@@ -24,12 +24,13 @@ nothing else; it lives in `.tidysites/key`, which is kept out of git.
 | `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. `--menu` opens every navigation menu (burgers, `<details>`, hover dropdowns) before the capture; `--open a,b` clicks those selectors and `--hover a,b` shows the submenus under them, for a popup, a tab or one dropdown |
 | `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. The same `--menu`, `--open` and `--hover` as `shot`, so a dropdown's open type is measured |
+| `tidysites speed <path or url> [--mobile\|--desktop] [--live] [--against <url>]` | PageSpeed Insights (Google's Lighthouse) for a page of the preview or live site, or any address: scores, lab and field metrics, the largest-paint element and the opportunities with the files they name, saved under `.tidysites/speed/`. `--against <url>` tests the old page in the same call for a side-by-side. Run it on the live site before calling a build done; what the content cannot fix goes in the report |
 | `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 |
 | `tidysites gallery [type]` | a screenshot of every section type and layout in this website's theme, or the first screen of one type |
-| `tidysites fetch <url> [--out dir]` | a page of the site being ported: cleaned HTML, its outline (headings, navigation, images, phones, fonts, the stylesheet's own variables and colours) and its stylesheets, inline style blocks included |
+| `tidysites fetch <url> [--out dir]` | a page of the site being ported: cleaned HTML, its outline (headings, navigation, images, phones, fonts, an Adobe Fonts kit and the families it serves, the stylesheet's own variables and colours) and its stylesheets, inline style blocks included |
 | `tidysites rm <collection>/<slug> ...` | delete entry files with their sidecars (`services/*` for every entry of a collection); `push --prune` then removes them from the website |
 | `tidysites publish --yes` | the live site becomes a copy of the preview site. A website that is live on the client's own domain is never published from the command line: the website refuses and says so; the person publishes it (Publish now on the Website tab), or an assistant with them does through the connector after they confirm |
 

package/bin/tidysites.mjs

@@ -9,6 +9,7 @@
  *   push [--prune] [--force] [--dry]          write the changes back, then pull
  *   shot <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--first-screen] [--menu] [--open sel,..] [--hover sel,..]   screenshot to .tidysites/shots (none = desktop and mobile); a tall page comes in 1600px bands; --menu opens every navigation menu first
  *   measure <path|url> [--mobile] [--tablet] [--desktop] [--wide] [--all] [--full] [--menu] [--open sel,..] [--hover sel,..]   the computed type and boxes of a page: the numbers to style to and diff
+ *   speed <path|url> [--mobile|--desktop] [--live] [--against <url>]   PageSpeed Insights for a page, and the old page beside it
  *   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
@@ -434,6 +435,39 @@ async function measure(ctx) {
 	}
 }
 
+/** PageSpeed Insights for a page of the website (or any address), and the old page beside it with --against. */
+async function speed(ctx) {
+	const target = positional[0] ?? '/';
+	const isUrl = /^https?:\/\//.test(target);
+	const strategy = flags.mobile && !flags.desktop ? 'mobile' : flags.desktop && !flags.mobile ? 'desktop' : 'both';
+	const args = { site_id: ctx.cfg.site, strategy, ...(isUrl ? { url: target } : { path: target, site: flags.live ? 'live' : 'preview' }), ...(flags.against ? { compare_url: String(flags.against) } : {}) };
+	say(`Testing${flags.against ? ' both pages' : ''} with PageSpeed Insights (a minute or two)...`);
+	const { json } = await tool(ctx.cfg, 'speed_website', args);
+	if (!json?.page) fail('No result came back.');
+	const outDir = join(ctx.dir, META, 'speed');
+	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';
+	const file = join(outDir, `${base}-${stamp}.json`);
+	writeFileSync(file, JSON.stringify(json, null, '\t'));
+	const n = (v, unit = '') => (v === null || v === undefined ? '—' : `${v}${unit}`);
+	const line = (r) => r.error ? `    ${r.strategy.padEnd(8)} ${r.error}` : `    ${r.strategy.padEnd(8)} perf ${n(r.scores.performance)}  a11y ${n(r.scores.accessibility)}  best ${n(r.scores.best_practices)}  seo ${n(r.scores.seo)}   LCP ${n(r.lab.lcp_ms, 'ms')}  FCP ${n(r.lab.fcp_ms, 'ms')}  TBT ${n(r.lab.tbt_ms, 'ms')}  CLS ${n(r.lab.cls)}  ${r.lab.total_bytes ? Math.round(r.lab.total_bytes / 1024) + ' KB' : '—'} in ${n(r.lab.requests)} requests${r.field ? `   field: LCP ${n(r.field.lcp_ms, 'ms')} INP ${n(r.field.inp_ms, 'ms')} CLS ${n(r.field.cls)} (${r.field.overall})` : ''}`;
+	say(`\n${json.target}`);
+	for (const r of json.page) say(line(r));
+	if (json.compare) { say(`\n${json.compare_url}  (the page it is compared with)`); for (const r of json.compare) say(line(r)); }
+	for (const r of json.page) {
+		if (r.error) continue;
+		say(`\n  ${r.strategy}: what to change`);
+		if (r.lcp_element) say(`    largest paint: ${r.lcp_element.replace(/\s+/g, ' ').slice(0, 160)}`);
+		for (const o of r.opportunities.slice(0, 8)) {
+			say(`    • ${o.title}${o.savings_ms ? ` (${o.savings_ms} ms)` : ''}${o.savings_kb ? ` (${o.savings_kb} KB)` : ''}`);
+			for (const it of o.items.slice(0, 4)) say(`        ${it}`);
+		}
+		for (const d of r.diagnostics.slice(0, 8)) say(`    · ${d}`);
+	}
+	say(`\nSaved to ${relative(process.cwd(), file)}. Full reports: ${json.page.filter((r) => !r.error).map((r) => r.report_url).join('  ')}`);
+}
+
 /** The website's redirects: list them, add one, remove one. They ship with the next publish. */
 async function redirect(ctx) {
 	const sub = positional[0];
@@ -535,6 +569,8 @@ async function fetchCmd(ctx) {
 				const css = await r.text();
 				cssTexts.push(css);
 				writeFileSync(join(outDir, `${base}-${cssTexts.length}.css`), css);
+				// The kit's CSS names the families it serves, which the page's HTML does not.
+				if (/use\.typekit\.net/i.test(href)) o.adobe_families = [...new Set([...o.adobe_families ?? [], ...[...css.matchAll(/font-family\s*:\s*["']([^"';]+)["']/gi)].map((m) => m[1])])];
 			}
 		} catch {
 			/* a stylesheet that will not download is not the port's problem */
@@ -642,6 +678,8 @@ async function main() {
 		}
 		case 'measure':
 			return measure(config());
+		case 'speed':
+			return speed(config());
 		case 'redirect':
 		case 'redirects':
 			return redirect(config());

package/lib/fetch.mjs

@@ -105,6 +105,9 @@ export function outline(html, base) {
 		out.fonts.push(...fams);
 	}
 	out.fonts = [...new Set(out.fonts)];
+	// Adobe Fonts (Typekit) kits belong to the old site or its builder, so a port cannot load them; the families are named from the kit's CSS by the fetch command.
+	out.adobe_kits = [...new Set([...html.matchAll(/use\.typekit\.net\/([a-z0-9]+)\.css/gi)].map((m) => m[1].toLowerCase()))];
+	out.adobe_families = [];
 	return out;
 }
 
@@ -162,6 +165,10 @@ export function outlineText(o) {
 	if (o.phones.length) lines.push('', `Phones: ${o.phones.join(', ')}`);
 	if (o.emails.length) lines.push(`Emails: ${o.emails.join(', ')}`);
 	if (o.fonts.length) lines.push(`Google fonts: ${o.fonts.join(', ')}`);
+	if (o.adobe_kits?.length) {
+		lines.push(`Adobe Fonts kit: ${o.adobe_kits.join(', ')} (the old site's own kit; this site cannot load it)${o.adobe_families?.length ? ` serving ${o.adobe_families.join(', ')}` : ''}.`);
+		lines.push('  Each family from it needs a Google Fonts stand-in on the Business record that matches its shape and weights as closely as possible, and the report must name the original and the stand-in. A font is never left unset.');
+	}
 	if (o.css) {
 		const vars = Object.entries(o.css.variables ?? {});
 		if (vars.length) { lines.push('', 'Stylesheet variables (the site\'s own names; trust these over the counts below):'); for (const [k, v] of vars.slice(0, 40)) lines.push(`  --${k}: ${v}`); }

package/package.json

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