react-cheminfo 0.59.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/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,7 @@ 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';

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",
@@ -618,5 +619,12 @@
   "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.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.",
@@ -618,5 +619,12 @@
   "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.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:"
 }

package/src/locales/es.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Ofrecido por",
   "about.whatYouCanDo": "Lo que puede hacer aquí",
   "about.builtOn": "Construido sobre",
+  "about.buildVersion": "Versión {version}",
+  "about.buildBuilt": "Compilado",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Cómo citar",
   "about.citeWork": "Citar {what}",
-  "about.built": "Compilado {builtAt}.",
-  "about.builtFromCommit": "Compilado {builtAt} desde el commit {commit}.",
   "about.nameList": "{names} y {last}",
   "help.label": "Ayuda",
   "help.learnMore": "Saber más",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "nunca emitido, o revocado",
   "moleculesToken.unsetDetail": "Defina {variable} en el .env del servidor.",
   "moleculesToken.uncheckableDetail": "Este molecules.cheminfo.org aún no puede comprobar un token.",
-  "moleculesToken.howToChange": "Un token se cambia en el .env del servidor y se vuelve a leer cuando el servicio se reinicia. molecules.cheminfo.org emite uno nuevo con"
+  "moleculesToken.howToChange": "Un token se cambia en el .env del servidor y se vuelve a leer cuando el servicio se reinicia. molecules.cheminfo.org emite uno nuevo con",
+  "moleculesToken.fix.title": "Defina un token válido en {variables}",
+  "moleculesToken.fix.issueOne": "Emita un token en la página Admin de molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Emita un token por fuente en la página Admin de molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "O, en el servidor de molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Escríbalo en el .env del servidor de este sitio:",
+  "moleculesToken.fix.envMany": "Escríbalos en el .env del servidor de este sitio:",
+  "moleculesToken.fix.restart": "Reinicie los servicios, que solo leen el .env al arrancar:"
 }

package/src/locales/fr.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Proposé par",
   "about.whatYouCanDo": "Ce que vous pouvez faire ici",
   "about.builtOn": "Construit sur",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Compilé",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Comment citer",
   "about.citeWork": "Citer {what}",
-  "about.built": "Compilé {builtAt}.",
-  "about.builtFromCommit": "Compilé {builtAt} depuis le commit {commit}.",
   "about.nameList": "{names} et {last}",
   "help.label": "Aide",
   "help.learnMore": "En savoir plus",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "jamais émis, ou révoqué",
   "moleculesToken.unsetDetail": "Définissez {variable} dans le fichier .env du serveur.",
   "moleculesToken.uncheckableDetail": "Ce molecules.cheminfo.org ne sait pas encore vérifier un jeton.",
-  "moleculesToken.howToChange": "Un jeton se change dans le fichier .env du serveur, et est relu au redémarrage du service. molecules.cheminfo.org en émet un nouveau avec"
+  "moleculesToken.howToChange": "Un jeton se change dans le fichier .env du serveur, et est relu au redémarrage du service. molecules.cheminfo.org en émet un nouveau avec",
+  "moleculesToken.fix.title": "Définissez un jeton valide dans {variables}",
+  "moleculesToken.fix.issueOne": "Émettez un jeton sur la page Admin de molecules.cheminfo.org :",
+  "moleculesToken.fix.issueMany": "Émettez un jeton par source sur la page Admin de molecules.cheminfo.org :",
+  "moleculesToken.fix.issueOnServer": "Ou, sur le serveur de molecules.cheminfo.org :",
+  "moleculesToken.fix.envOne": "Écrivez-le dans le fichier .env du serveur de ce site :",
+  "moleculesToken.fix.envMany": "Écrivez-les dans le fichier .env du serveur de ce site :",
+  "moleculesToken.fix.restart": "Redémarrez les services, qui ne lisent le fichier .env qu'à leur démarrage :"
 }

package/src/locales/it.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Offerto da",
   "about.whatYouCanDo": "Cosa si può fare qui",
   "about.builtOn": "Costruito su",
+  "about.buildVersion": "Versione {version}",
+  "about.buildBuilt": "Compilato",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Come citare",
   "about.citeWork": "Citare {what}",
-  "about.built": "Compilato {builtAt}.",
-  "about.builtFromCommit": "Compilato {builtAt} dal commit {commit}.",
   "about.nameList": "{names} e {last}",
   "credits.openbabel.description": "legge e scrive i formati di file chimici, ed esegue la conversione stessa.",
   "credits.openchemlib.description": "legge e scrive strutture, e ne calcola le proprietà nel browser.",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "mai emesso, o revocato",
   "moleculesToken.unsetDetail": "Impostare {variable} nel file .env del server.",
   "moleculesToken.uncheckableDetail": "Questo molecules.cheminfo.org non sa ancora verificare un token.",
-  "moleculesToken.howToChange": "Un token si cambia nel file .env del server e viene riletto al riavvio del servizio. molecules.cheminfo.org ne emette uno nuovo con"
+  "moleculesToken.howToChange": "Un token si cambia nel file .env del server e viene riletto al riavvio del servizio. molecules.cheminfo.org ne emette uno nuovo con",
+  "moleculesToken.fix.title": "Impostare un token valido in {variables}",
+  "moleculesToken.fix.issueOne": "Emettere un token nella pagina Admin di molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Emettere un token per fonte nella pagina Admin di molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "Oppure, sul server di molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Scriverlo nel file .env del server di questo sito:",
+  "moleculesToken.fix.envMany": "Scriverli nel file .env del server di questo sito:",
+  "moleculesToken.fix.restart": "Riavviare i servizi, che leggono il file .env solo all'avvio:"
 }

package/src/moleculesSources/core/index.ts

@@ -0,0 +1,11 @@
+export type {
+  FetchSourceLooksOptions,
+  SourceLook,
+  SourceLooks,
+} from './moleculesSources.ts';
+export {
+  MOLECULES_URL,
+  fetchSourceLooks,
+  readSourceLooks,
+  sourceLook,
+} from './moleculesSources.ts';

package/src/moleculesSources/core/moleculesSources.ts

@@ -0,0 +1,102 @@
+/** Where molecules.cheminfo.org answers, which holds the family's sources. */
+export const MOLECULES_URL = 'https://molecules.cheminfo.org';
+
+/**
+ * How a source is drawn wherever the family names it — PubChem, ChEBI, COCONUT
+ * — as molecules.cheminfo.org publishes it. molecules is where a source's
+ * colour and logo are kept and edited, so every site reads them from there
+ * rather than keeping a copy that drifts the first time one is changed.
+ */
+export interface SourceLook {
+  /** What the source is called, as molecules writes it: `ChEBI`. */
+  name: string;
+  /** The colour its badges are drawn in, as `#rrggbb`; null for none. */
+  color: string | null;
+  /** The absolute address of its little logo; null when it has none. */
+  logo: string | null;
+}
+
+/** Every source molecules publishes, by its name in lower case. */
+export type SourceLooks = ReadonlyMap<string, SourceLook>;
+
+/**
+ * The sources a `/v1/sources` answer describes, each logo made absolute
+ * against the address it was read from, so the badge draws it on any site.
+ * Anything not shaped like a source is left out rather than trusted.
+ * @param body - The parsed answer of `/v1/sources`.
+ * @param baseUrl - Where it was read from.
+ * @returns The looks, by lower-case name.
+ */
+export function readSourceLooks(body: unknown, baseUrl: string): SourceLooks {
+  const looks = new Map<string, SourceLook>();
+  const sources = isRecord(body) ? body.sources : undefined;
+  if (!Array.isArray(sources)) return looks;
+  for (const source of sources) {
+    if (!isRecord(source) || typeof source.name !== 'string') continue;
+    const { name, color, logo } = source;
+    looks.set(name.toLowerCase(), {
+      name,
+      color: typeof color === 'string' && HEX_COLOR.test(color) ? color : null,
+      logo: typeof logo === 'string' ? absolute(logo, baseUrl) : null,
+    });
+  }
+  return looks;
+}
+
+/**
+ * The look of one source, named in any case.
+ * @param looks - What molecules publishes, or null while it is being read.
+ * @param name - The source's name or key: `chebi`, `ChEBI`.
+ * @returns Its look, or `undefined` when molecules does not know it (yet).
+ */
+export function sourceLook(
+  looks: SourceLooks | null,
+  name: string,
+): SourceLook | undefined {
+  return looks?.get(name.toLowerCase());
+}
+
+/** Where and how {@link fetchSourceLooks} reads. */
+export interface FetchSourceLooksOptions {
+  /**
+   * Where molecules answers.
+   * @default MOLECULES_URL
+   */
+  url?: string;
+  /**
+   * Aborts the read.
+   * @default undefined
+   */
+  signal?: AbortSignal;
+}
+
+/**
+ * Read every source's look from molecules.cheminfo.org.
+ * @param options - See {@link FetchSourceLooksOptions}.
+ * @returns The looks, by lower-case name.
+ * @throws {Error} When molecules does not answer, or answers with an error.
+ */
+export async function fetchSourceLooks(
+  options: FetchSourceLooksOptions = {},
+): Promise<SourceLooks> {
+  const { url = MOLECULES_URL, signal } = options;
+  const response = await fetch(`${url}/v1/sources`, { signal });
+  if (!response.ok) {
+    throw new Error(`${url} answered ${response.status} for its sources`);
+  }
+  return readSourceLooks(await response.json(), url);
+}
+
+const HEX_COLOR = /^#[\da-f]{6}$/i;
+
+function absolute(address: string, baseUrl: string): string | null {
+  try {
+    return new URL(address, baseUrl).href;
+  } catch {
+    return null;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}