react-cheminfo 0.20.0 → 0.22.0

package/src/ecosystem/core/sites.ts

@@ -1,11 +1,12 @@
 // tokens-ok: file — every site's two colours are declared here.
-import type { EcosystemSite } from './types.ts';
+import type { EcosystemSite, SiteRecord } from './types.ts';
 
 export type {
   EcosystemSite,
   SiteId,
   SiteMarkColors,
   SiteName,
+  SiteRecord,
 } from './types.ts';
 
 /**
@@ -288,6 +289,45 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#1d4ed8',
     mark: { plate: '#854d0e', accent: '#60a5fa' },
   },
+  {
+    id: 'atoms',
+    name: { lead: 'atoms', alt: 'cheminfo', dot: true },
+    host: 'atoms.cheminfo.org',
+    repository: 'https://github.com/cheminfo/atoms.cheminfo.org',
+    tagline: 'Electrons, neutrons, Lewis structures and oxidation states.',
+    group: 'practice',
+    brand: '#b91c1c',
+    // The sky the mark's electron is drawn in sits at 2.1:1 on white, so the
+    // second half of the wordmark takes this darkened form instead.
+    brandAlt: '#0369a1',
+    mark: { plate: '#b91c1c', accent: '#38bdf8' },
+  },
+  {
+    id: 'moles',
+    name: { lead: 'moles', alt: 'cheminfo', dot: true },
+    host: 'moles.cheminfo.org',
+    repository: 'https://github.com/cheminfo/moles.cheminfo.org',
+    tagline: 'Balance a reaction, and work out its mass composition.',
+    group: 'practice',
+    brand: '#334155',
+    // The amber the mark's loaded pan is drawn in sits at 2.2:1 on white, so
+    // the second half of the wordmark takes this darkened form instead.
+    brandAlt: '#b45309',
+    mark: { plate: '#334155', accent: '#f59e0b' },
+  },
+  {
+    id: 'inorganic',
+    name: { lead: 'inorganic', alt: 'cheminfo', dot: true },
+    host: 'inorganic.cheminfo.org',
+    repository: 'https://github.com/cheminfo/inorganic.cheminfo.org',
+    tagline: 'Name an inorganic compound, and write its formula.',
+    group: 'practice',
+    brand: '#a3620a',
+    // The cyan the mark's named ion is drawn in sits at 1.8:1 on white, so the
+    // second half of the wordmark takes this darkened form instead.
+    brandAlt: '#0e7490',
+    mark: { plate: '#a3620a', accent: '#22d3ee' },
+  },
 ];
 
 /**
@@ -295,6 +335,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
  * @param site - The site being linked to.
  * @returns The URL to open.
  */
-export function siteUrl(site: EcosystemSite): string {
+export function siteUrl(site: SiteRecord): string {
   return `https://${site.host}/`;
 }

package/src/ecosystem/core/tokens.ts

@@ -1,6 +1,6 @@
 // tokens-ok: file — the block a site renders is written here.
 import { siteById } from './lookup.ts';
-import type { EcosystemSite, SiteId } from './sites.ts';
+import type { SiteId, SiteRecord } from './sites.ts';
 
 /**
  * The custom properties a site of the family sets on `:root`: the two colours
@@ -9,21 +9,22 @@ import type { EcosystemSite, SiteId } from './sites.ts';
  *
  * It is a complete rule rather than a list of declarations, so it drops into a
  * `<style>` of a prerendered page as it is.
- * @param id - The site whose palette is wanted.
+ * @param site - The site whose palette is wanted: its id, or the record of a
+ *   site that is not one of the family.
  * @returns The `:root` rule, ending in a newline.
  */
-export function siteTokensCss(id: SiteId): string {
-  const site = siteById(id);
-  const answering = answeringColor(site);
+export function siteTokensCss(site: SiteId | SiteRecord): string {
+  const record = typeof site === 'string' ? siteById(site) : site;
+  const answering = answeringColor(record);
   const declarations = [
-    `--brand: ${site.brand};`,
+    `--brand: ${record.brand};`,
     `--brand-alt: ${answering};`,
   ];
 
   // The answering colour of several sites is a yellow or an amber that sits
   // around 2:1 on white, so text set in it needs the darkened form instead.
-  if (site.brandAlt !== answering) {
-    declarations.push(`--brand-alt-text: ${site.brandAlt};`);
+  if (record.brandAlt !== answering) {
+    declarations.push(`--brand-alt-text: ${record.brandAlt};`);
   }
   declarations.push('--accent: var(--brand);');
 
@@ -32,6 +33,6 @@ export function siteTokensCss(id: SiteId): string {
 
 // The second colour as the site's mark draws it: on the accent element, unless
 // the mark inverts the pair and gives the plate the answering colour instead.
-function answeringColor(site: EcosystemSite): string {
+function answeringColor(site: SiteRecord): string {
   return site.mark.accent === site.brand ? site.mark.plate : site.mark.accent;
 }

package/src/ecosystem/core/types.ts

@@ -24,7 +24,10 @@ export type SiteId =
   | 'periodic-table'
   | 'database'
   | 'symmetry'
-  | 'osiris';
+  | 'osiris'
+  | 'atoms'
+  | 'moles'
+  | 'inorganic';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {
@@ -50,10 +53,14 @@ export interface SiteName {
   ink?: 'lead' | 'alt';
 }
 
-/** One site of the family: its name, address, topic and two colours. */
-export interface EcosystemSite {
-  /** The identifier every component and helper names the site by. */
-  id: SiteId;
+/**
+ * What the chrome draws a site from: its name, address and two colours. A site
+ * that is deliberately not one of the family writes its own, and passes it
+ * wherever a family site passes its id.
+ */
+export interface SiteRecord {
+  /** The identifier the site is named by. */
+  id: string;
   /** The name, split the way the site's own wordmark splits it. */
   name: SiteName;
   /** Where the site lives, written the way it is typed. */
@@ -70,11 +77,6 @@ export interface EcosystemSite {
   publicRepository?: boolean;
   /** One line on what the site does. */
   tagline: string;
-  /**
-   * The topic the site is written under, which is what decides where it sits
-   * in the menu and in the footer.
-   */
-  group: SiteGroupId;
   /**
    * The colour the name is written in — the first half, or the second when
    * `name.ink` leaves the first in the family's ink.
@@ -90,6 +92,17 @@ export interface EcosystemSite {
   mark: SiteMarkColors;
 }
 
+/** One site of the family: its record, and the topic it is listed under. */
+export interface EcosystemSite extends SiteRecord {
+  /** The identifier every component and helper names the site by. */
+  id: SiteId;
+  /**
+   * The topic the site is written under, which is what decides where it sits
+   * in the menu and in the footer.
+   */
+  group: SiteGroupId;
+}
+
 /** The colours a site's mark is drawn in. */
 export interface SiteMarkColors {
   /** The rounded square the mark is drawn on. */

package/src/ecosystem/ui/SiteTheme.tsx

@@ -1,12 +1,22 @@
 import type { ReactElement } from 'react';
 
-import type { SiteId } from '../core/sites.ts';
+import type { SiteId, SiteRecord } from '../core/sites.ts';
 import { siteTokensCss } from '../core/tokens.ts';
 
 /** What the site palette needs. */
 export interface SiteThemeProps {
-  /** The site whose palette the page takes. */
-  siteId: SiteId;
+  /**
+   * The site whose palette the page takes, named. One of `site` and `siteId`
+   * is required.
+   * @default undefined
+   */
+  siteId?: SiteId;
+  /**
+   * The same site, passed rather than named — for a site that is deliberately
+   * not one of `ECOSYSTEM_SITES`.
+   * @default undefined
+   */
+  site?: SiteRecord;
 }
 
 /**
@@ -18,7 +28,12 @@ export interface SiteThemeProps {
  * in a component.
  * @param props - The site whose palette is injected.
  * @returns The rule, as a style element that applies wherever it is rendered.
+ * @throws {Error} When neither `site` nor `siteId` is given.
  */
 export function SiteTheme(props: SiteThemeProps): ReactElement {
-  return <style>{siteTokensCss(props.siteId)}</style>;
+  const site = props.site ?? props.siteId;
+  if (site === undefined) {
+    throw new Error('SiteTheme needs one of its `site` and `siteId` props');
+  }
+  return <style>{siteTokensCss(site)}</style>;
 }

package/src/ecosystem/ui/Wordmark.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { siteById } from '../core/lookup.ts';
 import { siteNameColors } from '../core/nameColors.ts';
-import type { EcosystemSite, SiteId } from '../core/sites.ts';
+import type { SiteId, SiteRecord } from '../core/sites.ts';
 
 /** What a site's written name needs. */
 export interface WordmarkProps {
@@ -13,7 +13,7 @@ export interface WordmarkProps {
    * required.
    * @default undefined
    */
-  site?: EcosystemSite;
+  site?: SiteRecord;
   /**
    * The same site, named rather than passed, which is what a header knows.
    * @default undefined

package/src/ecosystem/ui/glyphs.tsx

@@ -409,4 +409,55 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // A nucleus with one electron on its orbit. The electron carries the
+  // answering colour because the electron is what every tool here counts.
+  atoms: (alt) => (
+    <>
+      <circle
+        cx="16"
+        cy="16"
+        r="10.5"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+      />
+      <circle cx="16" cy="16" r="3.6" fill="#ffffff" />
+      <circle cx="23.42" cy="8.58" r="3.2" fill={alt} />
+    </>
+  ),
+  // A balance still tipped, its two pans holding the two sides of the
+  // calculation. The pan that carries the answer carries the colour.
+  moles: (alt) => (
+    <>
+      <path
+        d="M6.5 11.5 25.5 15.5M16 13.5V24M10.5 24h11"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="6.5" cy="11.5" r="3.2" fill="#ffffff" />
+      <circle cx="25.5" cy="15.5" r="3.2" fill={alt} />
+    </>
+  ),
+  // One cell of an ionic lattice, cations and anions alternating: the shape of
+  // the compounds this site names. The ion being named carries the colour.
+  inorganic: (alt) => (
+    <>
+      <path
+        d="M9.5 9.5h13v13h-13Z"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="1.6"
+        opacity="0.55"
+      />
+      <g fill="#ffffff">
+        <circle cx="9.5" cy="9.5" r="4.3" />
+        <circle cx="22.5" cy="9.5" r="2.7" />
+        <circle cx="9.5" cy="22.5" r="2.7" />
+      </g>
+      <circle cx="22.5" cy="22.5" r="4.3" fill={alt} />
+    </>
+  ),
 };

package/src/ecosystem/ui/marks.tsx

@@ -1,7 +1,7 @@
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import { siteById } from '../core/lookup.ts';
-import type { EcosystemSite, SiteId } from '../core/sites.ts';
+import type { SiteId, SiteRecord } from '../core/sites.ts';
 
 import { GLYPHS } from './glyphs.tsx';
 
@@ -19,13 +19,21 @@ export interface SiteMarkProps {
    * and `siteId` is required.
    * @default undefined
    */
-  site?: EcosystemSite;
+  site?: SiteRecord;
   /**
    * The same site, named rather than passed, for a header that knows only
    * which site it is.
    * @default undefined
    */
   siteId?: SiteId;
+  /**
+   * What is drawn on the plate, in the same 32×32 box, given the colour its one
+   * answering element takes. It is how a site that is not one of the family,
+   * and so has no drawing in the shared set, still gets a mark of the family's
+   * shape.
+   * @default the family's drawing for that site
+   */
+  glyph?: (accent: string) => ReactNode;
   /**
    * Edge of the square the mark is drawn in, in pixels.
    * @default 28
@@ -57,13 +65,15 @@ export interface SiteMarkProps {
  * The little logo of one site of the family.
  * @param props - Which site, how big, and where its colours come from.
  * @returns The mark, as an inline SVG.
- * @throws {Error} When neither `site` nor `siteId` is given.
+ * @throws {Error} When neither `site` nor `siteId` is given, or when the site
+ *   is not one of the family and no `glyph` is.
  */
 export function SiteMark(props: SiteMarkProps): ReactElement {
   const {
     className,
     site,
     siteId,
+    glyph,
     size = 28,
     plate = true,
     colors = 'literal',
@@ -73,6 +83,10 @@ export function SiteMark(props: SiteMarkProps): ReactElement {
   if (drawn === undefined) {
     throw new Error('SiteMark needs one of its `site` and `siteId` props');
   }
+  const draw = glyph ?? familyGlyph(drawn.id);
+  if (draw === undefined) {
+    throw new Error(`SiteMark has no drawing for ${drawn.id}: pass its glyph`);
+  }
 
   const usesTokens = colors === 'tokens';
   const plateFill = usesTokens ? 'var(--brand)' : drawn.mark.plate;
@@ -100,7 +114,11 @@ export function SiteMark(props: SiteMarkProps): ReactElement {
           stroke={edge}
         />
       ) : null}
-      {GLYPHS[drawn.id](accent)}
+      {draw(accent)}
     </svg>
   );
 }
+
+function familyGlyph(id: string): ((accent: string) => ReactNode) | undefined {
+  return Object.hasOwn(GLYPHS, id) ? GLYPHS[id as SiteId] : undefined;
+}

package/src/error/ui/ErrorFallback.tsx

@@ -52,7 +52,9 @@ export function ErrorFallback(props: ErrorFallbackProps): ReactElement {
       icon="error"
       title={title}
       description={
-        error.message === '' ? 'No message was given.' : error.message
+        <span className="error-fallback__message">
+          {error.message === '' ? 'No message was given.' : error.message}
+        </span>
       }
       action={
         onRetry === undefined ? undefined : (

package/src/pedagogy/ui/ReferenceSectionBlock.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { ClickToCopy } from '../../clipboard/ui/ClickToCopy.tsx';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
@@ -108,7 +109,15 @@ function ReferenceRowLine(props: {
   const interactive = row.tooltip !== undefined;
   const line = (
     <span style={interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE}>
-      <span style={syntaxStyle(width, interactive)}>{row.syntax}</span>
+      <span style={syntaxStyle(width, interactive)}>
+        <ClickToCopy
+          value={row.syntax}
+          label="syntax"
+          title={interactive ? '' : undefined}
+        >
+          {row.syntax}
+        </ClickToCopy>
+      </span>
       <span style={DESCRIPTION_STYLE}>{row.description}</span>
     </span>
   );

package/src/seo/core/noscript.ts

@@ -167,7 +167,7 @@ function labelOf(route: NoscriptRoute): string {
 }
 
 function familyList(
-  current: SiteId,
+  current: string,
   ecosystem: boolean | NoscriptEcosystem | undefined,
 ): string {
   if (ecosystem === undefined || ecosystem === false) return '';

package/src/seo/core/pageMeta.ts

@@ -13,7 +13,7 @@
  */
 
 import { siteDisplayName } from '../../ecosystem/core/lookup.ts';
-import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { escapeAttribute, escapeText } from '../../share/core/escape.ts';
 
 import type { DocumentMeta } from './documentMeta.ts';
@@ -25,7 +25,7 @@ import { PAGE_HEAD_MARKER, fill } from './template.ts';
 /** Which site is being served, and what it answers. */
 export interface PageMetaOptions {
   /** The site, named or passed. */
-  site: EcosystemSite | SiteId;
+  site: SiteRecord | SiteId;
   /** Every address it answers, each with its title and description. */
   routes: readonly RouteMeta[];
   /**

package/src/seo/core/siteFiles.ts

@@ -10,7 +10,7 @@
  */
 
 import { siteById } from '../../ecosystem/core/lookup.ts';
-import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { trimTrailingSlash } from '../../router/core/address.ts';
 import { basePathOf } from '../../router/core/basePath.ts';
 import { escapeText } from '../../share/core/escape.ts';
@@ -25,7 +25,7 @@ const HTTP_ORIGIN = /^https?:\/\//i;
 /** What a crawler is told about the site as a whole. */
 export interface SiteFilesOptions {
   /** The site, named or passed. */
-  site: EcosystemSite | SiteId;
+  site: SiteRecord | SiteId;
   /** Every address it answers. */
   routes: readonly RouteMeta[];
   /**
@@ -71,7 +71,7 @@ ${entries}
  * @param site - The site, named or passed.
  * @returns Its record.
  */
-export function resolveSite(site: EcosystemSite | SiteId): EcosystemSite {
+export function resolveSite(site: SiteRecord | SiteId): SiteRecord {
   return typeof site === 'string' ? siteById(site) : site;
 }
 

package/src/seo/vite/ogCard.ts

@@ -11,8 +11,10 @@
  * a site must be able to import with none of the optional peers installed.
  */
 
+import type { ReactNode } from 'react';
+
 import { siteNameColors } from '../../ecosystem/core/nameColors.ts';
-import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { escapeText } from '../../share/core/escape.ts';
 import { FAMILY_TOKEN_VALUES } from '../../tokens/core/familyTokens.ts';
 import { resolveSite } from '../core/siteFiles.ts';
@@ -26,12 +28,18 @@ export const OG_HEIGHT = 630;
 /** What the card says, beyond the site's own name and mark. */
 export interface OgCardOptions {
   /** The site, named or passed. */
-  site: EcosystemSite | SiteId;
+  site: SiteRecord | SiteId;
   /**
    * The sentence under the name.
    * @default the site's tagline
    */
   description?: string;
+  /**
+   * The drawing on the mark's plate, for a site the shared glyph set does not
+   * hold — see `SiteMark`.
+   * @default the family's drawing for that site
+   */
+  glyph?: (accent: string) => ReactNode;
 }
 
 /**
@@ -58,7 +66,12 @@ export async function ogCardHtml(options: OgCardOptions): Promise<string> {
       import('../../ecosystem/ui/marks.tsx'),
     ]);
   const mark = renderToStaticMarkup(
-    createElement(SiteMark, { site, size: 132, colors: 'literal' }),
+    createElement(SiteMark, {
+      site,
+      glyph: options.glyph,
+      size: 132,
+      colors: 'literal',
+    }),
   );
   const dot = site.name.dot === true ? '<span class="dot">.</span>' : '';
 

package/src/seo/vite/prerender.ts

@@ -22,7 +22,7 @@ import { dirname, join, resolve } from 'node:path';
 
 import type { Logger, Plugin } from 'vite';
 
-import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
 import { trimTrailingSlash } from '../../router/core/address.ts';
 import type { NoscriptText } from '../core/noscript.ts';
 import { noscriptIndex } from '../core/noscript.ts';
@@ -38,7 +38,7 @@ import { PAGE_BODY_MARKER, PAGE_HEAD_MARKER, fill } from '../core/template.ts';
 /** What the build needs to know to write the site's addresses. */
 export interface PrerenderOptions {
   /** The site, named or passed. */
-  site: EcosystemSite | SiteId;
+  site: SiteRecord | SiteId;
   /** Every address it answers, each with its title and description. */
   routes: readonly RouteMeta[];
   /**