react-cheminfo 0.25.0 → 0.27.0

package/src/clipboard/ui/CopyButton.tsx

@@ -2,6 +2,8 @@ import type { IconName, Intent } from '@blueprintjs/core';
 import { Button } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import {
   DEFAULT_COPY_RESET_AFTER,
   useCopyToClipboard,
@@ -24,12 +26,12 @@ export interface CopyButtonProps {
   label?: string;
   /**
    * Text shown while the copy is being confirmed, when there is a label.
-   * @default 'Copied'
+   * @default the chrome's own word for it, in the language of the page
    */
   copiedLabel?: string;
   /**
    * Text shown while a refused copy is being reported, when there is a label.
-   * @default 'Copy failed'
+   * @default the chrome's own line, in the language of the page
    */
   failedLabel?: string;
   /**
@@ -59,7 +61,7 @@ export interface CopyButtonProps {
   resetAfter?: number;
   /**
    * What the pointer and a screen reader are told.
-   * @default 'Copy to clipboard'
+   * @default the chrome's own line, in the language of the page
    */
   title?: string;
   /**
@@ -79,24 +81,26 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
   const {
     content,
     label,
-    copiedLabel = 'Copied',
-    failedLabel = 'Copy failed',
+    copiedLabel,
+    failedLabel,
     minimal = false,
     small = false,
     icon = 'clipboard',
     disabled = false,
     resetAfter = DEFAULT_COPY_RESET_AFTER,
-    title = 'Copy to clipboard',
+    title,
     className,
   } = props;
+  const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard(resetAfter);
+  const hoverTitle = title ?? t('clipboard.copyToClipboard');
   const look = buttonLook({
     copied,
     failed,
     icon,
     label,
-    copiedLabel,
-    failedLabel,
+    copiedLabel: copiedLabel ?? t('clipboard.copied'),
+    failedLabel: failedLabel ?? t('clipboard.failed'),
   });
 
   return (
@@ -108,8 +112,8 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
       intent={look.intent}
       text={look.text}
       disabled={disabled}
-      title={title}
-      aria-label={label ?? title}
+      title={hoverTitle}
+      aria-label={label ?? hoverTitle}
       onClick={() => {
         void copy(typeof content === 'function' ? content() : content);
       }}

package/src/color/ui/ColorScaleEditor.tsx

@@ -2,6 +2,7 @@ import { Button, HTMLSelect } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { normalizeHexColor } from '../core/hex.ts';
 import type {
   ColorInterpolation,
@@ -22,14 +23,11 @@ const POSITION_DECIMALS = 2;
 // hex colour is shown as black until it is picked again.
 const UNREADABLE_COLOR = '#000000';
 
-/** What each path between two anchors is called. */
-const INTERPOLATION_LABELS: Array<{
-  value: ColorInterpolation;
-  label: string;
-}> = [
-  { value: 'rgb', label: 'RGB — mix the channels' },
-  { value: 'hsv', label: 'HSV — turn the short way' },
-  { value: 'hsv-long', label: 'HSV — turn the long way' },
+/** The paths between two anchors, in the order the picker lists them. */
+const INTERPOLATIONS: readonly ColorInterpolation[] = [
+  'rgb',
+  'hsv',
+  'hsv-long',
 ];
 
 /** What {@link ColorScaleEditor} edits. */
@@ -57,6 +55,7 @@ export interface ColorScaleEditorProps {
  */
 export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
   const { className, value, onChange } = props;
+  const t = useChromeT();
   const stops = value.stops;
 
   function write(next: readonly ColorStop[]): void {
@@ -69,7 +68,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         scale={value}
         height={PREVIEW_HEIGHT}
         samples={PREVIEW_SAMPLES}
-        label="The scale being edited"
+        label={t('color.scaleBeingEdited')}
       />
 
       <div style={ROWS_STYLE}>
@@ -77,7 +76,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
           <div key={`${String(index)}-${stop.color}`} style={ROW_STYLE}>
             <input
               type="color"
-              aria-label={`Colour of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorColour', { index: index + 1 })}
               value={normalizeHexColor(stop.color) ?? UNREADABLE_COLOR}
               style={SWATCH_STYLE}
               onChange={(event) => {
@@ -86,7 +85,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
             />
             <input
               type="range"
-              aria-label={`Position of anchor ${String(index + 1)}`}
+              aria-label={t('color.anchorPosition', { index: index + 1 })}
               min={0}
               max={1}
               step={POSITION_STEP}
@@ -107,7 +106,7 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
               icon="cross"
               variant="minimal"
               size="small"
-              aria-label={`Remove anchor ${String(index + 1)}`}
+              aria-label={t('color.removeAnchor', { index: index + 1 })}
               disabled={stops.length <= MINIMUM_STOPS}
               onClick={() => {
                 write(stops.filter((_, at) => at !== index));
@@ -121,16 +120,19 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
         <Button
           icon="plus"
           size="small"
-          text="Add a colour"
+          text={t('color.addColour')}
           disabled={stops.length >= MAXIMUM_CUSTOM_STOPS}
           onClick={() => {
             write(withAddedStop(value));
           }}
         />
         <HTMLSelect
-          aria-label="Path between two anchors"
+          aria-label={t('color.path')}
           value={value.interpolation}
-          options={INTERPOLATION_LABELS}
+          options={INTERPOLATIONS.map((interpolation) => ({
+            value: interpolation,
+            label: t(`color.interpolation.${interpolation}`),
+          }))}
           onChange={(event) => {
             onChange({
               stops,

package/src/color/ui/ColorScaleEntry.tsx

@@ -1,6 +1,7 @@
 import { MenuDivider, MenuItem } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { resolveColorScale } from '../core/scaleText.ts';
 import type { ColorScaleKind } from '../core/scales.ts';
 import { COLOR_SCALE_KIND_LABELS } from '../core/scales.ts';
@@ -33,14 +34,15 @@ interface ColorScaleEntryProps {
  */
 export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   const { id, label, kind, description, previous, selected, onChange } = props;
+  const t = useChromeT();
   const entry = (
     <MenuItem
       roleStructure="listoption"
       selected={selected}
-      htmlTitle={description}
+      htmlTitle={t.or(`color.scale.${id}.description`, description)}
       text={
         <span style={ITEM_STYLE}>
-          <span>{label}</span>
+          <span>{t.or(`color.scale.${id}.label`, label)}</span>
           <ColorScaleBar scale={resolveColorScale(id).scale} />
         </span>
       }
@@ -52,7 +54,9 @@ export function ColorScaleEntry(props: ColorScaleEntryProps): ReactElement {
   if (previous === kind) return entry;
   return (
     <>
-      <MenuDivider title={COLOR_SCALE_KIND_LABELS[kind]} />
+      <MenuDivider
+        title={t.or(`color.kind.${kind}`, COLOR_SCALE_KIND_LABELS[kind])}
+      />
       {entry}
     </>
   );

package/src/color/ui/ColorScaleLegend.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useId } from 'react';
 
 import { formatTrimmed } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ColorScale } from '../core/interpolate.ts';
 import { evenScale, sampleScale } from '../core/interpolate.ts';
@@ -66,6 +67,7 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
     label = '',
     formatValue = defaultFormatValue,
   } = props;
+  const t = useChromeT();
   const gradientId = useId();
 
   const stops = gradientStops('stops' in scale ? scale : evenScale(scale));
@@ -81,7 +83,11 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
         viewBox={`0 0 ${BAR_WIDTH} ${BAR_HEIGHT}`}
         preserveAspectRatio="none"
         role="img"
-        aria-label={`${label === '' ? 'Colour scale' : label} from ${low} to ${high}`}
+        aria-label={t('color.legendLabel', {
+          what: label === '' ? t('color.colourScale') : label,
+          low,
+          high,
+        })}
       >
         {stops.length === 0 ? null : (
           <defs>

package/src/color/ui/ColorScaleSelect.tsx

@@ -8,6 +8,7 @@ import {
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
 import { COLOR_SCALES } from '../core/scales.ts';
@@ -68,6 +69,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     allowCustom = true,
     testId,
   } = props;
+  const t = useChromeT();
   const [isOpen, setOpen] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const resolved = resolveColorScale(value);
@@ -79,14 +81,14 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           icon="chevron-left"
           variant="minimal"
           size="small"
-          text="Scales"
+          text={t('color.scales')}
           onClick={() => {
             setEditing(false);
           }}
         />
         <Button
           size="small"
-          text="Done"
+          text={t('color.done')}
           onClick={() => {
             setEditing(false);
             setOpen(false);
@@ -119,8 +121,8 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           <MenuDivider />
           <MenuItem
             icon="edit"
-            text="Custom…"
-            label={resolved.id === null ? 'in use' : undefined}
+            text={t('color.customEllipsis')}
+            label={resolved.id === null ? t('color.inUse') : undefined}
             shouldDismissPopover={false}
             onClick={() => {
               setEditing(true);
@@ -150,13 +152,17 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
       >
         <Button
           alignText="start"
-          aria-label={label === '' ? 'Colour scale' : label}
+          aria-label={label === '' ? t('color.colourScale') : label}
           data-testid={testId}
           endIcon="caret-down"
           fill
           text={
             <span style={BUTTON_TEXT_STYLE}>
-              <span>{resolved.label}</span>
+              <span>
+                {resolved.id === null
+                  ? t('color.custom')
+                  : t.or(`color.scale.${resolved.id}.label`, resolved.label)}
+              </span>
               <ColorScaleBar
                 scale={resolved.scale}
                 style={{ width: BUTTON_BAR_WIDTH }}

package/src/confirm/ui/ConfirmButton.tsx

@@ -3,6 +3,8 @@ import { Alert, Button } from '@blueprintjs/core';
 import type { ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 /** Props of {@link ConfirmButton}: a Blueprint button, and what it asks. */
 export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   /**
@@ -14,12 +16,12 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
   onConfirm: () => void;
   /**
    * Text of the button that goes ahead: the verb of what happens, never `OK`.
-   * @default 'Delete'
+   * @default the chrome's own word for it, in the language of the page
    */
   confirmLabel?: string;
   /**
    * Text of the button that backs out.
-   * @default 'Cancel'
+   * @default the chrome's own word for it, in the language of the page
    */
   cancelLabel?: string;
 }
@@ -35,13 +37,9 @@ export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
  * @returns The button, and the alert it opens.
  */
 export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
-  const {
-    question,
-    onConfirm,
-    confirmLabel = 'Delete',
-    cancelLabel = 'Cancel',
-    ...buttonProps
-  } = props;
+  const { question, onConfirm, confirmLabel, cancelLabel, ...buttonProps } =
+    props;
+  const t = useChromeT();
   const [asking, setAsking] = useState(false);
 
   return (
@@ -58,8 +56,8 @@ export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
         icon={alertIcon(buttonProps.icon)}
         canEscapeKeyCancel
         canOutsideClickCancel
-        cancelButtonText={cancelLabel}
-        confirmButtonText={confirmLabel}
+        cancelButtonText={cancelLabel ?? t('confirm.cancel')}
+        confirmButtonText={confirmLabel ?? t('confirm.delete')}
         onCancel={() => {
           setAsking(false);
         }}

package/src/core.ts

@@ -10,6 +10,7 @@ export * from './download/core/index.ts';
 export * from './ecosystem/core/index.ts';
 export * from './error/core/index.ts';
 export * from './format/core/index.ts';
+export * from './i18n/core/index.ts';
 export * from './language/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';

package/src/credits/ui/CreditsList.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { CreditEntry } from '../core/credits.ts';
@@ -32,6 +33,7 @@ export interface CreditsListProps {
  */
 export function CreditsList(props: CreditsListProps): ReactElement {
   const { entries, showLicense = true, className } = props;
+  const t = useChromeT();
 
   return (
     <ul
@@ -53,7 +55,9 @@ export function CreditsList(props: CreditsListProps): ReactElement {
           ) : (
             ' '
           )}
-          <span>{entry.description}</span>
+          <span>
+            {t.or(`credits.${entry.id}.description`, entry.description)}
+          </span>
         </li>
       ))}
     </ul>

package/src/delimited/ui/DelimitedTextDialog.tsx

@@ -1,6 +1,8 @@
 import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 import type { DelimitedTextPanelProps } from './DelimitedTextPanel.tsx';
 import { DelimitedTextPanel } from './DelimitedTextPanel.tsx';
 
@@ -26,27 +28,25 @@ export interface DelimitedTextDialogProps extends DelimitedTextPanelProps {
 export function DelimitedTextDialog(
   props: DelimitedTextDialogProps,
 ): ReactElement {
-  const {
-    isOpen,
-    onClose,
-    title = 'Copy the table',
-    className,
-    ...panel
-  } = props;
+  const { isOpen, onClose, title, className, ...panel } = props;
+  const t = useChromeT();
+  const heading = title ?? t('delimited.copyTable');
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title={title}
+      title={heading}
       icon="th"
       className={className}
       style={DIALOG_STYLE}
     >
       <DialogBody>
-        <DelimitedTextPanel {...panel} label={panel.label ?? title} />
+        <DelimitedTextPanel {...panel} label={panel.label ?? heading} />
       </DialogBody>
-      <DialogFooter actions={<Button text="Close" onClick={onClose} />} />
+      <DialogFooter
+        actions={<Button text={t('delimited.close')} onClick={onClose} />}
+      />
     </Dialog>
   );
 }

package/src/delimited/ui/DelimitedTextPanel.tsx

@@ -6,7 +6,7 @@ import { CopyButton } from '../../clipboard/ui/CopyButton.tsx';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
 import { formatInteger } from '../../format/core/numbers.ts';
-import { pluralize } from '../../format/core/words.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { DelimiterId } from '../core/delimiters.ts';
@@ -82,9 +82,10 @@ export function DelimitedTextPanel(
     fileName = 'table',
     defaultDelimiter = 'tab',
     downloadable = true,
-    label = 'The table, as text',
+    label,
     height = 320,
   } = props;
+  const t = useChromeT();
   const [delimiterId, setDelimiterId] = useState<string>(defaultDelimiter);
 
   const choice = delimiterChoice(delimiterId);
@@ -96,10 +97,16 @@ export function DelimitedTextPanel(
   return (
     <div className={joinClassNames('delimited-text', className)}>
       <Callout intent="primary" compact icon="info-sign">
-        {description ?? defaultDescription(rows.length)}
+        {description ??
+          t(
+            rows.length === 1
+              ? 'delimited.descriptionOne'
+              : 'delimited.descriptionMany',
+            { count: formatInteger(rows.length) },
+          )}
       </Callout>
       <div style={CONTROLS_STYLE}>
-        <span style={LABEL_STYLE}>Separator</span>
+        <span style={LABEL_STYLE}>{t('delimited.separator')}</span>
         <SegmentedControl
           size="small"
           options={DELIMITER_CHOICES.map((option) => ({
@@ -113,7 +120,7 @@ export function DelimitedTextPanel(
         {downloadable ? (
           <Button
             icon="download"
-            text="Save"
+            text={t('delimited.save')}
             size="small"
             onClick={() =>
               downloadText(
@@ -124,13 +131,18 @@ export function DelimitedTextPanel(
             }
           />
         ) : null}
-        <CopyButton content={text} label="Copy" icon="clipboard" small />
+        <CopyButton
+          content={text}
+          label={t('delimited.copy')}
+          icon="clipboard"
+          small
+        />
       </div>
       <textarea
         readOnly
         value={text}
         spellCheck={false}
-        aria-label={label}
+        aria-label={label ?? t('delimited.tableAsText')}
         className={Classes.INPUT}
         style={{ ...TEXT_STYLE, height }}
         onFocus={(event) => event.currentTarget.select()}
@@ -139,11 +151,6 @@ export function DelimitedTextPanel(
   );
 }
 
-function defaultDescription(rowCount: number): string {
-  const rows = `${formatInteger(rowCount)} ${pluralize(rowCount, 'row')}`;
-  return `${rows}, one per line. Copy them, then paste into a spreadsheet.`;
-}
-
 const CONTROLS_STYLE = {
   display: 'flex',
   flexWrap: 'wrap',

package/src/deploy/core/checkDeploy.ts

@@ -1,5 +1,6 @@
 import { readComposeFile } from './composeFile.ts';
 import { readEnvExample } from './envExample.ts';
+import { readPageCache } from './pageCache.ts';
 import type { CheckDeployOptions, DeployFile, DeployProblem } from './types.ts';
 import { DEPLOY_COMPOSE_FILES } from './types.ts';
 
@@ -12,7 +13,9 @@ import { DEPLOY_COMPOSE_FILES } from './types.ts';
  * reports it healthy. So a repository has to hand it a selectable tag on every
  * image we build, an `IMAGE_NAME` that names the package our own workflow
  * publishes, a compose file that parses on a checkout with no `.env` yet, and a
- * health probe to read. Each of those is invisible until a deploy, which is the
+ * health probe to read. It also has to hand the browser a page the browser will
+ * not keep, or the next deploy leaves returning visitors on a blank one. Each
+ * of those is invisible until a deploy, which is the
  * worst moment to discover it — an `env_file` without `required: false` fails
  * before a container starts, and an `IMAGE_NAME` off by a suffix pulls a
  * package that was never published.
@@ -68,6 +71,9 @@ export function findDeployProblems(
     readEnvExample(envExample, expected, problems);
   }
 
+  const dockerfile = byPath.get('Dockerfile');
+  if (dockerfile !== undefined) readPageCache(dockerfile, byPath, problems);
+
   const gitignore = byPath.get('.gitignore');
   if (gitignore === undefined || !/^\s*\/?\.deploy\/?\s*$/m.test(gitignore)) {
     problems.push({

package/src/deploy/core/index.ts

@@ -5,4 +5,5 @@ export type {
   DeployProblem,
   DeployProblemKind,
 } from './types.ts';
+export { NGINX_CONFIG, PAGE_CACHE_CONFIG } from './pageCache.ts';
 export { DEPLOY_COMPOSE_FILES } from './types.ts';

package/src/deploy/core/pageCache.ts

@@ -0,0 +1,120 @@
+import type { DeployProblem } from './types.ts';
+
+/** The page cache policy of a static-web-server site, at the repository root. */
+export const PAGE_CACHE_CONFIG = 'sws.toml';
+
+/** The nginx configuration of a site served by nginx. */
+export const NGINX_CONFIG = 'nginx.conf';
+
+const NO_CACHE =
+  /cache-control[\s:=]+["']?[^"'\n]*(?:no-cache|no-store|max-age=0)/i;
+
+/**
+ * Report a server that lets a browser keep the page itself.
+ *
+ * A page names the hashed bundles of the build that wrote it, so a browser
+ * still holding a copy from an earlier deploy asks the new image for files it
+ * does not have; the request falls through to the page, the browser refuses to
+ * run HTML as a module, and the site comes up blank until the copy expires.
+ * Nothing on the server can see it and no test can either, because a test
+ * always loads a page and its bundles from the same build. So it is read off
+ * the server's configuration instead: static-web-server hands pages out with
+ * `max-age=86400` of its own, and nginx says nothing and lets the browser
+ * guess, so both have to be told. The bundles, named by their content, are the
+ * one thing worth keeping.
+ * @param dockerfile - The Dockerfile, which says what serves the build.
+ * @param byPath - Every file that was read, by repository path.
+ * @param problems - Where each problem found is appended.
+ */
+export function readPageCache(
+  dockerfile: string,
+  byPath: ReadonlyMap<string, string>,
+  problems: DeployProblem[],
+): void {
+  if (dockerfile.includes('static-web-server')) {
+    readStaticWebServer(dockerfile, byPath, problems);
+  } else if (/^FROM\s+\S*nginx/im.test(dockerfile)) {
+    readNginx(byPath, problems);
+  }
+}
+
+function readStaticWebServer(
+  dockerfile: string,
+  byPath: ReadonlyMap<string, string>,
+  problems: DeployProblem[],
+): void {
+  const named = /^\s*ENV\s+SERVER_CONFIG_FILE=(?<path>\S+)/m.exec(dockerfile);
+  const destination = named?.groups?.path;
+  if (destination === undefined) {
+    problems.push({
+      file: 'Dockerfile',
+      line: lineOf(dockerfile, /static-web-server/),
+      kind: 'cacheable-page',
+      message:
+        'static-web-server keeps every page in the browser for a day, so each deploy blanks the site for anyone who came by before it',
+      hint: `COPY ${PAGE_CACHE_CONFIG} /etc/sws.toml and set SERVER_CONFIG_FILE to it`,
+    });
+    return;
+  }
+
+  const copied = new RegExp(
+    String.raw`^\s*COPY\s+(?:--\S+\s+)*${escapeRegExp(PAGE_CACHE_CONFIG)}\s+${escapeRegExp(destination)}\s*$`,
+    'm',
+  );
+  if (!copied.test(dockerfile)) {
+    problems.push({
+      file: 'Dockerfile',
+      line: lineOf(dockerfile, /^\s*ENV\s+SERVER_CONFIG_FILE=/m),
+      kind: 'cacheable-page',
+      message: `SERVER_CONFIG_FILE names ${destination}, which nothing puts there`,
+      hint: `COPY ${PAGE_CACHE_CONFIG} ${destination}`,
+    });
+    return;
+  }
+
+  readNoCacheRule(PAGE_CACHE_CONFIG, byPath, problems);
+}
+
+function readNginx(
+  byPath: ReadonlyMap<string, string>,
+  problems: DeployProblem[],
+): void {
+  readNoCacheRule(NGINX_CONFIG, byPath, problems);
+}
+
+function readNoCacheRule(
+  path: string,
+  byPath: ReadonlyMap<string, string>,
+  problems: DeployProblem[],
+): void {
+  const text = byPath.get(path);
+  if (text === undefined) {
+    problems.push({
+      file: path,
+      line: 0,
+      kind: 'cacheable-page',
+      message: 'the server has no page cache policy to read',
+      hint: `commit ${path} at the repository root, telling the browser to check the page on every visit`,
+    });
+    return;
+  }
+  if (!NO_CACHE.test(text)) {
+    problems.push({
+      file: path,
+      line: 0,
+      kind: 'cacheable-page',
+      message: 'no rule stops a browser from keeping the page between deploys',
+      hint: 'give the page Cache-Control: no-cache, and keep the long life for the hashed bundles alone',
+    });
+  }
+}
+
+function lineOf(text: string, pattern: RegExp): number {
+  const match = pattern.exec(text);
+  if (match === null) return 0;
+  return text.slice(0, match.index).split('\n').length;
+}
+
+function escapeRegExp(value: string): string {
+  return value.replaceAll(/[$()*+.?[\\\]^{|}]/g, String.raw`\$&`);
+}