react-cheminfo 0.34.0 → 0.35.0

package/lib/periodic/ui/ElementCell.js

@@ -7,7 +7,7 @@ import { useChromeT } from "../../i18n/ui/useT.js";
  * @returns The cell.
  */
 export function ElementCell(props) {
-    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', writesDetail = detail !== '', isSelected = false, isIncluded = true, onHover, } = props;
+    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', isSelected = false, isIncluded = true, onHover, } = props;
     const t = useChromeT();
     const [isHovered, setIsHovered] = useState(false);
     return (_jsxs("button", { type: "button", className: className, "data-testid": `element-${symbol}`, "data-symbol": symbol, title: detail === '' ? name : `${name} · ${detail}`, "aria-label": t('periodic.cellLabel', {
@@ -41,7 +41,7 @@ export function ElementCell(props) {
             filter: isHovered ? 'brightness(1.08)' : undefined,
         }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: {
                     ...symbolStyle,
-                    fontSize: symbolFontSize(symbol, writesDetail),
+                    fontSize: symbolFontSize(symbol),
                 }, children: symbol }), detail === '' ? null : (_jsx("span", { style: { ...detailStyle, fontSize: detailFontSize(detail) }, children: detail }))] }));
 }
 /**
@@ -51,12 +51,10 @@ export function ElementCell(props) {
  * ones whose second letter is an `m` — which are written a tenth smaller
  * rather than run into the edges of their cell.
  * @param symbol - The chemical symbol.
- * @param writesDetail - Whether the table writes a third line under it.
  * @returns A CSS length.
  */
-function symbolFontSize(symbol, writesDetail) {
-    const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
-    return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+function symbolFontSize(symbol) {
+    return fitted(symbolWidthInEm(symbol), SYMBOL_CQW, '0.5rem');
 }
 /**
  * The size the third line takes so the whole of it is written.
@@ -121,60 +119,66 @@ function detailWidthInEm(detail) {
 const TABULAR_EM = 0.6;
 /** The size the symbol is written at wherever it fits, as a share of the table. */
 const SYMBOL_CQW = '2.4cqw';
-/** The same, in a table that writes nothing under the symbol. */
-const SYMBOL_ALONE_CQW = '2.8cqw';
 /**
  * The tallest the third line is ever written, as a share of the table.
  *
- * Close to three quarters of the symbol: the symbol is how a cell is found,
- * but the value is what the table is being read for, and a value half the size
- * of the symbol is the one thing on the cell a class cannot make out.
+ * Close to two thirds of the symbol: the symbol is how a cell is found, but
+ * the value is what the table is being read for, and a value half the size of
+ * the symbol is the one thing on the cell a class cannot make out.
  */
-const DETAIL_CQW = '1.75cqw';
+const DETAIL_CQW = '1.6cqw';
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * sit at the centre of the cell rather than near it — a bottom band wider than
+ * the top one by a third lifted every symbol in the table two pixels.
+ */
+const EDGE_BAND = '1.8cqw';
 /** How wide one column is, as a share of the table's width. */
 const CELL_CQW = '4.85cqw';
 /** What the border and the padding of a cell take off that width. */
 const CELL_CHROME = '4px';
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
 const cellStyle = {
-    alignItems: 'center',
     border: '1px solid rgb(255 255 255 / 0.55)',
     borderRadius: 3,
     cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
+    display: 'grid',
     font: 'inherit',
-    justifyContent: 'center',
+    gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+    justifyItems: 'center',
     minWidth: 0,
     overflow: 'hidden',
     padding: '1px',
-    // The corner the atomic number is pinned into.
-    position: 'relative',
     transition: 'opacity 120ms ease, filter 120ms ease',
 };
-/**
- * The atomic number sits out of the flow, in the corner.
- *
- * In the flow it rode on top of a stack the cell centres, so it moved down
- * whenever what is written under the symbol was written smaller — the numbers
- * of a row then sat at as many heights as the row had word lengths. Out of it,
- * the number is in the same corner of every cell, and the symbol is centred in
- * the cell rather than in what is left of it.
- */
 const numberStyle = {
+    alignSelf: 'start',
     fontSize: 'max(0.33rem, 1.1cqw)',
     fontVariantNumeric: 'tabular-nums',
-    left: 'max(1px, 0.14cqw)',
+    justifySelf: 'start',
     lineHeight: 1,
     opacity: 0.8,
-    position: 'absolute',
-    top: 'max(1px, 0.14cqw)',
 };
 const symbolStyle = {
+    alignSelf: 'center',
     fontWeight: 700,
     letterSpacing: '-0.02em',
     lineHeight: 1.02,
 };
 const detailStyle = {
+    alignSelf: 'center',
     fontVariantNumeric: 'tabular-nums',
     lineHeight: 1,
     maxWidth: '100%',

package/lib/periodic/ui/ElementCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"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"}

package/lib/periodic/ui/PeriodicTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA+ErE"}
+{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA6ErE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -14,7 +14,6 @@ import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js"
 export function PeriodicTable(props) {
     const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, isIncluded, inset, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
     const t = useChromeT();
-    const writesDetail = detailOf !== undefined;
     const gridRef = useRef(null);
     const cameFromKeyRef = useRef(false);
     const offset = headers ? 1 : 0;
@@ -36,7 +35,7 @@ export function PeriodicTable(props) {
         cameFromKeyRef.current = true;
         onSelect(next.symbol);
     }
-    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers, writesDetail), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), writesDetail: writesDetail, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
+    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
 }
 /**
  * Where what the caller writes in the empty block is placed.
@@ -47,8 +46,9 @@ function insetStyle(offset) {
     return {
         alignItems: 'center',
         display: 'flex',
-        // Narrower than the block so the writing never touches the cells beside it.
-        padding: '0 1cqw',
+        // A column of air on each side, so the writing reads as sitting in the
+        // block rather than as running into the cells beside it.
+        padding: '0 2.4cqw',
         gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
         gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
         // A share of the table, with a floor, exactly as a cell sizes its symbol:
@@ -75,13 +75,13 @@ const MIN_WIDTH = 280;
 /**
  * How tall one row of elements is, as a share of the table's width.
  *
- * A column is about 5.4% of that width, so a cell is a seventh taller than it
- * is wide — the proportion of a wall chart, and the room the three lines of a
- * cell need to be written at a size a class can read.
+ * A column is about 5.2% of that width, so a cell is a third taller than it is
+ * wide — the proportion of a wall chart, and the room the three bands of a
+ * cell need to be read from the back of a room. It is the same height in every
+ * table: a cell keeps the band it writes a value in whether or not that table
+ * writes one.
  */
-const ROW_HEIGHT = '6.1cqw';
-/** The same, in a table that writes nothing under the symbol. */
-const ROW_HEIGHT_ALONE = '4.9cqw';
+const ROW_HEIGHT = '6.8cqw';
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = 'max(6px, 1.1cqw)';
 const rootStyle = {
@@ -104,14 +104,11 @@ const baseGridStyle = {
  * The grid the cells are placed on.
  * @param headers - Whether a leading column and row hold the period and group
  * numbers.
- * @param writesDetail - Whether a cell writes a third line, which is what a
- * row is tall enough for.
  * @returns The style of the grid.
  */
-function gridStyle(headers, writesDetail) {
-    const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
+function gridStyle(headers) {
     // The eighth row is the gap the inner-transition series are lifted out into.
-    const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+    const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
     if (!headers) {
         return {
             ...baseGridStyle,

package/lib/periodic/ui/PeriodicTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/about/core/about.ts

@@ -10,7 +10,7 @@ import { providers } from './providers.ts';
 
 /**
  * What a site says about itself: the one page a visitor opens to find out what
- * the tool is, what it stands on, and who to tell when it breaks.
+ * the tool is, who provides it, and what it stands on.
  *
  * Every field is content, never markup. A site writes this record and the page
  * is drawn from it, which is what keeps fourteen About pages in one order and
@@ -53,35 +53,12 @@ export interface AboutContent {
    * @default undefined
    */
   providedBy?: readonly ProviderId[];
-  /**
-   * Licence the site itself is published under.
-   * @default 'MIT'
-   */
-  license?: string;
-  /**
-   * Where the sources live.
-   * @default the repository of the ECOSYSTEM_SITES record
-   */
-  repository?: string;
-  /**
-   * Whether a visitor can open that repository. A site naming a repository of
-   * its own says so here too, since the family's record then describes another
-   * one.
-   * @default the `publicRepository` of the ECOSYSTEM_SITES record
-   */
-  publicRepository?: boolean;
   /**
    * Which build is running, from `react-cheminfo/build-info` — never written
    * by hand, which is what keeps it true after the next release.
    * @default undefined — the site's build does not publish one
    */
   build?: BuildInfo;
-  /**
-   * Where a problem is reported: an address a visitor can actually open, so a
-   * site whose sources are private names one of its own or says nothing.
-   * @default the repository's /issues, and none at all when it is private
-   */
-  issues?: string;
 }
 
 /** One person who made a site. */
@@ -114,14 +91,8 @@ export interface ResolvedAbout {
   people: readonly AboutPerson[];
   /** The institutions providing the site, empty when the site names none. */
   providedBy: ProviderEntry[];
-  license: string;
-  repository: string;
-  /** Whether a visitor can open the repository, and so whether it is named. */
-  publicRepository: boolean;
   /** Which build is running, or `undefined` when the site does not say. */
   build: BuildInfo | undefined;
-  /** Where a problem is reported, or `undefined` when there is nowhere open. */
-  issues: string | undefined;
 }
 
 /**
@@ -137,10 +108,6 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     typeof content.siteId === 'string'
       ? siteById(content.siteId)
       : content.siteId;
-  const repository = content.repository ?? site.repository;
-  const publicRepository =
-    content.publicRepository ?? site.publicRepository ?? false;
-
   return {
     site,
     what: content.what,
@@ -150,17 +117,7 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     cite: content.cite ?? [],
     people: content.people ?? [],
     providedBy: providers(content.providedBy ?? []),
-    license: content.license ?? DEFAULT_LICENSE,
-    repository,
-    publicRepository,
     build: content.build,
-    // A tracker behind a private repository answers 404 to every visitor, so
-    // a site that names none of its own asks for a report nowhere.
-    issues:
-      content.issues ??
-      (publicRepository
-        ? `${withoutTrailingSlash(repository)}/issues`
-        : undefined),
   };
 }
 
@@ -222,16 +179,9 @@ export function aboutProblems(content: AboutContent): string[] {
   return problems;
 }
 
-/** What a site is published under unless it says otherwise. */
-const DEFAULT_LICENSE = 'MIT';
-
 const WHAT_LIMIT = 160;
 const CAN_MIN = 3;
 const CAN_MAX = 6;
 const CAN_LINE_LIMIT = 90;
 const PARAGRAPH_MAX = 2;
 const PARAGRAPH_LIMIT = 400;
-
-function withoutTrailingSlash(url: string): string {
-  return url.endsWith('/') ? url.slice(0, -1) : url;
-}

package/src/about/core/index.ts

@@ -1,4 +1,3 @@
-export { githubSources } from './repository.ts';
 export type { AboutContent, AboutPerson, ResolvedAbout } from './about.ts';
 export { aboutProblems, resolveAbout } from './about.ts';
 export type { ProviderEntry, ProviderId } from './providers.ts';

package/src/about/ui/AboutBuild.tsx

@@ -1,15 +1,12 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 
 import type { BuildInfo } from '../../build/core/buildInfo.ts';
 import { formatBuiltAt, shortCommit } from '../../build/core/buildInfo.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
-import { githubSources } from '../core/repository.ts';
 
 export interface AboutBuildProps {
   /** What the build published about itself. */
   build: BuildInfo;
-  /** Where the sources live, which is what the version and commit link into. */
-  repository: string;
 }
 
 /**
@@ -17,23 +14,21 @@ export interface AboutBuildProps {
  *
  * A report of something going wrong is worth answering only when we know what
  * was running. The version itself is in the hero, where a reader is asked to
- * quote it from; this line carries the rest, and the commit links into the
- * repository, so the change that caused a problem is one click from the page
- * that shows it.
+ * quote it from; this line carries the rest, so a report can name the exact
+ * build the problem was seen on.
  * @param props - See {@link AboutBuildProps}.
  * @returns The line.
  */
 export function AboutBuild(props: AboutBuildProps): ReactElement {
-  const { build, repository } = props;
+  const { build } = props;
   const t = useChromeT();
-  const sources = githubSources(repository);
   const builtAt = formatBuiltAt(build.builtAt);
   if (build.commit === undefined) {
     return <p style={PARAGRAPH_STYLE}>{t('about.built', { builtAt })}</p>;
   }
 
-  // The commit is a link inside a sentence whose word order is the
-  // translator's, so the message is split where it names it.
+  // The commit sits inside a sentence whose word order is the translator's,
+  // so the message names where it goes and is split there.
   const [before = '', after = ''] = t('about.builtFromCommit', {
     builtAt,
   }).split('{commit}');
@@ -41,36 +36,14 @@ export function AboutBuild(props: AboutBuildProps): ReactElement {
   return (
     <p style={PARAGRAPH_STYLE}>
       {before}
-      <Reference
-        href={
-          sources === undefined
-            ? undefined
-            : `${sources}/commit/${build.commit}`
-        }
-      >
-        {shortCommit(build.commit)}
-      </Reference>
+      <code style={CODE_STYLE}>{shortCommit(build.commit)}</code>
       {after}
     </p>
   );
 }
 
-function Reference(props: {
-  href: string | undefined;
-  children: ReactNode;
-}): ReactElement {
-  const { href, children } = props;
-  if (href === undefined) return <code style={CODE_STYLE}>{children}</code>;
-
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={LINK_STYLE}>
-      <code style={CODE_STYLE}>{children}</code>
-    </a>
-  );
-}
-
 const PARAGRAPH_STYLE = {
-  margin: '8px 0 0',
+  margin: 0,
   color: 'var(--text-muted)',
   fontSize: 13,
 } as const satisfies CSSProperties;
@@ -79,5 +52,3 @@ const CODE_STYLE = {
   fontFamily: 'var(--font-mono, ui-monospace, monospace)',
   fontSize: 13,
 } as const satisfies CSSProperties;
-
-const LINK_STYLE = { color: 'var(--accent)' } as const satisfies CSSProperties;

package/src/about/ui/AboutPage.tsx

@@ -47,8 +47,8 @@ export interface AboutPageProps {
 
 /**
  * The About page of a site of the family: what the tool is, who provides it,
- * what a visitor can do with it, what it is built on, how to cite it, and where
- * to report a problem — always in that order.
+ * what a visitor can do with it, what it is built on, and how to cite it —
+ * always in that order.
  *
  * The order is the point. A reader who has read one of our About pages knows
  * where the credits are on the other thirteen, and a site that writes its own
@@ -83,11 +83,7 @@ export function AboutPage(props: AboutPageProps): ReactElement {
           </p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
-        <AboutVersion
-          build={about.build}
-          repository={about.repository}
-          publicRepository={about.publicRepository}
-        />
+        <AboutVersion build={about.build} />
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
@@ -133,68 +129,18 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       )}
 
       {/*
-        A repository nobody outside can open is named nowhere: a licence a
-        reader cannot act on and a link that answers 404 say less than silence.
-        The version stays in the hero, unlinked, so a report still names a build.
+        The build the reader has open, last and under no heading: it is what a
+        report has to name, not something anybody came to the page to read.
       */}
-      {!about.publicRepository ? null : (
-        <AboutSection
-          title={t('about.licenceAndSource')}
-          className="about-licence"
-        >
-          <p style={FIRST_PARAGRAPH_STYLE}>
-            {around(
-              t('about.licence', { license: about.license }),
-              'sources',
-              <ExternalLink key="sources" href={about.repository} />,
-            )}
-          </p>
-          {about.build === undefined ? null : (
-            <AboutBuild build={about.build} repository={about.repository} />
-          )}
-        </AboutSection>
-      )}
-
-      {/*
-        Asking for a report is worth nothing without somewhere to send it, and
-        the tracker of a private repository answers 404 to every visitor.
-      */}
-      {about.issues === undefined ? null : (
-        <AboutSection title={t('about.foundAProblem')} className="about-issues">
-          <p style={FIRST_PARAGRAPH_STYLE}>
-            {around(
-              t('about.reportIt'),
-              'tracker',
-              <ExternalLink key="tracker" href={about.issues} />,
-            )}
-          </p>
+      {about.build === undefined ? null : (
+        <AboutSection className="about-build">
+          <AboutBuild build={about.build} />
         </AboutSection>
       )}
     </div>
   );
 }
 
-// A link sits inside a sentence whose word order is the translator's, so the
-// message names where it goes with a placeholder and is split there.
-function around(
-  message: string,
-  placeholder: string,
-  link: ReactNode,
-): ReactNode[] {
-  const [before = '', after = ''] = message.split(`{${placeholder}}`);
-  return [before, link, after];
-}
-
-function ExternalLink(props: { href: string }): ReactElement {
-  const { href } = props;
-
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={LINK_STYLE}>
-      {href.replace(/^https?:\/\//, '')}
-    </a>
-  );
-}
-
 const PAGE_STYLE = {
   display: 'flex',
   flexDirection: 'column',
@@ -250,5 +196,3 @@ const FIRST_PARAGRAPH_STYLE = {
 const PARAGRAPH_STYLE = {
   margin: '8px 0 0',
 } as const satisfies CSSProperties;
-
-const LINK_STYLE = { color: 'var(--accent)' } as const satisfies CSSProperties;

package/src/about/ui/AboutVersion.tsx

@@ -14,17 +14,11 @@ import {
   buildLabel,
   buildStamp,
   buildSummary,
-  releasedVersion,
 } from '../../build/core/buildInfo.ts';
-import { githubSources } from '../core/repository.ts';
 
 export interface AboutVersionProps {
   /** What the build published about itself, or `undefined` when it published none. */
   build: BuildInfo | undefined;
-  /** Where the sources live, which is what the badge links into. */
-  repository: string;
-  /** Whether a visitor can open that repository, and so whether it is linked. */
-  publicRepository: boolean;
 }
 
 /**
@@ -34,53 +28,24 @@ export interface AboutVersionProps {
  * @returns The badge, or `null` when the build says nothing worth showing.
  */
 export function AboutVersion(props: AboutVersionProps): ReactElement | null {
-  const { build, repository, publicRepository } = props;
+  const { build } = props;
   const label = buildLabel(build);
   if (build === undefined || label === undefined) return null;
-  const href = publicRepository ? addressOf(build, repository) : undefined;
-  const summary = buildSummary(build);
   // The instant belongs on the badge rather than in its hover: a version
   // nobody can date says nothing about how old the page they read is.
   const badge = `${label} · ${buildStamp(build.builtAt)}`;
-  if (href === undefined) {
-    return (
-      <span style={BADGE_STYLE} className="about-version" title={summary}>
-        {badge}
-      </span>
-    );
-  }
 
   return (
-    <a
+    <span
+      style={BADGE_STYLE}
       className="about-version"
-      href={href}
-      title={summary}
-      target="_blank"
-      rel="noopener noreferrer"
-      style={LINK_BADGE_STYLE}
+      title={buildSummary(build)}
     >
       {badge}
-    </a>
+    </span>
   );
 }
 
-/**
- * What the badge opens: the release it names, or the commit it was built from.
- * @param build - What the build published about itself.
- * @param repository - Where the sources live.
- * @returns The address, or `undefined` when nothing inside the repository can
- * be addressed.
- */
-function addressOf(build: BuildInfo, repository: string): string | undefined {
-  const sources = githubSources(repository);
-  if (sources === undefined) return undefined;
-  const version = releasedVersion(build);
-  if (version !== undefined) return `${sources}/releases/tag/v${version}`;
-  return build.commit === undefined
-    ? undefined
-    : `${sources}/commit/${build.commit}`;
-}
-
 const BADGE_STYLE = {
   flex: '0 0 auto',
   fontFamily: 'var(--font-mono, ui-monospace, monospace)',
@@ -88,8 +53,3 @@ const BADGE_STYLE = {
   color: 'var(--text-muted)',
   whiteSpace: 'nowrap',
 } as const satisfies CSSProperties;
-
-const LINK_BADGE_STYLE = {
-  ...BADGE_STYLE,
-  color: 'var(--accent)',
-} as const satisfies CSSProperties;