react-cheminfo 0.34.0 → 0.36.0

package/src/ecosystem/core/sites.ts

@@ -20,7 +20,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'learn',
     name: { lead: 'learn', alt: 'cheminfo', dot: true },
     host: 'learn.cheminfo.org',
-    repository: 'https://github.com/cheminfo/learn.cheminfo.org',
     tagline: 'Arrange the tools into a course and hand out its link.',
     group: 'computing',
     brand: '#0d9488',
@@ -31,7 +30,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'inchi',
     name: { lead: 'inchi', alt: 'cheminfo', dot: true },
     host: 'inchi.cheminfo.org',
-    repository: 'https://github.com/cheminfo/inchi.cheminfo.org',
     tagline: 'InChI and InChIKey from a structure, in the browser.',
     group: 'structures',
     brand: '#5b21b6',
@@ -42,7 +40,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'vcl',
     name: { lead: 'vcl', alt: 'cheminfo', dot: true },
     host: 'vcl.cheminfo.org',
-    repository: 'https://github.com/cheminfo/vcl.cheminfo.org',
     tagline: 'Combine a core and fragments into a screened library.',
     group: 'research',
     brand: '#2d72d2',
@@ -53,7 +50,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'smiles',
     name: { lead: 'smiles', alt: 'cheminfo', dot: true },
     host: 'smiles.cheminfo.org',
-    repository: 'https://github.com/cheminfo/smiles.cheminfo.org',
     tagline: 'Draw a structure, read its SMILES, learn the notation.',
     group: 'structures',
     brand: '#1c6e42',
@@ -64,8 +60,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'openbabel',
     name: { lead: 'openbabel', alt: 'cheminfo', dot: true },
     host: 'openbabel.cheminfo.org',
-    repository: 'https://github.com/cheminfo/openbabel.cheminfo.org',
-    publicRepository: true,
     tagline: 'Convert a structure between any pair of chemical file formats.',
     group: 'structures',
     brand: '#0f766e',
@@ -76,7 +70,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'chemcalc',
     name: { lead: 'Chem', alt: 'Calc' },
     host: 'www.chemcalc.org',
-    repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
     group: 'basics',
     brand: '#5b52e0',
@@ -87,8 +80,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'dbe',
     name: { lead: 'dbe', alt: 'cheminfo', dot: true },
     host: 'dbe.cheminfo.org',
-    repository: 'https://github.com/cheminfo/dbe.cheminfo.org',
-    publicRepository: true,
     tagline: 'Count rings and double bonds from a formula or a structure.',
     group: 'basics',
     brand: '#63123f',
@@ -101,8 +92,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'nmrium',
     name: { lead: 'NMR', alt: 'ium' },
     host: 'www.nmrium.org',
-    repository: 'https://github.com/cheminfo/nmrium',
-    publicRepository: true,
     tagline: 'Process and assign NMR spectra in the browser.',
     group: 'spectra',
     brand: '#ea580c',
@@ -116,7 +105,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     // of the cheminfo tools.
     name: { lead: 'metabo', alt: 'nmrium', dot: true },
     host: 'metabo.nmrium.com',
-    repository: 'https://github.com/cheminfo/metabo',
     tagline: 'Turn a batch of NMR spectra into a map of your samples.',
     group: 'spectra',
     brand: '#4d7c0f',
@@ -129,7 +117,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'derepflow',
     name: { lead: 'Derep', alt: 'Flow', ink: 'lead' },
     host: 'derepflow.cheminfo.org',
-    repository: 'https://github.com/cheminfo/derepflow',
     tagline: 'Identify the constituents of a mixture from its ¹³C spectrum.',
     group: 'spectra',
     brand: '#127ba3',
@@ -140,8 +127,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'surge',
     name: { lead: 'surge', alt: 'cheminfo', dot: true },
     host: 'surge.cheminfo.org',
-    repository: 'https://github.com/cheminfo/surge.cheminfo.org',
-    publicRepository: true,
     tagline: 'Every constitutional isomer of a molecular formula.',
     group: 'structures',
     brand: '#4338ca',
@@ -152,8 +137,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'tex',
     name: { lead: 'tex', alt: 'cheminfo', dot: true },
     host: 'tex.cheminfo.org',
-    repository: 'https://github.com/cheminfo/tex.cheminfo.org',
-    publicRepository: true,
     tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
     group: 'computing',
     brand: '#a21caf',
@@ -164,7 +147,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'lcao',
     name: { lead: 'lcao', alt: 'cheminfo', dot: true },
     host: 'lcao.cheminfo.org',
-    repository: 'https://github.com/cheminfo/lcao.cheminfo.org',
     tagline: 'Combine atomic orbitals into molecular ones.',
     group: 'basics',
     brand: '#1565c0',
@@ -175,8 +157,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'regexp',
     name: { lead: 'regexp', alt: 'cheminfo', dot: true },
     host: 'regexp.cheminfo.org',
-    repository: 'https://github.com/cheminfo/regexp.cheminfo.org',
-    publicRepository: true,
     tagline: 'Learn regular expressions in a live playground.',
     group: 'computing',
     brand: '#1e3a8a',
@@ -187,8 +167,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'pdb',
     name: { lead: 'pdb', alt: 'cheminfo', dot: true },
     host: 'pdb.cheminfo.org',
-    repository: 'https://github.com/cheminfo/pdb.cheminfo.org',
-    publicRepository: true,
     tagline: 'A fast look at any Protein Data Bank entry.',
     group: 'research',
     brand: '#2563eb',
@@ -199,8 +177,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'elucidation',
     name: { lead: 'elucidation', alt: 'cheminfo', dot: true },
     host: 'elucidation.cheminfo.org',
-    repository: 'https://github.com/cheminfo/elucidation.cheminfo.org',
-    publicRepository: true,
     tagline: 'A structure from a 1H NMR spectrum and a formula.',
     group: 'spectra',
     brand: '#7e22ce',
@@ -211,7 +187,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'equilibrium',
     name: { lead: 'Equi', alt: 'Librium' },
     host: 'equilibrium.cheminfo.org',
-    repository: 'https://github.com/cheminfo/equilibrium.cheminfo.org',
     tagline: 'Chemical equilibria: pH, speciation and titration curves.',
     group: 'basics',
     brand: '#0b5754',
@@ -222,8 +197,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'polycarp',
     name: { lead: 'Poly', alt: 'Carp' },
     host: 'polycarp.cheminfo.org',
-    repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
-    publicRepository: true,
     tagline: 'Predict the microstructure of a radical copolymerisation.',
     group: 'research',
     brand: '#701a75',
@@ -234,7 +207,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: '3d',
     name: { lead: '3d', alt: 'cheminfo', dot: true },
     host: '3d.cheminfo.org',
-    repository: 'https://github.com/cheminfo/3d.cheminfo.org',
     tagline: 'Conformers in 3D from a structure you draw.',
     group: 'structures',
     brand: '#155e75',
@@ -245,7 +217,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'periodic-table',
     name: { lead: 'Periodic', alt: 'Table' },
     host: 'periodic-table.cheminfo.org',
-    repository: 'https://github.com/cheminfo/periodic-table.cheminfo.org',
     tagline: 'The periodic table, coloured, plotted and taken apart.',
     group: 'basics',
     brand: '#15803d',
@@ -256,8 +227,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'database',
     name: { lead: 'database', alt: 'cheminfo', dot: true },
     host: 'database.cheminfo.org',
-    repository: 'https://github.com/cheminfo/database.cheminfo.org',
-    publicRepository: true,
     tagline: 'Query a real chemical dataset in SQL and in Mango.',
     group: 'research',
     brand: '#7c2d12',
@@ -268,8 +237,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'symmetry',
     name: { lead: 'Symme', alt: 'Try' },
     host: 'symmetry.cheminfo.org',
-    repository: 'https://github.com/cheminfo/symmetry.cheminfo.org',
-    publicRepository: true,
     tagline: 'Find the symmetry of a molecule, a crystal or a pattern.',
     group: 'basics',
     brand: '#9f1239',
@@ -282,8 +249,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'osiris',
     name: { lead: 'osiris', alt: 'cheminfo', dot: true },
     host: 'osiris.cheminfo.org',
-    repository: 'https://github.com/cheminfo/osiris.cheminfo.org',
-    publicRepository: true,
     tagline: 'Predicted toxicity risks and properties, one molecule or many.',
     group: 'research',
     brand: '#854d0e',
@@ -297,8 +262,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'atoms',
     name: { lead: 'atoms', alt: 'cheminfo', dot: true },
     host: 'atoms.cheminfo.org',
-    repository: 'https://github.com/cheminfo/atoms.cheminfo.org',
-    publicRepository: true,
     tagline: 'Electrons, neutrons, Lewis structures and oxidation states.',
     group: 'practice',
     brand: '#b91c1c',
@@ -311,8 +274,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'moles',
     name: { lead: 'moles', alt: 'cheminfo', dot: true },
     host: 'moles.cheminfo.org',
-    repository: 'https://github.com/cheminfo/moles.cheminfo.org',
-    publicRepository: true,
     tagline: 'Balance a reaction, and work out its mass composition.',
     group: 'practice',
     brand: '#334155',
@@ -325,7 +286,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',

package/src/ecosystem/core/types.ts

@@ -65,16 +65,6 @@ export interface SiteRecord {
   name: SiteName;
   /** Where the site lives, written the way it is typed. */
   host: string;
-  /** Where the sources live, and what a Source link opens. */
-  repository: string;
-  /**
-   * Whether a visitor can open that repository. A private one is named
-   * nowhere: no licence-and-source section, no link from the version, no issue
-   * tracker a reader cannot reach. It is stated rather than assumed, so a site
-   * whose record forgets it advertises nothing rather than a dead link.
-   * @default false
-   */
-  publicRepository?: boolean;
   /** One line on what the site does. */
   tagline: string;
   /**

package/src/ir/core/irCommands.ts

@@ -120,10 +120,10 @@ export const irCommands = {
       'Writes what each labelled band might be under its wavenumber. Worth turning off once the chart is crowded.',
   },
   exportImage: {
-    title: 'Export as an image…',
+    title: 'Save figure…',
     shortcut: { keys: ['x'] },
     description:
-      'The chart as it stands, at a chosen resolution — PNG, or SVG, which is drawn again at whatever size it is printed rather than enlarged.',
+      'The chart as it stands, saved as a PNG or an SVG at a chosen resolution, or copied as a PNG.',
   },
   clear: {
     title: 'Close every spectrum',

package/src/ir/ui/IrAboutDialog.tsx

@@ -82,19 +82,6 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
             reader with a colour vision deficiency.
           </li>
         </ul>
-
-        <h4 style={headingStyle}>Licence</h4>
-        <p style={paragraphStyle}>
-          MIT, in the{' '}
-          <a
-            href="https://github.com/cheminfo/glycans"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            cheminfo/glycans
-          </a>{' '}
-          monorepo.
-        </p>
       </DialogBody>
     </Dialog>
   );

package/src/ir/ui/IrCanvas.tsx

@@ -26,6 +26,12 @@ export interface IrCanvasProps {
    * @default undefined
    */
   attachChart?: (element: HTMLDivElement | null) => void;
+  /**
+   * The `id` put on the box the chart is drawn in, which the "Save figure"
+   * panel is pointed at.
+   * @default undefined
+   */
+  chartId?: string;
 }
 
 /**
@@ -44,7 +50,7 @@ export interface IrCanvasProps {
  * @returns The canvas.
  */
 export function IrCanvas(props: IrCanvasProps) {
-  const { highlight = null, onHighlight, attachChart } = props;
+  const { highlight = null, onHighlight, attachChart, chartId } = props;
   const { state, visibleSpectra, assigned } = useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
@@ -59,7 +65,7 @@ export function IrCanvas(props: IrCanvasProps) {
 
   return (
     <div style={rootStyle}>
-      <div ref={attachChart} style={chartStyle}>
+      <div ref={attachChart} id={chartId} style={chartStyle}>
         <IrChart
           spectra={visibleSpectra}
           mode={mode}

package/src/ir/ui/IrShell.tsx

@@ -1,10 +1,15 @@
 import type { Ref } from 'react';
-import { useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  useCallback,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { SplitPane, useFullscreen } from 'react-science/ui';
 
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
-import { ExportImageDialog } from '../../download/ui/ExportImageDialog.tsx';
-import { useDrawingBox } from '../../download/ui/useDrawingBox.ts';
+import { useFigureDownload } from '../../download/ui/useFigureDownload.tsx';
 import { PanelRail } from '../../panel/ui/PanelRail.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrCommandHandlers } from '../core/irCommands.ts';
@@ -58,12 +63,16 @@ export function IrShell(props: IrShellProps) {
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
-  const [isExportImageOpen, setIsExportImageOpen] = useState(false);
 
-  // The chart is the picture, so the box it is drawn in is what the export
-  // dialog is pointed at: the viewer around it is full of SVG — every icon in
-  // every toolbar is one — and the first found there would be a magnifier.
-  const chart = useDrawingBox();
+  // The chart is the picture, so the box it is drawn in is what the figure
+  // panel is pointed at: the viewer around it is full of SVG — every icon in
+  // every toolbar is one.
+  const chartId = useId();
+  const figure = useFigureDownload({
+    targetId: chartId,
+    fileName: pictureName(visibleSpectra, selectedSpectrum),
+  });
+  const { isOpen: isFigureOpen, setOpen: setFigureOpen } = figure;
   // The highlight is held here rather than in the reducer: what the pointer is
   // resting on is not part of the document and changes on every move across the
   // chart, so putting it through the reducer would run every panel's memo sixty
@@ -106,7 +115,7 @@ export function IrShell(props: IrShellProps) {
       togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
       toggleAssignments: () =>
         actions.setSettings({ showAssignments: !showAssignments }),
-      exportImage: () => setIsExportImageOpen(true),
+      exportImage: () => setFigureOpen(!isFigureOpen),
       clear: () => actions.clear(),
     }),
     [
@@ -117,6 +126,8 @@ export function IrShell(props: IrShellProps) {
       showAssignments,
       scaleValueAxis,
       toggleFullScreen,
+      isFigureOpen,
+      setFigureOpen,
     ],
   );
 
@@ -176,7 +187,7 @@ export function IrShell(props: IrShellProps) {
               default: in a narrow viewer the row would take the width it is
               short of out of them, and half an icon is what that looks like. */}
           <div style={railStyle}>
-            <IrToolbar />
+            <IrToolbar figure={figure} />
           </div>
 
           <SplitPane
@@ -189,7 +200,7 @@ export function IrShell(props: IrShellProps) {
             <IrCanvas
               highlight={highlight}
               onHighlight={setHighlight}
-              attachChart={chart.attach}
+              chartId={chartId}
             />
 
             <IrSidePanel highlight={highlight} onHighlight={setHighlight} />
@@ -215,19 +226,6 @@ export function IrShell(props: IrShellProps) {
         isOpen={isDocumentationOpen}
         onClose={() => setIsDocumentationOpen(false)}
       />
-
-      {/* `element`, not `content`: the chart is drawn to the box it was given,
-          so the box is the picture — measuring the marks inside it would crop
-          the frame to wherever the trace happens to reach and leave the axes
-          hanging. */}
-      <ExportImageDialog
-        isOpen={isExportImageOpen}
-        getDrawing={chart.getDrawing}
-        frame="element"
-        filename={pictureName(visibleSpectra, selectedSpectrum)}
-        label="Infrared spectrum"
-        onClose={() => setIsExportImageOpen(false)}
-      />
     </IrCommandProvider>
   );
 }
@@ -245,7 +243,7 @@ const ZOOM_STEP = 1.2;
 const DEFAULT_FRAME_WIDTH = 200;
 
 /**
- * What a picture of the chart is called before anything is typed in the box.
+ * What a picture of the chart is called.
  *
  * The spectrum being looked at, since a figure of the chart is a figure of that
  * spectrum, and a chemist who has one run open should not have to work out

package/src/ir/ui/IrToolbar.tsx

@@ -1,10 +1,20 @@
 import { Toolbar } from 'react-science/ui';
 
+import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
 import { boxZoomOnly } from '../core/irMode.ts';
 
 import { useIrCommandProps } from './irCommandContext.tsx';
 import { useIrEditorState } from './irStateContext.ts';
 
+/** What {@link IrToolbar} needs. */
+export interface IrToolbarProps {
+  /**
+   * The "Save figure" panel the picture button opens.
+   * @default undefined — the button only runs the `exportImage` command
+   */
+  figure?: FigureDownloadState;
+}
+
 /**
  * The tools, down the left of the chart.
  *
@@ -19,9 +29,11 @@ import { useIrEditorState } from './irStateContext.ts';
  * drag on that axis is a rectangle, so both buttons go dead with the square zoom
  * lit. Showing `read` as available there would offer a gesture the chart does not
  * make, and showing it as *active* would name the wrong one.
+ * @param props - Component props.
  * @returns The toolbar.
  */
-export function IrToolbar() {
+export function IrToolbar(props: IrToolbarProps) {
+  const { figure } = props;
   const { state, selectedSpectrum } = useIrEditorState();
   const command = useIrCommandProps();
   const { spectra } = state.data;
@@ -29,6 +41,8 @@ export function IrToolbar() {
   const { mode, pickBands, showAssignments } = state.settings;
 
   const isEmpty = spectra.length === 0;
+  // The popover opens the panel itself, so the command's own click is left out.
+  const exportCommand = command('exportImage');
   const settled = boxZoomOnly(mode);
 
   return (
@@ -92,11 +106,27 @@ export function IrToolbar() {
           window it was dragged to, the way up it is being read, the
           assignments written under the bands — so the picture is taken here
           rather than rebuilt from the spectra in a panel. */}
-      <Toolbar.Item
-        icon="media"
-        {...command('exportImage')}
-        disabled={isEmpty}
-      />
+      {figure === undefined ? (
+        <Toolbar.Item
+          icon="media"
+          {...command('exportImage')}
+          disabled={isEmpty}
+        />
+      ) : (
+        <Toolbar.PopoverItem
+          isOpen={figure.isOpen}
+          onInteraction={figure.setOpen}
+          content={figure.panel}
+          disabled={isEmpty}
+          itemProps={{
+            icon: 'media',
+            tooltip: exportCommand.tooltip,
+            'aria-label': exportCommand['aria-label'],
+            active: figure.isOpen,
+            disabled: isEmpty,
+          }}
+        />
+      )}
     </Toolbar>
   );
 }

package/src/ir/ui/index.ts

@@ -34,6 +34,7 @@ export { IrSidePanel } from './IrSidePanel.tsx';
 export type { IrStateProviderProps } from './IrStateProvider.tsx';
 export { IrStateProvider } from './IrStateProvider.tsx';
 export { IrStatusBar } from './IrStatusBar.tsx';
+export type { IrToolbarProps } from './IrToolbar.tsx';
 export { IrToolbar } from './IrToolbar.tsx';
 export type { IrTracesProps } from './IrTraces.tsx';
 export { IrTraces } from './IrTraces.tsx';

package/src/language/core/index.ts

@@ -1,4 +1,6 @@
 export { languageName } from './languageName.ts';
+export type { LanguagePath } from './languagePath.ts';
+export { readLanguagePath, withLanguagePath } from './languagePath.ts';
 export {
   LANGUAGE_PARAM,
   isLanguageTag,

package/src/language/core/languagePath.ts

@@ -0,0 +1,78 @@
+/**
+ * The language a translated site routes by: a prefix on its own addresses.
+ *
+ * `/fr/tutorial` is the French tutorial, and English is written with no prefix
+ * at all, so every link already handed out in a course stays alive and the site
+ * does not acquire a second spelling of its own front page.
+ *
+ * This is the half of the design that makes a translation *findable*. A site
+ * that keeps its language in a query parameter, in the hash or in
+ * `localStorage` serves five languages at one address: a crawler sees one page,
+ * indexes one language, and the other four may as well not have been written.
+ * The parameter stays — it is how the language travels to a sibling that may
+ * not speak it (`./languageParam.ts`) — but it is not how a translated site
+ * routes.
+ *
+ * The prefix sits between the mount and the route, so a tool served as one of
+ * several on a shared host reads `/surge/fr/exercises`: the mount comes off
+ * first (`router/core/basePath.ts`), then the language, then the table is read.
+ */
+
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
+import { trimTrailingSlash } from '../../router/core/address.ts';
+
+/** An address split into the language it names and the page it opens. */
+export interface LanguagePath {
+  /** The language named, or the default one when the address names none. */
+  language: Language;
+  /** The address from the site's own root, with the prefix taken off. */
+  path: string;
+}
+
+/**
+ * Read the language prefix off one of the site's own addresses.
+ *
+ * Only a language the site actually speaks is read as a prefix: on a site with
+ * no Italian, `/it` is whatever page is called `it`, not an empty Italian front
+ * page. So the list is the site's, never the family's.
+ * @param path - An address from the site's own root, the mount already off,
+ * e.g. `/fr/tutorial`.
+ * @param languages - The languages this site is written in, the default one
+ * included.
+ * @returns The language it names and the page it opens.
+ */
+export function readLanguagePath(
+  path: string,
+  languages: readonly Language[],
+): LanguagePath {
+  const opened = path.startsWith('/') ? path : `/${path}`;
+  const cut = opened.indexOf('/', 1);
+  const first = cut === -1 ? opened.slice(1) : opened.slice(1, cut);
+
+  for (const language of languages) {
+    if (language === DEFAULT_LANGUAGE || language !== first) continue;
+    const rest = cut === -1 ? '/' : opened.slice(cut);
+    return { language, path: trimTrailingSlash(rest) || '/' };
+  }
+  return {
+    language: DEFAULT_LANGUAGE,
+    path: trimTrailingSlash(opened) || '/',
+  };
+}
+
+/**
+ * Write one of the site's own addresses in a language.
+ *
+ * The default language is written with no prefix: an address naming no language
+ * is English, which is what keeps every link handed out before the site was
+ * translated pointing at the same page.
+ * @param language - The language to write it in.
+ * @param path - The address from the site's own root, e.g. `/tutorial`.
+ * @returns The address under that language, e.g. `/fr/tutorial`.
+ */
+export function withLanguagePath(language: Language, path: string): string {
+  const opened = path.startsWith('/') ? path : `/${path}`;
+  if (language === DEFAULT_LANGUAGE) return opened;
+  return opened === '/' ? `/${language}` : `/${language}${opened}`;
+}

package/src/locales/de.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Was Sie hier tun können",
   "about.builtOn": "Aufgebaut auf",
   "about.howToCite": "Wie zu zitieren",
-  "about.licenceAndSource": "Lizenz und Quelltext",
-  "about.licence": "{license}, © cheminfo. Nutzen Sie es in einem Kurs, forken Sie es, oder übernehmen Sie einen Teil davon anderswo. Der Quelltext liegt auf {sources}.",
-  "about.foundAProblem": "Ein Problem gefunden?",
-  "about.reportIt": "Sagen Sie es uns: ein Bericht, der nennt, was Sie eingegeben haben und was zurückkam, ist die schnellste Korrektur, die es gibt. {tracker}.",
   "about.citeWork": "{what} zitieren",
   "about.built": "Erstellt {builtAt}.",
   "about.builtFromCommit": "Erstellt {builtAt} aus Commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Ein SVG, das ein Bild von {pixels} enthält: eine 3D-Szene hat keine Vektorform.",
   "download.hintSvg": "Öffnet sich mit {pixels} und bleibt in jeder Größe scharf.",
   "download.hintPng": "Gespeichert {pixels}.",
+  "download.hintCopied": "In die Zwischenablage kopiert: PNG mit {pixels}.",
+  "download.copyUnsupported": "Dieser Browser kann kein Bild in die Zwischenablage legen. Speichern Sie es stattdessen.",
   "download.size": "Größe",
   "download.sizeHelp": "Die Form, in der die Abbildung für die Datei gezeichnet wird. Sie wird neu gesetzt, sodass Achsen und Beschriftungen in diese Form passen, statt hineingedehnt zu werden. Eine Zeitschriftenspalte ist 8,5 cm breit, und ihr Text wird in der Größe gedruckt, in der er auf dem Bildschirm steht.",
   "download.sizeScreen": "Wie angezeigt",

package/src/locales/en.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "What you can do here",
   "about.builtOn": "Built on",
   "about.howToCite": "How to cite",
-  "about.licenceAndSource": "Licence and source",
-  "about.licence": "{license}, © cheminfo. Use it in a course, fork it, or lift a piece of it into something else. The sources are at {sources}.",
-  "about.foundAProblem": "Found a problem?",
-  "about.reportIt": "Tell us: a report naming what you typed and what came back is the fastest fix there is. {tracker}.",
   "about.citeWork": "Cite {what}",
   "about.built": "Built {builtAt}.",
   "about.builtFromCommit": "Built {builtAt} from commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "An SVG holding a picture of {pixels}: a 3D scene has no vector form.",
   "download.hintSvg": "Opens at {pixels}, and stays sharp at any size.",
   "download.hintPng": "Saved {pixels}.",
+  "download.hintCopied": "Copied {pixels} to the clipboard, as a PNG.",
+  "download.copyUnsupported": "This browser cannot put a picture on the clipboard. Save it instead.",
   "download.size": "Size",
   "download.sizeHelp": "The shape the figure is drawn at for the file. It is laid out again, so the axes and labels fit that shape instead of being stretched into it. A journal column is 8.5 cm wide, and its text prints at the size it reads on screen.",
   "download.sizeScreen": "As shown",

package/src/locales/es.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Lo que puede hacer aquí",
   "about.builtOn": "Construido sobre",
   "about.howToCite": "Cómo citar",
-  "about.licenceAndSource": "Licencia y código fuente",
-  "about.licence": "{license}, © cheminfo. Úselo en un curso, bifúrquelo, o llévese un trozo a otra parte. El código está en {sources}.",
-  "about.foundAProblem": "¿Ha encontrado un problema?",
-  "about.reportIt": "Díganoslo: un informe que indique lo que escribió y lo que obtuvo es la corrección más rápida que existe. {tracker}.",
   "about.citeWork": "Citar {what}",
   "about.built": "Compilado {builtAt}.",
   "about.builtFromCommit": "Compilado {builtAt} desde el commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG que contiene una imagen de {pixels}: una escena 3D no tiene forma vectorial.",
   "download.hintSvg": "Se abre a {pixels}, y se mantiene nítido a cualquier tamaño.",
   "download.hintPng": "Guardado {pixels}.",
+  "download.hintCopied": "Copiado al portapapeles: PNG de {pixels}.",
+  "download.copyUnsupported": "Este navegador no puede poner una imagen en el portapapeles. Guárdala en su lugar.",
   "download.size": "Tamaño",
   "download.sizeHelp": "La forma con la que se dibuja la figura para el archivo. Se vuelve a maquetar, de modo que los ejes y las etiquetas se ajustan a esa forma en lugar de estirarse. Una columna de revista mide 8,5 cm, y su texto se imprime al tamaño con que se lee en pantalla.",
   "download.sizeScreen": "Como se muestra",

package/src/locales/fr.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Ce que vous pouvez faire ici",
   "about.builtOn": "Construit sur",
   "about.howToCite": "Comment citer",
-  "about.licenceAndSource": "Licence et sources",
-  "about.licence": "{license}, © cheminfo. Utilisez-le dans un cours, forkez-le, ou reprenez-en un morceau ailleurs. Les sources sont sur {sources}.",
-  "about.foundAProblem": "Un problème ?",
-  "about.reportIt": "Dites-le-nous : un rapport indiquant ce que vous avez saisi et ce qui est revenu est la correction la plus rapide qui soit. {tracker}.",
   "about.citeWork": "Citer {what}",
   "about.built": "Compilé {builtAt}.",
   "about.builtFromCommit": "Compilé {builtAt} depuis le commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG contenant une image de {pixels} : une scène 3D n'a pas de forme vectorielle.",
   "download.hintSvg": "S'ouvre à {pixels}, et reste net à toute taille.",
   "download.hintPng": "Enregistré {pixels}.",
+  "download.hintCopied": "Copié dans le presse-papiers : PNG de {pixels}.",
+  "download.copyUnsupported": "Ce navigateur ne peut pas copier une image dans le presse-papiers. Enregistrez-la plutôt.",
   "download.size": "Taille",
   "download.sizeHelp": "La forme à laquelle la figure est dessinée pour le fichier. Elle est remise en page, si bien que les axes et les étiquettes s'ajustent à cette forme au lieu d'y être étirés. Une colonne de revue mesure 8,5 cm, et son texte s'imprime à la taille où il se lit à l'écran.",
   "download.sizeScreen": "Comme affichée",