react-cheminfo 0.58.0 → 0.60.0

package/src/about/ui/AboutPage.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { buildLabel } from '../../build/core/buildInfo.ts';
 import { CreditsList } from '../../credits/ui/CreditsList.tsx';
 import { Wordmark } from '../../ecosystem/ui/Wordmark.tsx';
 import { SiteMark } from '../../ecosystem/ui/marks.tsx';
@@ -7,10 +8,11 @@ import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { AboutContent } from '../core/about.ts';
 import { resolveAbout } from '../core/about.ts';
 
-import { AboutBuild } from './AboutBuild.tsx';
 import { AboutCitations } from './AboutCitations.tsx';
 import { AboutProvidedBy } from './AboutProvidedBy.tsx';
 import { AboutSection } from './AboutSection.tsx';
+import type { AboutSignInProps } from './AboutSignIn.tsx';
+import { AboutSignIn } from './AboutSignIn.tsx';
 import { AboutVersion } from './AboutVersion.tsx';
 
 export interface AboutPageProps {
@@ -43,6 +45,13 @@ export interface AboutPageProps {
    * @default undefined
    */
   logo?: ReactNode;
+  /**
+   * Where the people who run the site sign in, drawn under the build badge in
+   * the corner of the hero. A site passes it while nobody is signed in, and
+   * leaves it out once somebody is: the account is then in the bar.
+   * @default undefined — the site has no account to sign in to
+   */
+  signIn?: AboutSignInProps;
 }
 
 /**
@@ -58,10 +67,12 @@ export interface AboutPageProps {
  * @throws {Error} When the record names a site or a credit that does not exist.
  */
 export function AboutPage(props: AboutPageProps): ReactElement {
-  const { content, className, children, logo, mark } = props;
+  const { content, className, children, logo, mark, signIn } = props;
   const t = useChromeT();
   const about = resolveAbout(content);
   const site = about.site;
+  const hasCorner =
+    buildLabel(about.build) !== undefined || signIn !== undefined;
 
   return (
     <div
@@ -83,7 +94,12 @@ export function AboutPage(props: AboutPageProps): ReactElement {
           </p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
-        <AboutVersion build={about.build} />
+        {hasCorner ? (
+          <div className="about-corner" style={CORNER_STYLE}>
+            <AboutVersion build={about.build} />
+            {signIn === undefined ? null : <AboutSignIn {...signIn} />}
+          </div>
+        ) : null}
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
@@ -127,16 +143,6 @@ export function AboutPage(props: AboutPageProps): ReactElement {
           <AboutCitations works={about.cite} />
         </AboutSection>
       )}
-
-      {/*
-        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.build === undefined ? null : (
-        <AboutSection className="about-build">
-          <AboutBuild build={about.build} />
-        </AboutSection>
-      )}
     </div>
   );
 }
@@ -166,6 +172,14 @@ const HERO_STYLE = {
   lineHeight: 1.55,
 } as const satisfies CSSProperties;
 
+const CORNER_STYLE = {
+  display: 'flex',
+  flex: '0 0 auto',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+  gap: 2,
+} as const satisfies CSSProperties;
+
 const NAME_STYLE = {
   margin: 0,
   fontSize: 26,

package/src/about/ui/AboutSignIn.tsx

@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+
+import { isModifiedClick } from '../../chrome/ui/navItem.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+export interface AboutSignInProps {
+  /**
+   * The address signing in happens at. Writing it keeps the entry a real link,
+   * so a middle click opens a tab.
+   * @default undefined
+   */
+  href?: string;
+  /**
+   * What the site does when the entry is picked — route to that page, or open
+   * a credentials dialog for a site that has no page. A modified click is left
+   * to the browser.
+   * @default undefined
+   */
+  onSignIn?: () => void;
+  /**
+   * What the entry reads, for a site whose accounts are for one kind of person.
+   * @default the chrome's own word for it, in the language of the page
+   */
+  label?: string;
+}
+
+/**
+ * Where the people who run a site sign in: one quiet line under the build
+ * badge, in the corner of the About.
+ *
+ * A visitor has nothing to sign in to, so the bar carries no invitation; the
+ * About is the page the operators already know, and the corner is where they
+ * already look for the build they run.
+ * @param props - See {@link AboutSignInProps}.
+ * @returns The entry.
+ */
+export function AboutSignIn(props: AboutSignInProps): ReactElement {
+  const { href, onSignIn, label } = props;
+  const t = useChromeT();
+  const text = label ?? t('account.signIn');
+
+  if (href === undefined) {
+    return (
+      <button type="button" className="about-sign-in" onClick={onSignIn}>
+        {text}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      className="about-sign-in"
+      href={href}
+      onClick={(event) => {
+        if (onSignIn === undefined || isModifiedClick(event)) return;
+        event.preventDefault();
+        onSignIn();
+      }}
+    >
+      {text}
+    </a>
+  );
+}

package/src/about/ui/AboutVersion.tsx

@@ -4,18 +4,22 @@
  * A report of something going wrong is worth answering only when we know what
  * was running, and that is the one thing an About page cannot say from a
  * hand-written record. It sits at the top of the page rather than at the
- * bottom because it is the one line a reader is asked to quote back.
+ * bottom because it is the one line a reader is asked to quote back, and it is
+ * said once: nothing further down the page repeats it.
  */
 
+import { Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import type { BuildInfo } from '../../build/core/buildInfo.ts';
 import {
   buildLabel,
   buildStamp,
-  buildSummary,
+  releasedVersion,
 } from '../../build/core/buildInfo.ts';
 
+import { AboutBuildDetails } from './AboutBuildDetails.tsx';
+
 export interface AboutVersionProps {
   /** What the build published about itself, or `undefined` when it published none. */
   build: BuildInfo | undefined;
@@ -23,7 +27,8 @@ export interface AboutVersionProps {
 
 /**
  * The build badge: the release a site is serving, or the commit it was built
- * from while it has no release yet, and when it was made.
+ * from while it has no release yet, and when it was made. A release names its
+ * commit and the exact instant in the card its hover opens.
  * @param props - See {@link AboutVersionProps}.
  * @returns The badge, or `null` when the build says nothing worth showing.
  */
@@ -34,15 +39,28 @@ export function AboutVersion(props: AboutVersionProps): ReactElement | null {
   // 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)}`;
+  const version = releasedVersion(build);
+
+  if (version === undefined) {
+    return (
+      <span style={BADGE_STYLE} className="about-version">
+        {badge}
+      </span>
+    );
+  }
 
   return (
-    <span
-      style={BADGE_STYLE}
-      className="about-version"
-      title={buildSummary(build)}
+    <Tooltip
+      content={<AboutBuildDetails build={build} version={version} />}
+      // To the left, so the card never covers the way to sign in under it.
+      placement="left-start"
+      popoverClassName="help-tooltip build-tooltip"
+      hoverOpenDelay={150}
     >
-      {badge}
-    </span>
+      <span style={BADGE_STYLE} className="about-version" tabIndex={0}>
+        {badge}
+      </span>
+    </Tooltip>
   );
 }
 

package/src/about/ui/index.ts

@@ -1,5 +1,3 @@
-export type { AboutBuildProps } from './AboutBuild.tsx';
-export { AboutBuild } from './AboutBuild.tsx';
 export type { AboutVersionProps } from './AboutVersion.tsx';
 export { AboutVersion } from './AboutVersion.tsx';
 export type { AboutCitationsProps } from './AboutCitations.tsx';
@@ -10,3 +8,5 @@ export type { AboutProvidedByProps } from './AboutProvidedBy.tsx';
 export { AboutProvidedBy } from './AboutProvidedBy.tsx';
 export type { AboutSectionProps } from './AboutSection.tsx';
 export { AboutSection } from './AboutSection.tsx';
+export type { AboutSignInProps } from './AboutSignIn.tsx';
+export { AboutSignIn } from './AboutSignIn.tsx';

package/src/chart/ui/ChartTrackingLayer.tsx

@@ -180,9 +180,11 @@ const LAYER_STYLE = {
   pointerEvents: 'none',
 } as const satisfies CSSProperties;
 
+// The slots run along x, so only a sideways finger tracks them: a vertical
+// swipe that starts on the chart still scrolls the page or the card around it.
 const SLIDER_STYLE = {
   pointerEvents: 'auto',
-  touchAction: 'none',
+  touchAction: 'pan-y',
   cursor: 'crosshair',
 } as const satisfies CSSProperties;
 

package/src/chart/ui/useChartSize.ts

@@ -89,6 +89,34 @@ export function nextChartSize(
   return { width: nextWidth, height: nextHeight };
 }
 
+/**
+ * The size an element is laid out at, which no CSS transform changes.
+ *
+ * `getBoundingClientRect` reports the box as painted: inside a popover that
+ * opens by scaling up from 30 %, a chart measured on its first frame is drawn
+ * at 30 % of its width, and stays so, since a transform never resizes the
+ * layout and the observer never fires again. `offsetWidth` is the laid-out
+ * size but rounded to a whole pixel, so the precise rectangle is kept unless a
+ * transform has visibly scaled it.
+ * @param element - The wrapper the chart is drawn in.
+ * @returns Its laid-out width and height.
+ */
+export function layoutSize(element: Element): {
+  width: number;
+  height: number;
+} {
+  const rect = element.getBoundingClientRect();
+  if (!hasOffsetSize(element)) {
+    return { width: rect.width, height: rect.height };
+  }
+  const { offsetWidth, offsetHeight } = element;
+  return {
+    width: Math.abs(rect.width - offsetWidth) < 1 ? rect.width : offsetWidth,
+    height:
+      Math.abs(rect.height - offsetHeight) < 1 ? rect.height : offsetHeight,
+  };
+}
+
 /** What a chart is given before its element has ever been laid out. */
 const NO_SIZE: ChartSize = { width: 0, height: 0 };
 
@@ -101,10 +129,25 @@ function read(
   element: Element,
   setSize: Dispatch<SetStateAction<ChartSize>>,
 ): void {
-  const { width, height } = element.getBoundingClientRect();
+  const { width, height } = layoutSize(element);
   setSize((current) => nextChartSize(current, width, height));
 }
 
+/**
+ * Whether an element has a laid-out size of its own, as an HTML element does
+ * and an SVG one does not. Checked by shape, so it holds outside a browser.
+ * @param element - The element.
+ * @returns True when `offsetWidth` and `offsetHeight` are numbers.
+ */
+function hasOffsetSize(
+  element: Element,
+): element is Element & { offsetWidth: number; offsetHeight: number } {
+  return (
+    typeof (element as Partial<HTMLElement>).offsetWidth === 'number' &&
+    typeof (element as Partial<HTMLElement>).offsetHeight === 'number'
+  );
+}
+
 /**
  * One side of a measurement, as a size rather than as a number.
  * @param value - What the element was measured at.

package/src/chrome/ui/NavEntry.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+
+import { NavLink } from './NavLink.tsx';
+import { NavMenuButton } from './NavMenuButton.tsx';
+import type { NavItem } from './navItem.ts';
+
+/**
+ * One page of the bar: a link, or the menu it opens when the entry folds pages
+ * of its own. A menu stands where its pages would, among them and not among the
+ * utilities, because picking one of them changes what the page shows.
+ * @param props - The entry and the page on show.
+ * @param props.item - The entry.
+ * @param props.activeId - The page on show.
+ * @returns The entry.
+ */
+export function NavEntry(props: {
+  item: NavItem;
+  activeId: string | undefined;
+}): ReactElement {
+  const { item, activeId } = props;
+  if (item.items === undefined) {
+    return <NavLink item={item} active={item.id === activeId} />;
+  }
+
+  return (
+    <NavMenuButton
+      label={menuLabel(item)}
+      icon={typeof item.icon === 'string' ? item.icon : undefined}
+      items={item.items}
+      activeId={activeId}
+      placement="bottom-start"
+    />
+  );
+}
+
+// The trigger names itself to a screen reader, so an entry drawn as a glyph
+// alone says what it opens through its title rather than through its id.
+function menuLabel(item: NavItem): string {
+  if (typeof item.label === 'string') return item.label;
+  return item.title ?? item.id;
+}

package/src/chrome/ui/SiteHeader.tsx

@@ -10,7 +10,7 @@ import { SiteMark } from '../../ecosystem/ui/marks.tsx';
 import { useLanguage } from '../../i18n/ui/useLanguage.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
-import { NavLink } from './NavLink.tsx';
+import { NavEntry } from './NavEntry.tsx';
 import { NavMenuButton } from './NavMenuButton.tsx';
 import type { NavItem } from './navItem.ts';
 import { isModifiedClick } from './navItem.ts';
@@ -42,13 +42,20 @@ export interface SiteHeaderProps {
    */
   activeId?: string;
   /**
-   * The utilities pushed to the right edge — About, Cite, Tools, the language,
-   * sign in; Share has a prop of its own, so it always comes last. They
-   * arrive dressed as bar items, so a plain `nav-link` and a `CiteButton` read
-   * alike beside each other.
+   * The utilities pushed to the right edge — About, Cite, Tools, the language;
+   * Share and the account have props of their own, so they always come last.
+   * They arrive dressed as bar items, so a plain `nav-link` and a `CiteButton`
+   * read alike beside each other.
    * @default undefined
    */
   actions?: ReactNode;
+  /**
+   * Who is signed in, drawn at the extreme right, after Share — usually an
+   * `AccountButton`. A site passes it only while somebody is signed in: signing
+   * in starts on the About (`AboutPage`'s `signIn`), never in the bar.
+   * @default undefined
+   */
+  account?: ReactNode;
   /**
    * The Share entry, which closes the utilities on every site, after the
    * Contact entry. A site passes its own when it wraps the shared `ShareButton`
@@ -133,6 +140,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
     activeId,
     actions,
     share,
+    account,
     contact,
     renderNavItem,
     embedded = false,
@@ -195,6 +203,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
         <span className="spacer" />
         {actions === undefined &&
         share === undefined &&
+        account === undefined &&
         contactForm === '' ? null : (
           <div className="app-header-actions">
             {actions}
@@ -202,6 +211,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
               <ContactButton siteId={site.id} formUrl={contactForm} />
             )}
             {share}
+            {account}
           </div>
         )}
       </div>
@@ -209,42 +219,6 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
   );
 }
 
-/**
- * One page of the bar: a link, or the menu it opens when the entry folds pages
- * of its own. A menu stands where its pages would, among them and not among the
- * utilities, because picking one of them changes what the page shows.
- * @param props - The entry and the page on show.
- * @param props.item - The entry.
- * @param props.activeId - The page on show.
- * @returns The entry.
- */
-function NavEntry(props: {
-  item: NavItem;
-  activeId: string | undefined;
-}): ReactElement {
-  const { item, activeId } = props;
-  if (item.items === undefined) {
-    return <NavLink item={item} active={item.id === activeId} />;
-  }
-
-  return (
-    <NavMenuButton
-      label={menuLabel(item)}
-      icon={typeof item.icon === 'string' ? item.icon : undefined}
-      items={item.items}
-      activeId={activeId}
-      placement="bottom-start"
-    />
-  );
-}
-
-// The trigger names itself to a screen reader, so an entry drawn as a glyph
-// alone says what it opens through its title rather than through its id.
-function menuLabel(item: NavItem): string {
-  if (typeof item.label === 'string') return item.label;
-  return item.title ?? item.id;
-}
-
 /** The two widths the bar's contents run at, as the classes that set them. */
 const INNER_CLASS = {
   page: 'app-header__inner',

package/src/core.ts

@@ -14,6 +14,8 @@ 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 './moleculesSources/core/index.ts';
+export * from './moleculesToken/core/index.ts';
 export * from './number/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';

package/src/ecosystem/core/types.ts

@@ -32,7 +32,8 @@ export type SiteId =
   | 'inorganic'
   | 'powerpoint'
   | 'chembio'
-  | 'wikidata';
+  | 'wikidata'
+  | 'mz';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/core/unlistedSites.ts

@@ -52,4 +52,18 @@ export const UNLISTED_SITES: readonly EcosystemSite[] = [
     // so the link row of the mark takes a lighter blue of the same hue.
     mark: { plate: '#5c4033', accent: '#6b9bf2' },
   },
+  {
+    id: 'mz',
+    name: { lead: 'mz', alt: 'cheminfo', dot: true },
+    host: 'mz.cheminfo.org',
+    tagline: 'Mass spectra, classified by how they were measured.',
+    group: 'spectra',
+    // Ultramarine, the deep blue of a dye whose colour is its spectrum.
+    brand: '#2200c4',
+    // An orange answers it at 5.2:1 on white, for the name.
+    brandAlt: '#c2410c',
+    // The mark takes a brighter orange, so the base peak stands apart from
+    // the ultramarine plate at 16 px.
+    mark: { plate: '#2200c4', accent: '#f97316' },
+  },
 ];

package/src/ecosystem/ui/glyphs.tsx

@@ -530,6 +530,16 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // A mass spectrum: three peaks on a baseline, the tallest, the base peak, in
+  // the answering colour. Every edge falls on a whole pixel at 16 px.
+  mz: (alt) => (
+    <>
+      <rect x="4" y="26" width="24" height="2" fill="#ffffff" />
+      <rect x="6" y="16" width="4" height="10" rx="1" fill="#ffffff" />
+      <rect x="14" y="6" width="4" height="20" rx="1" fill={alt} />
+      <rect x="22" y="12" width="4" height="14" rx="1" fill="#ffffff" />
+    </>
+  ),
   // An infobox: the structure at its top, a ring, and two rows of data under
   // it. The second row carries the answering colour, the blue of a link. Both
   // rows and the gap between them fall on whole pixels at 16 px.

package/src/locales/de.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Bereitgestellt von",
   "about.whatYouCanDo": "Was Sie hier tun können",
   "about.builtOn": "Aufgebaut auf",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Erstellt",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Wie zu zitieren",
   "about.citeWork": "{what} zitieren",
-  "about.built": "Erstellt {builtAt}.",
-  "about.builtFromCommit": "Erstellt {builtAt} aus Commit {commit}.",
   "about.nameList": "{names} und {last}",
   "help.label": "Hilfe",
   "help.learnMore": "Mehr erfahren",
@@ -593,5 +594,37 @@
   "taxonomy.rank.noRank": "ohne Rang",
   "taxonomy.rank.clade": "Klade",
   "taxonomy.rank.cellularRoot": "zelluläre Wurzel",
-  "taxonomy.rank.acellularRoot": "azelluläre Wurzel"
+  "taxonomy.rank.acellularRoot": "azelluläre Wurzel",
+  "moleculesToken.title": "Tokens für molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Geprüft am {when}",
+  "moleculesToken.checkAgain": "Erneut prüfen",
+  "moleculesToken.notChecked": "Noch nicht geprüft: Der Dienst, der in molecules.cheminfo.org schreibt, prüft seine Tokens beim Start.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Quelle",
+  "moleculesToken.column.status": "Status",
+  "moleculesToken.column.details": "Details",
+  "moleculesToken.anySource": "beliebige Quelle",
+  "moleculesToken.verdict.ok": "gültig",
+  "moleculesToken.verdict.otherSource": "einer anderen Quelle",
+  "moleculesToken.verdict.refused": "abgelehnt",
+  "moleculesToken.verdict.unset": "nicht gesetzt",
+  "moleculesToken.verdict.uncheckable": "nicht prüfbar",
+  "moleculesToken.verdict.unanswered": "keine Antwort",
+  "moleculesToken.forSource": "für {source}",
+  "moleculesToken.issued": "ausgestellt am {when}",
+  "moleculesToken.issuedTo": "ausgestellt für {email} am {when}",
+  "moleculesToken.lastUsed": "zuletzt verwendet am {when}",
+  "moleculesToken.neverUsed": "nie verwendet",
+  "moleculesToken.otherSourceDetail": "ausgestellt für {source}: Was er sendet, wird dieser Quelle zugeschrieben",
+  "moleculesToken.refusedDetail": "nie ausgestellt oder widerrufen",
+  "moleculesToken.unsetDetail": "Setzen Sie {variable} in der .env des Servers.",
+  "moleculesToken.uncheckableDetail": "Dieses molecules.cheminfo.org kann noch keine Tokens prüfen.",
+  "moleculesToken.howToChange": "Ein Token wird in der .env des Servers geändert und beim Neustart des Dienstes neu gelesen. molecules.cheminfo.org stellt einen neuen aus mit",
+  "moleculesToken.fix.title": "Setzen Sie ein gültiges Token in {variables}",
+  "moleculesToken.fix.issueOne": "Stellen Sie ein Token auf der Admin-Seite von molecules.cheminfo.org aus:",
+  "moleculesToken.fix.issueMany": "Stellen Sie ein Token pro Quelle auf der Admin-Seite von molecules.cheminfo.org aus:",
+  "moleculesToken.fix.issueOnServer": "Oder auf dem Server von molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Tragen Sie es in die .env des Servers dieser Website ein:",
+  "moleculesToken.fix.envMany": "Tragen Sie sie in die .env des Servers dieser Website ein:",
+  "moleculesToken.fix.restart": "Starten Sie die Dienste neu, da sie die .env nur beim Start lesen:"
 }

package/src/locales/en.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Provided by",
   "about.whatYouCanDo": "What you can do here",
   "about.builtOn": "Built on",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Built",
+  "about.buildCommit": "Commit",
   "about.howToCite": "How to cite",
   "about.citeWork": "Cite {what}",
-  "about.built": "Built {builtAt}.",
-  "about.builtFromCommit": "Built {builtAt} from commit {commit}.",
   "about.nameList": "{names} and {last}",
   "credits.openbabel.description": "reads and writes the chemical file formats, and does the conversion itself.",
   "credits.openchemlib.description": "reads and writes structures, and computes their properties in the browser.",
@@ -593,5 +594,37 @@
   "taxonomy.rank.noRank": "no rank",
   "taxonomy.rank.clade": "clade",
   "taxonomy.rank.cellularRoot": "cellular root",
-  "taxonomy.rank.acellularRoot": "acellular root"
+  "taxonomy.rank.acellularRoot": "acellular root",
+  "moleculesToken.title": "Tokens for molecules.cheminfo.org",
+  "moleculesToken.checkedAt": "Checked {when}",
+  "moleculesToken.checkAgain": "Check again",
+  "moleculesToken.notChecked": "Not checked yet: the service that writes to molecules.cheminfo.org checks its tokens when it starts.",
+  "moleculesToken.column.variable": "Variable",
+  "moleculesToken.column.source": "Source",
+  "moleculesToken.column.status": "Status",
+  "moleculesToken.column.details": "Details",
+  "moleculesToken.anySource": "any source",
+  "moleculesToken.verdict.ok": "valid",
+  "moleculesToken.verdict.otherSource": "another source's",
+  "moleculesToken.verdict.refused": "refused",
+  "moleculesToken.verdict.unset": "not set",
+  "moleculesToken.verdict.uncheckable": "cannot be checked",
+  "moleculesToken.verdict.unanswered": "no answer",
+  "moleculesToken.forSource": "for {source}",
+  "moleculesToken.issued": "issued on {when}",
+  "moleculesToken.issuedTo": "issued to {email} on {when}",
+  "moleculesToken.lastUsed": "last used on {when}",
+  "moleculesToken.neverUsed": "never used",
+  "moleculesToken.otherSourceDetail": "issued for {source}: what it sends is credited to that source",
+  "moleculesToken.refusedDetail": "never issued, or revoked",
+  "moleculesToken.unsetDetail": "Set {variable} in the server's .env.",
+  "moleculesToken.uncheckableDetail": "This molecules.cheminfo.org cannot check a token yet.",
+  "moleculesToken.howToChange": "A token is changed in the server's .env and read again when the service restarts. molecules.cheminfo.org issues a new one with",
+  "moleculesToken.fix.title": "Set a valid token in {variables}",
+  "moleculesToken.fix.issueOne": "Issue a token on the Admin page of molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Issue one token per source on the Admin page of molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "Or, on the server of molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Write it in the .env of this site's server:",
+  "moleculesToken.fix.envMany": "Write them in the .env of this site's server:",
+  "moleculesToken.fix.restart": "Restart the services, which read the .env only when they start:"
 }