react-cheminfo 0.37.0 → 0.38.0

package/src/seo/vite/prerender.ts

@@ -23,6 +23,10 @@ import { dirname, join, resolve } from 'node:path';
 import type { Logger, Plugin } from 'vite';
 
 import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
+import { CHROME_CATALOG } from '../../i18n/core/chromeCatalog.ts';
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
+import { withLanguagePath } from '../../language/core/languagePath.ts';
 import { trimTrailingSlash } from '../../router/core/address.ts';
 import type { NoscriptText } from '../core/noscript.ts';
 import { noscriptIndex } from '../core/noscript.ts';
@@ -40,8 +44,17 @@ import { PAGE_BODY_MARKER, PAGE_HEAD_MARKER, fill } from '../core/template.ts';
 export interface PrerenderOptions {
   /** The site, named or passed. */
   site: SiteRecord | SiteId;
-  /** Every address it answers, each with its title and description. */
-  routes: readonly RouteMeta[];
+  /**
+   * Every address it answers, each with its title and description.
+   *
+   * A translated site passes a function instead: the build calls it once per
+   * language and writes that language's table, so the title and the description
+   * a search result shows are in the language of the page it points at. The
+   * paths are the same in every language — an id is never translated, or a
+   * progress key, a share link and a bookmark would all break on a language
+   * switch.
+   */
+  routes: readonly RouteMeta[] | ((language: Language) => readonly RouteMeta[]);
   /**
    * Where the site is served, mount path included. Every absolute address is
    * built on it, and `robots.txt` and the `noscript` index write their paths
@@ -91,7 +104,8 @@ export interface PrerenderOptions {
    * `<!--cheminfo:body-->` at all.
    * @default true
    */
-  noscript?: boolean | NoscriptText;
+  noscript?:
+    boolean | NoscriptText | ((language: Language) => boolean | NoscriptText);
   /**
    * What each page says for itself, above the crawl path: its own heading, its
    * prose and the facts it would show anyway, read from the same data the app
@@ -103,7 +117,19 @@ export interface PrerenderOptions {
    * the bundle the browser downloads: only the build ever calls it.
    * @default undefined — every page carries the menu alone
    */
-  content?: (route: RouteMeta) => PageContent | undefined;
+  content?: (route: RouteMeta, language: Language) => PageContent | undefined;
+  /**
+   * Every language the site is written in, the default one included.
+   *
+   * The build then writes one file per address per language — `/tutorial` and
+   * `/fr/tutorial` — each with its own `lang`, title, description and
+   * canonical, the `hreflang` set tying them together, and every variant in the
+   * sitemap. That is the whole of what makes a translation findable: a site
+   * keeping its language in a parameter or in storage serves five languages at
+   * one address, and a crawler indexes one.
+   * @default [the default language]
+   */
+  languages?: readonly Language[];
 }
 
 /**
@@ -114,21 +140,43 @@ export interface PrerenderOptions {
  * is not a path, or when the origin is not an absolute address.
  */
 export function cheminfoPrerender(options: PrerenderOptions): Plugin {
-  const { site, routes, origin, robots = [] } = options;
+  const { site, origin, robots = [] } = options;
+  const languages = options.languages ?? [DEFAULT_LANGUAGE];
+  const tableFor = (language: Language): readonly RouteMeta[] =>
+    typeof options.routes === 'function'
+      ? options.routes(language)
+      : options.routes;
+
+  // Every language answers the same addresses, so each table is checked and
+  // they are checked against each other: a translation that renames a path or
+  // drops a page writes a file the sitemap of another language names, and the
+  // `hreflang` set would point at an address that is not there.
+  const routes = tableFor(DEFAULT_LANGUAGE);
   assertRoutes(routes);
-  const structuredData = structuredDataOf(options);
+  for (const language of languages) {
+    if (language === DEFAULT_LANGUAGE) continue;
+    assertSamePaths(routes, tableFor(language), language);
+  }
+
+  const structuredData = structuredDataOf(options, routes);
 
   let out = 'dist';
   let serve = false;
   let logger: Logger | null = null;
 
-  const page = (template: string, route: RouteMeta) => {
+  const page = (template: string, route: RouteMeta, language: Language) => {
     const head = fill(
-      template,
+      withHtmlLang(template, language),
       PAGE_HEAD_MARKER,
-      `${pageHeadTags({ site, routes, origin, url: route.path })}${structuredData}`,
+      `${pageHeadTags({
+        site,
+        routes: tableFor(language),
+        origin,
+        languages,
+        url: withLanguagePath(language, route.path),
+      })}${structuredData}`,
     );
-    const crawlPath = crawlPathOf(options, route);
+    const crawlPath = crawlPathOf(options, route, language, tableFor(language));
     return crawlPath === '' ? head : fill(head, PAGE_BODY_MARKER, crawlPath);
   };
 
@@ -145,37 +193,60 @@ export function cheminfoPrerender(options: PrerenderOptions): Plugin {
     // from the home route rather than shipped with its markers showing.
     transformIndexHtml: {
       order: 'post',
-      handler: (html: string) => (serve ? page(html, homeRoute(routes)) : html),
+      handler: (html: string) =>
+        serve ? page(html, homeRoute(routes), DEFAULT_LANGUAGE) : html,
     },
 
-    closeBundle() {
+    async closeBundle() {
       if (serve) return;
+      // The crawl path names the family in the chrome's own words, and every
+      // language but the default arrives as a chunk of its own, so they are all
+      // fetched before a single file is written.
+      await Promise.all(
+        languages
+          .filter((language) => language !== DEFAULT_LANGUAGE)
+          .map((language) => CHROME_CATALOG.load(language)),
+      );
+
       const template = readFileSync(join(out, 'index.html'), 'utf8');
 
-      const write = (route: RouteMeta, file: string) => {
+      const write = (route: RouteMeta, language: Language, file: string) => {
         mkdirSync(dirname(file), { recursive: true });
-        writeFileSync(file, page(template, route));
+        writeFileSync(file, page(template, route, language));
       };
 
-      let root = false;
-      for (const route of routes) {
-        const address = trimTrailingSlash(route.path);
-        if (address === '/') root = true;
-        write(
-          route,
-          address === '/'
-            ? join(out, 'index.html')
-            : join(out, address.slice(1), 'index.html'),
-        );
+      let written = 0;
+      for (const language of languages) {
+        const table = tableFor(language);
+        let root = false;
+        for (const route of table) {
+          const address = trimTrailingSlash(
+            withLanguagePath(language, route.path),
+          );
+          if (address === '/') root = true;
+          write(
+            route,
+            language,
+            address === '/'
+              ? join(out, 'index.html')
+              : join(out, address.slice(1), 'index.html'),
+          );
+          written++;
+        }
+        // The file a static server hands out for the mount itself. A table
+        // naming no root would otherwise leave the template vite built, and
+        // ship a site whose front page carries its markers instead of a head.
+        // A language other than the default already has its own front page at
+        // `/<language>`, so only the unprefixed one is ever missing.
+        if (!root && language === DEFAULT_LANGUAGE) {
+          write(homeRoute(table), language, join(out, 'index.html'));
+          written++;
+        }
       }
-      // The file a static server hands out for the mount itself. A table naming
-      // no root would otherwise leave the template vite built, and ship a site
-      // whose front page carries its markers instead of a head.
-      if (!root) write(homeRoute(routes), join(out, 'index.html'));
 
       writeFileSync(
         join(out, 'sitemap.xml'),
-        sitemapXml({ site, routes, origin }),
+        sitemapXml({ site, routes, origin, languages }),
       );
       if (robots !== false) {
         writeFileSync(
@@ -184,17 +255,22 @@ export function cheminfoPrerender(options: PrerenderOptions): Plugin {
         );
       }
 
+      const spoken =
+        languages.length > 1 ? ` in ${languages.length} languages` : '';
       logger?.info(
-        `${routes.length} pages prerendered, and listed in sitemap.xml`,
+        `${written} pages prerendered${spoken}, and listed in sitemap.xml`,
       );
     },
   };
 }
 
-function structuredDataOf(options: PrerenderOptions): string {
+function structuredDataOf(
+  options: PrerenderOptions,
+  routes: readonly RouteMeta[],
+): string {
   const { category, ...rest } = options;
   if (category === false) return '';
-  const { site, routes, origin } = rest;
+  const { site, origin } = rest;
   const { operatingSystem, description, browserRequirements, currency } = rest;
   return `\n${structuredDataScript({
     site,
@@ -208,16 +284,64 @@ function structuredDataOf(options: PrerenderOptions): string {
   })}`;
 }
 
-function crawlPathOf(options: PrerenderOptions, route: RouteMeta): string {
-  const { site, routes, origin, noscript = true } = options;
+function crawlPathOf(
+  options: PrerenderOptions,
+  route: RouteMeta,
+  language: Language,
+  routes: readonly RouteMeta[],
+): string {
+  const { site, origin } = options;
+  // The crawl path of a translated page is that language's: its heading, its
+  // intro and the label under every link. Declared as a function of the
+  // language, the site writes each of them from its own catalog; declared as a
+  // record, it is the same words on every language, which is what a site that
+  // speaks one wants and is what it used to be.
+  const declared = options.noscript ?? true;
+  const noscript =
+    typeof declared === 'function' ? declared(language) : declared;
   if (noscript === false) return '';
-  const content = options.content?.(route);
+  const content = options.content?.(route, language);
   const { routes: listed, ...prose } = noscript === true ? {} : noscript;
+  // The crawl path of a translated page links to that language's addresses: a
+  // French page listing the English ones is a crawler's only route out of it,
+  // and it would lead straight back out of the translation.
+  const menu = (listed ?? routes).map((entry) => ({
+    ...entry,
+    path: withLanguagePath(language, entry.path),
+  }));
   return noscriptIndex({
     site,
     origin,
     ...prose,
-    routes: listed ?? routes,
+    routes: menu,
     content,
+    language,
   });
 }
+
+// Two tables of one site answer the same addresses. A translated table that
+// renames or drops a path leaves the `hreflang` set of every other language
+// pointing at an address nothing wrote, which is a soft 404 on each of them.
+function assertSamePaths(
+  source: readonly RouteMeta[],
+  translated: readonly RouteMeta[],
+  language: Language,
+): void {
+  const wanted = source.map((route) => route.path).join(' ');
+  const written = translated.map((route) => route.path).join(' ');
+  if (wanted !== written) {
+    throw new Error(
+      `the ${language} route table answers different addresses than the source one: an address is the same in every language`,
+    );
+  }
+}
+
+// The template is written in the default language, so each file says which
+// language it is actually in. A page whose `lang` lies is read aloud wrong and
+// offered to the wrong reader.
+function withHtmlLang(template: string, language: Language): string {
+  return template.replace(
+    /<html(?<attributes>[^>]*)\slang="[^"]*"/i,
+    `<html$<attributes> lang="${language}"`,
+  );
+}

package/src/ui.ts

@@ -24,6 +24,7 @@ export * from './parallel/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
 export * from './periodic/ui/index.ts';
 export * from './projection/ui/index.ts';
+export * from './range/ui/index.ts';
 export * from './router/ui/index.ts';
 export * from './scatter/ui/index.ts';
 export * from './scatter3d/ui/index.ts';

package/styles/chrome.css

@@ -570,6 +570,141 @@ select,
   }
 }
 
+/* ── Range slider ────────────────────────────────────────────────────────── */
+
+.range-slider {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+/* As tall as the clear button, so the row does not jump when it appears. */
+.range-slider__head {
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.range-slider__label {
+  color: var(--text);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.range-slider__unit {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+/* A range's two handles stand half a handle past the track at either end, so
+   the track is inset by that much to keep them inside the box. */
+.range-slider__track {
+  padding: 0 8px;
+}
+
+.range-slider__histogram {
+  display: block;
+  width: 100%;
+  height: 1.75rem;
+}
+
+.range-slider__bars {
+  fill: var(--border-strong);
+}
+
+.range-slider__bars--kept {
+  fill: color-mix(in oklab, var(--accent) 60%, var(--surface));
+}
+
+/* Blueprint paints the track in its own grey and the kept part in its own
+   blue, which are the two colours the family never uses. */
+.range-slider .bp6-slider {
+  min-width: 0;
+}
+
+.range-slider .bp6-slider-progress {
+  background: var(--border);
+}
+
+.range-slider .bp6-slider-progress.bp6-intent-primary {
+  background: var(--accent);
+}
+
+.range-slider .bp6-slider-handle {
+  background: var(--surface);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    var(--shadow-sm);
+}
+
+.range-slider .bp6-slider-handle:hover {
+  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
+}
+
+.range-slider .bp6-slider-handle.bp6-active {
+  background: color-mix(in oklab, var(--accent) 28%, var(--surface));
+}
+
+.range-slider .bp6-slider-handle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.range-slider .bp6-disabled .bp6-slider-handle {
+  background: var(--surface-sunken);
+  box-shadow: 0 0 0 1px var(--border-strong);
+}
+
+.range-slider__values {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+/* A value reads as text and types like a box: the cursor says which. */
+.range-slider__value {
+  padding: 0.1rem 0.35rem;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--text);
+  cursor: text;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.range-slider__value:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.range-slider__value:disabled {
+  cursor: default;
+}
+
+/* An open side shows the end of the track, faint: the scale without a bound. */
+.range-slider__value--open {
+  color: var(--text-faint);
+}
+
+@media (hover: hover) {
+  .range-slider__value:not(:disabled):hover {
+    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
+  }
+}
+
+.range-slider__editor {
+  width: 6.5rem;
+}
+
+.range-slider__editor--max .bp6-input {
+  text-align: right;
+}
+
 /* ── Help ────────────────────────────────────────────────────────────────── */
 
 /*