@mark1russell7/site-pages 0.1.6 → 0.1.8

package/README.md

@@ -50,6 +50,42 @@ A failure of GitHub or npm does not stop the build. Without a token, or when Git
 
 Give the token in the environment variable `GITHUB_TOKEN`, not with `--token`. Other processes can see a command line.
 
+## The check of a site
+
+The command `site-pages check` opens the pages of a site in a headless Chromium. It examines each page at phone and desktop widths, in the light and the dark scheme.
+
+```sh
+site-pages check --out dist --repo owner/name --pages /,/releases/ --probe site-probe.js --shots shots
+site-pages check --url https://owner.github.io/name/
+```
+
+A view fails for each of these problems:
+
+- The page is wider than the screen, or an element goes past the right edge. A container that scrolls or clips is not a problem.
+- A text area hides a part of its text.
+- The page shows no text.
+- The page writes a console error, or a script throws an exception.
+- A request to the site fails, or gets a status of 400 or more.
+- A check of the probe fails, or the probe makes no check.
+
+The probe is a JavaScript file. Its code is the body of an async function. These functions are available:
+
+| Function | Operation |
+| --- | --- |
+| `check(name, ok, detail)` | Records a check. A false `ok` fails it, and `detail` tells why. |
+| `$(selector)`, `$$(selector)` | Find one element, or all of them |
+| `click(element)`, `type(element, text)` | Click an element, or write text into a field with an `input` event |
+| `wait(ms)`, `until(fn, ms)` | Wait, or wait until `fn` gives a true value |
+
+```js
+type("#editor", "Utilize the cache.");
+check("the linter finds a word", await until(() => $$(".finding").length === 1), $$(".finding").length);
+```
+
+The check runs the probe on the first page, in the first scheme, at each width. The folder of `--shots` gets a screenshot of each view, `report.json` and `summary.md`. The exit code is 0 when each view passes, 1 when a view fails, and 2 for an incorrect command line.
+
+The check finds a browser in this order: `--browser`, `$SITE_CHECK_BROWSER`, the newest Chromium of Playwright, and then Chrome or Edge. The folder `src/check` imports only Node.js. Thus Node.js 22.18 or later can start `src/check/main.ts` with no install. The workflow `reusable-pages.yml` of the template uses it this way.
+
 ## The releases
 
 The command merges four sources by version:
@@ -233,6 +269,31 @@ The variables are `--sp-bg`, `--sp-surface`, `--sp-sunken`, `--sp-fg`, `--sp-fg-
 
 The pages operate at a width of 390 px without horizontal scroll. The timeline scrolls in its own box. The keyboard operates all controls: the arrow keys, Home and End move between the versions, and Enter or Space selects one. Without JavaScript, the releases page shows all versions.
 
+## A cue on a box that scrolls
+
+A wide code block or table on a narrow screen scrolls sideways. Without a cue, its text looks cut. The file `scroll-cue.css` of the package gives a cue:
+
+- A shade shows at each edge that has more content. At an end of the box, the shade of that end goes.
+- The cue uses only CSS. It needs no JavaScript.
+
+Import the file in the site, and give the class `scroll-cue` to the box:
+
+```ts
+import "@mark1russell7/site-pages/scroll-cue.css";
+```
+
+```html
+<pre class="scroll-cue">pnpm add @mark1russell7/site-pages</pre>
+```
+
+The class sets `overflow-x: auto` and the background color of the box. Set `--scroll-cue-bg` to the background color of the box, and `--scroll-cue-shade` to the color of the shade:
+
+```css
+.code {
+  --scroll-cue-bg: var(--code-bg);
+}
+```
+
 ## A GitHub Pages workflow
 
 This workflow builds the site, adds the two pages, and deploys. It also starts every 3 hours, so the status page stays current without a push. A scheduled run builds the newest commit of `main` that passed CI.

package/build/{build-Dr35nErd.js → build-CD2wc7Yl.js}

@@ -2424,6 +2424,11 @@ Options:
   --site-name <name>    The name of the site in the header (default: the repository name)
   --data-only           Write only the JSON data, not the pages
   -h, --help            Show this help
+
+Usage: site-pages check (--out <dir> | --url <url>) [options]
+
+Opens the pages of the site in a headless Chromium at phone and desktop widths. Start
+"site-pages check --help" for its options.
 `;
 /**
 * This function reads the command line into the options of `build`.
@@ -2529,4 +2534,4 @@ async function runCli(argv, io) {
 }
 export { npmPublishTimes as $, RoadmapParseError as A, statusClassOf as B, longDate as C, inlineMarkdown as D, escapeHtml as E, parseRoadmap as F, readReleases as G, ReleaseDataError as H, plainText as I, headCommit as J, globFiles as K, readStatusBoard as L, buildStatusBoard as M, linksOf as N, safeUrl as O, markdownTables as P, NPM_REGISTRY as Q, roadmapItems as R, dayRange as S, utcDay as T, mergeReleases as U, DEFAULT_CHANGELOGS as V, readChangelogs as W, isShallow as X, headingDate as Y, originRepository as Z, oldestFirst as _, runCli as a, firstSentence as at, BASE_CSS as b, openGroups as c, releaseBodyEntries as ct, slugOf as d, parseVersion as dt, GITHUB_API as et, statusLead as f, versionOfTag as ft, laneCenter as g, renderReleasesPage as h, parseBuildArgs as i, githubReleases as it, STATUS_CLASSES as j, OPEN_CLASSES as k, renderStatusPage as l, compareVersions as lt, releasesLead as m, UsageError as n, checkStateOf as nt, STATUS_SCRIPT as o, headingAnchor as ot, RELEASES_SCRIPT as p, gitTagDates as q, build as r, githubOpenWork as rt, classCounts as s, parseChangelog as st, HELP as t, GITHUB_GRAPHQL as tt, sectionsOf as u, kindOf as ut, releaseSummary as v, shortDate as w, pageShell as x, timelineLayout as y, splitRow as z };
 
-//# sourceMappingURL=build-Dr35nErd.js.map
+//# sourceMappingURL=build-CD2wc7Yl.js.map