@tideworthy/tidysites 0.1.5 → 0.1.7

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]` | 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 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]   screenshot to .tidysites/shots (none = desktop and mobile); a tall page comes 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
@@ -368,9 +368,12 @@ 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 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));
 	});

package/package.json

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