@siyahi/tools 0.1.3-next.1 → 0.1.4-next.1

package/README.md

@@ -70,7 +70,7 @@ counted (`moved=` against `in-view=`) and listed, but do not fail it. Run `npx p
 ## siyahi-shots
 
 ```sh
-npx siyahi-shots http://localhost:5173/#/page [more URLs] [--out shots] [--gutter 16] [--font Geist] [--chrome '[data-slot="sidebar"]'] [--wait-for h1]
+npx siyahi-shots http://localhost:5173/#/page [more URLs] [--out shots] [--gutter 16] [--font Geist] [--chrome '[data-slot="sidebar"]'] [--wait-for h1] [--report]
 ```
 
 Renders each URL in Chromium at 1920 and 390 pixels wide, light and dark, and
@@ -85,7 +85,12 @@ and the fonts are ready, so content a page renders after loading its data is
 in the shot. A mode fails when nothing matches within 15 seconds; pass a
 selector that only the finished page has, such as `--wait-for '[data-ready]'`. It fails when visible text or a
 card comes closer than `--gutter` pixels to either edge, when the page scrolls
-sideways, or when the body font is not a loaded `--font` family. Content that
+sideways, or when the body font is not a loaded `--font` family. Pass
+`--report` for a static HTML report on `report.css`, which loads no font file
+by design: the body must still name `--font` first, but the viewer's installed
+font or the system fallback may draw it, and the run prints
+`font=Geist (report, system fallback allowed)`. Without `--report`, a page that
+names Geist and loads no font fails. Content that
 scrolls sideways inside its own box is exempt from the gutter, and so is
 anything inside `--chrome` (by default the shadcn sidebar, which sits flush to
 the edge by design). The font default, Geist, is Siyahi's; pass another family

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/tools",
-  "version": "0.1.3-next.1",
+  "version": "0.1.4-next.1",
   "description": "Checks and build helpers for Siyahi pages: a lint plugin, a font preload plugin, a theme contrast check, and screenshot and layout shift scripts.",
   "homepage": "https://siyahi.jatinbansal.com",
   "license": "MIT",

package/shots.mjs

@@ -6,7 +6,7 @@
 // <name>-1.png, <name>-2.png, … of equal height, which together cover it.
 //
 //   siyahi-shots <url>... [--out shots] [--gutter 16] [--font Geist]
-//                [--chrome '[data-slot="sidebar"]'] [--wait-for h1]
+//                [--chrome '[data-slot="sidebar"]'] [--wait-for h1] [--report]
 //
 // Measures only once --wait-for (by default the page's h1) is visible, two
 // animation frames have passed and the fonts are ready: a page that renders
@@ -15,7 +15,10 @@
 //
 // Checks: a gutter of at least --gutter px on both sides of visible text and
 // cards, no sideways document scroll (also with a classic scrollbar taking its
-// width), and --font as the loaded body font. Exempt from the gutter: content
+// width), and --font as the loaded body font. --report is for static HTML
+// reports, which load no font file by design: the body must still name --font
+// first, but the viewer's installed font or the system fallback may draw it.
+// Exempt from the gutter: content
 // inside a box that scrolls sideways, and anything inside --chrome, which by
 // default is only the shadcn sidebar, flush to the edge by design. The font
 // default is Siyahi's; other pages pass their own family.
@@ -55,11 +58,12 @@ const { values, positionals } = parseArgs({
     font: { type: "string", default: "Geist" },
     chrome: { type: "string", default: '[data-slot="sidebar"]' },
     "wait-for": { type: "string", default: "h1" },
+    report: { type: "boolean", default: false },
   },
 });
 if (positionals.length === 0) {
   console.error(
-    "usage: siyahi-shots <url>... [--out shots] [--gutter 16] [--font Geist] [--chrome <selector>] [--wait-for <selector>]",
+    "usage: siyahi-shots <url>... [--out shots] [--gutter 16] [--font Geist] [--chrome <selector>] [--wait-for <selector>] [--report]",
   );
   process.exit(2);
 }
@@ -191,7 +195,7 @@ function problemsOf(p, ready) {
   if (p.overflowWithScrollbar > 0)
     problems.push(`scrolls sideways by ${p.overflowWithScrollbar}px once a scrollbar takes its width`);
   if (!p.font.startsWith(values.font)) problems.push(`body font is ${p.font}, not ${values.font}`);
-  else if (!p.fontLoaded) problems.push(`${p.font} is named but never loaded`);
+  else if (!p.fontLoaded && !values.report) problems.push(`${p.font} is named but never loaded`);
   return problems;
 }
 
@@ -202,9 +206,10 @@ for (const url of positionals) {
     const { probe, ready, height, files } = await shoot(browser, url, mode);
     const problems = problemsOf(probe, ready);
     failed ||= problems.length > 0;
+    const font = values.report && !probe.fontLoaded ? `${probe.font} (report, system fallback allowed)` : probe.font;
     console.log(
       `${problems.length ? "FAIL" : "ok  "} ${mode.name.padEnd(10)} gutter=${probe.gutterLeft}/${probe.gutterRight} ` +
-        `overflow=${probe.overflow}/${probe.overflowWithScrollbar} font=${probe.font} h1=${JSON.stringify(probe.h1)} ` +
+        `overflow=${probe.overflow}/${probe.overflowWithScrollbar} font=${font} h1=${JSON.stringify(probe.h1)} ` +
         `height=${height} ${files.join(" ")}`,
     );
     for (const problem of problems) console.log(`     ${problem}`);