react-cheminfo 0.7.0 → 0.9.0

package/README.md

@@ -37,7 +37,9 @@ only when it drags a heavy dependency behind it.
 | `react-cheminfo/vite`              | the prerender plugin and the OG card              | nothing; React on the card |
 | `react-cheminfo/orbital`           | the 3D atomic-orbital viewer                      | React, molstar             |
 | `react-cheminfo/structure`         | the structure editor and renderer                 | React, react-ocl, OCL      |
+| `react-cheminfo/slides`            | the deck format and the slideshow player          | React, react-markdown      |
 | `react-cheminfo/styles/chrome.css` | the shared tokens and site-header stylesheet      | nothing                    |
+| `react-cheminfo/styles/slides.css` | the deck stylesheet, themed on the site's colours | nothing                    |
 
 A backend serving an RIS endpoint, a prerender script writing a sitemap, and
 every unit test of that logic therefore load no React at all — and a worker
@@ -69,10 +71,13 @@ through a wildcard subpath exactly as `react-science` serves its own.
 | **Widgets**             | `CREDITS`, `credits`                                                                                                                                                                                              | `ErrorBoundary`, `CollapsibleSection`, `CapsuleFilter`, `HelpTooltip`, `CreditsList`                                                             |
 | **Hooks & state**       | `createWorkerChannel`                                                                                                                                                                                             | `persistBucket`, `useDebouncedValue`, `useContainerSize`, `useListKeyboardNavigation`, `useDisclosure`                                           |
 | **Chemistry**           | `atomicOrbitalsOf`, `configurationOf`, `classifyMolfile`, `readStructure`                                                                                                                                         | `AtomicOrbitalViewer` (`/orbital`), `StructureEditor`, `Structure` (`/structure`)                                                                |
+| **About**               | `resolveAbout`, `aboutProblems`                                                                                                                                                                                   | `AboutPage`                                                                                                                                      |
+| **Slideshows**          | `parseTalk`, `splitDemoLinks`, `slideActionForKey`, `parseTalkOrigin`, `buildTalkManifest` (all `/slides`)                                                                                                        | `Slideshow`, `SlideView`, `TalkList`, `BackToSlides` (all `/slides`), `cheminfoTalks` (`/vite`)                                                  |
+| **Token guard**         | `findTokenViolations`                                                                                                                                                                                             | `cheminfo-check-tokens` (the bin)                                                                                                                |
 | **Periodic table**      | `PERIODIC_ELEMENTS`, `elementBySymbol`, `elementByAtomicNumber`, `cellOf`, `placedElements`, `elementByArrowKey`, `categorySwatch`, `CATEGORY_LABELS`                                                             | `PeriodicTable`, `ElementCell`, `CategoryLegend`                                                                                                 |
 
-Everything in that table is exported from `./core`, `./ui`, `./vite` or
-`./structure` and nothing else is: the sub-components a component is built
+Everything in that table is exported from `./core`, `./ui`, `./slides`,
+`./vite` or `./structure` and nothing else is: the sub-components a component is built
 from, the parsers a helper calls and the internals of a hook stay inside the
 package, reachable only by their own path. If it is exported, it is supported.
 
@@ -260,6 +265,59 @@ The colours a name is set in are the site's own and are not retuned to reach the
 4.5:1 of body text: ChemCalc's teal and NMRium's orange both land just under it,
 which is why a name is set bold, where 3:1 is the threshold.
 
+## Carrying talks
+
+A deck is one Markdown file in the repository of the site whose subject it
+teaches — front matter, slides separated by a `---` line, and a
+`<!-- layout: … -->` comment where the default is not what is wanted. The
+format and the player are `react-cheminfo/slides`; the addresses and the
+authoring rules are in `rules/slideshows.md`.
+
+```tsx
+import { parseTalk, Slideshow } from 'react-cheminfo/slides';
+import 'react-cheminfo/styles/slides.css';
+
+const talk = parseTalk(source);
+
+<Slideshow
+  talk={talk}
+  talkId="20260824_IMSC"
+  index={slide}
+  onIndex={(next) => navigate(`/talks/${id}?slide=${next}`)}
+  layouts={{ octochemdb: OctoChemDbFlow }}
+/>;
+```
+
+The index is **controlled**: the site owns the address, so a link can open one
+slide and a demo link can come back to it. Arrow keys, space and PageUp/Down
+navigate, `Home` and `End` jump, `f` is fullscreen, `b` and `w` blank the
+screen, `n` shows the speaker's notes. A layout name the player does not know
+falls back to `content` rather than breaking a deck in front of a room, and a
+site adds its own through `layouts`.
+
+The `embed` layout puts a **live tool** on the slide — the last bare URL of the
+body is framed — which is what our `?embed` mode exists for.
+
+The format itself is framework-free and is also exported from
+`react-cheminfo/core`, so a backend gathering the family's manifests reads them
+without loading React.
+
+A site that fullscreens its own shell — so a slide can open the live tool and
+come back still presenting — passes `fullscreen={{ isFullscreen, onToggle }}`,
+and the `f` key and the bar's button drive that instead of the player's own
+element.
+
+Publishing a site's decks to the family is one plugin:
+
+```ts
+import { cheminfoTalks } from 'react-cheminfo/vite';
+
+plugins: [cheminfoTalks({ site: 'chemcalc' })];
+```
+
+It writes `dist/talks.json` and `dist/talks/<id>.md`, which is what
+learn.cheminfo.org reads to list and play every site's talks beside its own.
+
 ## Prerendering a site
 
 A static site has no server to rewrite a head per request, so a crawler gets

package/bin/check-tokens.mjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+/*
+ * Report every colour a site writes that belongs to the family rather than to
+ * the site: Blueprint's greys and blues, the family's own token values re-typed
+ * as literals, and a palette declared by hand instead of rendered from
+ * `<SiteTheme siteId>`.
+ *
+ * Wire it as an npm script:
+ *   "check-tokens": "node node_modules/react-cheminfo/bin/check-tokens.mjs src"
+ *
+ * Usage: check-tokens.mjs [directory...] [--allow=#aabbcc,#ddeeff] [--quiet]
+ *   directory   what to walk, `src` when none is given
+ *   --allow     colours the project legitimately owns
+ *   --quiet     say nothing when the scan is clean
+ *
+ * Exits 1 when anything is reported, 2 when it was called wrongly, 0 otherwise.
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import process from 'node:process';
+
+import { findTokenViolations } from '../lib/core.js';
+
+const EXTENSIONS = new Set(['.css', '.ts', '.tsx', '.jsx', '.js']);
+const SKIPPED = new Set(['node_modules', 'dist', 'lib', 'coverage']);
+const ALLOW_PREFIX = '--allow=';
+
+const roots = [];
+const allow = [];
+let quiet = false;
+
+for (const argument of process.argv.slice(2)) {
+  if (argument.startsWith(ALLOW_PREFIX)) {
+    for (const colour of argument.slice(ALLOW_PREFIX.length).split(',')) {
+      if (colour.trim() !== '') allow.push(colour.trim());
+    }
+  } else if (argument === '--quiet') {
+    quiet = true;
+  } else if (argument.startsWith('-')) {
+    fail(`unknown option: ${argument}`);
+  } else {
+    roots.push(argument);
+  }
+}
+if (roots.length === 0) roots.push('src');
+
+const files = [];
+for (const root of roots) collect(root, files);
+
+const violations = findTokenViolations(files, { allow });
+let report = '';
+for (const violation of violations) {
+  report += `${violation.file}:${violation.line}:${violation.column}  ${violation.kind}  ${violation.text}  -> ${violation.hint}\n`;
+}
+
+if (violations.length > 0) {
+  report += `${count(violations.length, 'violation')} in ${count(files.length, 'file')}\n`;
+  process.stdout.write(report);
+  process.exit(1);
+}
+if (!quiet) {
+  process.stdout.write(
+    `no token violation in ${count(files.length, 'file')}\n`,
+  );
+}
+
+/**
+ * Add every file worth reading under a path to the list, walking directories
+ * and leaving the generated ones alone.
+ * @param {string} path - A file or a directory.
+ * @param {Array<{ path: string, text: string }>} files - Collected so far.
+ */
+function collect(path, files) {
+  const stats = statSync(path, { throwIfNoEntry: false });
+  if (stats === undefined) fail(`no such path: ${path}`);
+  if (stats.isDirectory()) {
+    for (const entry of readdirSync(path, { withFileTypes: true })) {
+      if (entry.name.startsWith('.') || SKIPPED.has(entry.name)) continue;
+      collect(join(path, entry.name), files);
+    }
+    return;
+  }
+  if (!EXTENSIONS.has(extname(path))) return;
+  files.push({ path, text: readFileSync(path, 'utf8') });
+}
+
+/**
+ * A count with its noun, so a summary line reads as a sentence.
+ * @param {number} total - How many.
+ * @param {string} noun - What of, in the singular.
+ * @returns {string} The two, with the plural `s` when it is needed.
+ */
+function count(total, noun) {
+  return `${total} ${noun}${total === 1 ? '' : 's'}`;
+}
+
+/**
+ * Stop on a call the script cannot honour, which is not a clean scan.
+ * @param {string} message - What was wrong with it.
+ * @returns {never} It never comes back: the process ends here.
+ */
+function fail(message) {
+  process.stderr.write(`check-tokens: ${message}\n`);
+  process.exit(2);
+}

package/lib/about/core/about.d.ts

@@ -0,0 +1,95 @@
+import type { CitedWork } from '../../citation/core/works.ts';
+import type { CreditEntry, CreditId } from '../../credits/core/credits.ts';
+import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+/**
+ * What a site says about itself: the one page a visitor opens to find out what
+ * the tool is, what it stands on, and who to tell when it breaks.
+ *
+ * Every field is content, never markup. A site writes this record and the page
+ * is drawn from it, which is what keeps fourteen About pages in one order and
+ * one voice — the shape they were in before was fourteen hand-written pages,
+ * each crediting a different half of what it runs on.
+ */
+export interface AboutContent {
+    /** The site the page belongs to. */
+    siteId: SiteId;
+    /** One sentence: what this tool is. */
+    what: string;
+    /**
+     * At most two short paragraphs of context — what the site replaces, where
+     * its numbers come from, what it deliberately does not do.
+     * @default undefined
+     */
+    paragraphs?: readonly string[];
+    /** Three to six one-line entries: what a visitor can do here. */
+    can: readonly string[];
+    /** Ids into the shared credits registry, in display order. */
+    credits: readonly CreditId[];
+    /**
+     * Works to cite, from the citation module.
+     * @default undefined — the site asks for no citation of its own
+     */
+    cite?: readonly CitedWork[];
+    /**
+     * Licence the site itself is published under.
+     * @default 'MIT'
+     */
+    license?: string;
+    /**
+     * Where the sources live.
+     * @default the repository of the ECOSYSTEM_SITES record
+     */
+    repository?: string;
+    /**
+     * The running version, when the site knows it.
+     * @default undefined
+     */
+    version?: string;
+    /**
+     * Where a problem is reported.
+     * @default the repository's /issues
+     */
+    issues?: string;
+}
+/**
+ * The same record with nothing left to look up: every default filled in, and
+ * every credit id replaced by the entry it names.
+ */
+export interface ResolvedAbout {
+    /** The site's own record, which carries its name, tagline and colours. */
+    site: EcosystemSite;
+    what: string;
+    /** The context paragraphs, empty when the site writes none. */
+    paragraphs: readonly string[];
+    can: readonly string[];
+    /** The borrowed works themselves, in the order the site names them. */
+    credits: CreditEntry[];
+    /** The works to cite, empty when the site asks for none. */
+    cite: readonly CitedWork[];
+    license: string;
+    repository: string;
+    /** The running version, or `undefined` when the site does not know it. */
+    version: string | undefined;
+    issues: string;
+}
+/**
+ * Fill in what a site left to the family, and resolve what it named.
+ * @param content - What the site wrote about itself.
+ * @returns The record the About page is drawn from.
+ * @throws {Error} When the site is not one of the family, or when a credit id
+ *   is not in the registry: an About page that silently drops a borrowed work
+ *   credits nobody.
+ */
+export declare function resolveAbout(content: AboutContent): ResolvedAbout;
+/**
+ * What is wrong with a record before anyone reads the page it draws.
+ *
+ * Short and efficient prose is the house style, and prose is exactly what no
+ * test, lint rule or type ever checks: a `what` that runs to a paragraph and a
+ * `can` list of a dozen lines both compile. This is where that is caught, so a
+ * site can assert it in its own suite rather than discover it in review.
+ * @param content - What the site wrote about itself.
+ * @returns One line per problem, in reading order; empty when there is none.
+ */
+export declare function aboutProblems(content: AboutContent): string[];
+//# sourceMappingURL=about.d.ts.map

package/lib/about/core/about.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"about.d.ts","sourceRoot":"","sources":["../../../src/about/core/about.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAG3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAE3E;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,iEAAiE;IACjE,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,8DAA8D;IAC9D,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,uEAAuE;IACvE,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,4DAA4D;IAC5D,IAAI,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,CAgBjE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,EAAE,CA8C7D"}

package/lib/about/core/about.js

@@ -0,0 +1,78 @@
+import { credits } from "../../credits/core/credits.js";
+import { siteById } from "../../ecosystem/core/lookup.js";
+/**
+ * Fill in what a site left to the family, and resolve what it named.
+ * @param content - What the site wrote about itself.
+ * @returns The record the About page is drawn from.
+ * @throws {Error} When the site is not one of the family, or when a credit id
+ *   is not in the registry: an About page that silently drops a borrowed work
+ *   credits nobody.
+ */
+export function resolveAbout(content) {
+    const site = siteById(content.siteId);
+    const repository = content.repository ?? site.repository;
+    return {
+        site,
+        what: content.what,
+        paragraphs: content.paragraphs ?? [],
+        can: content.can,
+        credits: credits(content.credits),
+        cite: content.cite ?? [],
+        license: content.license ?? DEFAULT_LICENSE,
+        repository,
+        version: content.version,
+        issues: content.issues ?? `${withoutTrailingSlash(repository)}/issues`,
+    };
+}
+/**
+ * What is wrong with a record before anyone reads the page it draws.
+ *
+ * Short and efficient prose is the house style, and prose is exactly what no
+ * test, lint rule or type ever checks: a `what` that runs to a paragraph and a
+ * `can` list of a dozen lines both compile. This is where that is caught, so a
+ * site can assert it in its own suite rather than discover it in review.
+ * @param content - What the site wrote about itself.
+ * @returns One line per problem, in reading order; empty when there is none.
+ */
+export function aboutProblems(content) {
+    const problems = [];
+    if (content.what.length > WHAT_LIMIT) {
+        problems.push(`\`what\` is ${content.what.length} characters: one sentence of at most ${WHAT_LIMIT} says what the tool is.`);
+    }
+    const can = content.can;
+    if (can.length < CAN_MIN || can.length > CAN_MAX) {
+        problems.push(`\`can\` lists ${can.length} entries: between ${CAN_MIN} and ${CAN_MAX} is what a visitor reads before deciding to stay.`);
+    }
+    for (let index = 0; index < can.length; index++) {
+        const line = can[index] ?? '';
+        if (line.length > CAN_LINE_LIMIT) {
+            problems.push(`\`can\` entry ${index + 1} is ${line.length} characters: one line of at most ${CAN_LINE_LIMIT}, not a sentence about it.`);
+        }
+    }
+    const paragraphs = content.paragraphs ?? [];
+    if (paragraphs.length > PARAGRAPH_MAX) {
+        problems.push(`\`paragraphs\` holds ${paragraphs.length}: at most ${PARAGRAPH_MAX} short paragraphs of context, and the rest belongs in the README.`);
+    }
+    for (let index = 0; index < paragraphs.length; index++) {
+        const paragraph = paragraphs[index] ?? '';
+        if (paragraph.length > PARAGRAPH_LIMIT) {
+            problems.push(`paragraph ${index + 1} is ${paragraph.length} characters: at most ${PARAGRAPH_LIMIT}, or it is documentation rather than context.`);
+        }
+    }
+    if (content.credits.length === 0) {
+        problems.push('`credits` is empty: every page of ours stands on borrowed work, and naming it is what the section is for.');
+    }
+    return problems;
+}
+/** What a site is published under unless it says otherwise. */
+const DEFAULT_LICENSE = 'MIT';
+const WHAT_LIMIT = 160;
+const CAN_MIN = 3;
+const CAN_MAX = 6;
+const CAN_LINE_LIMIT = 90;
+const PARAGRAPH_MAX = 2;
+const PARAGRAPH_LIMIT = 400;
+function withoutTrailingSlash(url) {
+    return url.endsWith('/') ? url.slice(0, -1) : url;
+}
+//# sourceMappingURL=about.js.map

package/lib/about/core/about.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about.js","sourceRoot":"","sources":["../../../src/about/core/about.ts"],"names":[],"mappings":"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"}

package/lib/about/core/index.d.ts

@@ -0,0 +1,3 @@
+export type { AboutContent, ResolvedAbout } from './about.ts';
+export { aboutProblems, resolveAbout } from './about.ts';
+//# sourceMappingURL=index.d.ts.map

package/lib/about/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/about/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/lib/about/core/index.js

@@ -0,0 +1,2 @@
+export { aboutProblems, resolveAbout } from "./about.js";
+//# sourceMappingURL=index.js.map

package/lib/about/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/about/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/lib/about/ui/AboutCitations.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import type { CitedWork } from '../../citation/core/works.ts';
+export interface AboutCitationsProps {
+    /** The works the site asks for, in the order it names them. */
+    works: readonly CitedWork[];
+}
+/**
+ * What to cite, and what citing each work credits: a reader handed two
+ * references has to be told which is which before they can pick one.
+ * @param props - See {@link AboutCitationsProps}.
+ * @returns The works, each with its reference and its DOI.
+ */
+export declare function AboutCitations(props: AboutCitationsProps): ReactElement;
+//# sourceMappingURL=AboutCitations.d.ts.map

package/lib/about/ui/AboutCitations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutCitations.d.ts","sourceRoot":"","sources":["../../../src/about/ui/AboutCitations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CA8BvE"}

package/lib/about/ui/AboutCitations.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_CITATION_STYLE } from "../../citation/core/formats.js";
+import { doiUrl } from "../../citation/core/reference.js";
+import { CitationPreview } from "../../citation/ui/CitationPreview.js";
+/**
+ * What to cite, and what citing each work credits: a reader handed two
+ * references has to be told which is which before they can pick one.
+ * @param props - See {@link AboutCitationsProps}.
+ * @returns The works, each with its reference and its DOI.
+ */
+export function AboutCitations(props) {
+    const { works } = props;
+    return (_jsx("div", { className: "about-citations", style: LIST_STYLE, children: works.map((work) => (_jsxs("div", { className: "about-citation", children: [_jsx("div", { style: WHAT_STYLE, children: work.what }), work.note === undefined ? null : (_jsx("p", { style: NOTE_STYLE, children: work.note })), _jsx("div", { style: PLATE_STYLE, children: _jsx(CitationPreview, { reference: work.reference, format: "text", style: DEFAULT_CITATION_STYLE }) }), _jsxs("a", { href: doiUrl(work.reference), target: "_blank", rel: "noopener noreferrer", style: DOI_STYLE, children: ["doi:", work.reference.doi] })] }, work.reference.doi))) }));
+}
+const LIST_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 14,
+};
+const WHAT_STYLE = { fontWeight: 600 };
+const NOTE_STYLE = {
+    margin: '2px 0 6px',
+    color: 'var(--text-muted)',
+    fontSize: 13,
+};
+// The preview is set in the light ink of the tooltip it was drawn for, so it
+// is given the dark plate that ink is legible on.
+const PLATE_STYLE = {
+    padding: '8px 10px',
+    borderRadius: 'var(--radius)',
+    background: 'var(--text)',
+    overflow: 'auto',
+};
+const DOI_STYLE = {
+    display: 'inline-block',
+    marginTop: 6,
+    color: 'var(--accent)',
+    fontSize: 12,
+};
+//# sourceMappingURL=AboutCitations.js.map

package/lib/about/ui/AboutCitations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutCitations.js","sourceRoot":"","sources":["../../../src/about/ui/AboutCitations.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAuC,CAAC;AAOxE;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,UAAU,YAC/C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAA8B,SAAS,EAAC,gBAAgB,aACtD,cAAK,KAAK,EAAE,UAAU,YAAG,IAAI,CAAC,IAAI,GAAO,EACxC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,YAAG,KAAK,EAAE,UAAU,YAAG,IAAI,CAAC,IAAI,GAAK,CACtC,EACD,cAAK,KAAK,EAAE,WAAW,YACrB,KAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,sBAAsB,GAC7B,GACE,EACN,aACE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAC5B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,KAAK,EAAE,SAAS,qBAEX,IAAI,CAAC,SAAS,CAAC,GAAG,IACrB,KAnBI,IAAI,CAAC,SAAS,CAAC,GAAG,CAoBtB,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;CACyB,CAAC;AAEnC,MAAM,UAAU,GAAG,EAAE,UAAU,EAAE,GAAG,EAAmC,CAAC;AAExE,MAAM,UAAU,GAAG;IACjB,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;CACoB,CAAC;AAEnC,6EAA6E;AAC7E,kDAAkD;AAClD,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,MAAM;CACgB,CAAC;AAEnC,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE,EAAE;CACoB,CAAC"}

package/lib/about/ui/AboutPage.d.ts

@@ -0,0 +1,32 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { AboutContent } from '../core/about.ts';
+export interface AboutPageProps {
+    /** What the site says about itself. */
+    content: AboutContent;
+    /**
+     * Class the page carries, in addition to `about-page`.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * The one section a site adds of its own — where its numbers come from, the
+     * limitation it wants named. It lands under the context paragraphs, so the
+     * credits, the citation and the licence keep the place a reader expects.
+     * @default undefined
+     */
+    children?: ReactNode;
+}
+/**
+ * The About page of a site of the family: what the tool is, what a visitor can
+ * do with it, what it is built on, how to cite it, and where to report a
+ * problem — always in that order.
+ *
+ * The order is the point. A reader who has read one of our About pages knows
+ * where the credits are on the other thirteen, and a site that writes its own
+ * page is a site that will forget one of these sections.
+ * @param props - See {@link AboutPageProps}.
+ * @returns The page.
+ * @throws {Error} When the record names a site or a credit that does not exist.
+ */
+export declare function AboutPage(props: AboutPageProps): ReactElement;
+//# sourceMappingURL=AboutPage.d.ts.map

package/lib/about/ui/AboutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../src/about/ui/AboutPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMrD,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,OAAO,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA6E7D"}

package/lib/about/ui/AboutPage.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreditsList } from "../../credits/ui/CreditsList.js";
+import { Wordmark } from "../../ecosystem/ui/Wordmark.js";
+import { SiteMark } from "../../ecosystem/ui/marks.js";
+import { resolveAbout } from "../core/about.js";
+import { AboutCitations } from "./AboutCitations.js";
+import { AboutSection } from "./AboutSection.js";
+/**
+ * The About page of a site of the family: what the tool is, what a visitor can
+ * do with it, what it is built on, how to cite it, and where to report a
+ * problem — always in that order.
+ *
+ * The order is the point. A reader who has read one of our About pages knows
+ * where the credits are on the other thirteen, and a site that writes its own
+ * page is a site that will forget one of these sections.
+ * @param props - See {@link AboutPageProps}.
+ * @returns The page.
+ * @throws {Error} When the record names a site or a credit that does not exist.
+ */
+export function AboutPage(props) {
+    const { content, className, children } = props;
+    const about = resolveAbout(content);
+    const site = about.site;
+    return (_jsxs("div", { className: className === undefined ? 'about-page' : `about-page ${className}`, style: PAGE_STYLE, children: [_jsxs("header", { className: "about-hero", style: HERO_STYLE, children: [_jsx(SiteMark, { siteId: site.id, size: 56 }), _jsxs("div", { children: [_jsx("h1", { style: NAME_STYLE, children: _jsx(Wordmark, { siteId: site.id, size: 26 }) }), _jsx("p", { style: TAGLINE_STYLE, children: site.tagline }), _jsx("p", { style: WHAT_STYLE, children: about.what })] })] }), _jsx(AboutSection, { title: "What you can do here", className: "about-can", children: _jsx("ul", { style: CAN_LIST_STYLE, children: about.can.map((line) => (_jsx("li", { children: line }, line))) }) }), about.paragraphs.length === 0 ? null : (_jsx(AboutSection, { className: "about-context", children: about.paragraphs.map((paragraph, index) => (_jsx("p", { style: index === 0 ? FIRST_PARAGRAPH_STYLE : PARAGRAPH_STYLE, children: paragraph }, paragraph))) })), children, _jsx(AboutSection, { title: "Built on", className: "about-credits", children: _jsx(CreditsList, { entries: about.credits }) }), about.cite.length === 0 ? null : (_jsx(AboutSection, { title: "How to cite", className: "about-cite", children: _jsx(AboutCitations, { works: about.cite }) })), _jsxs(AboutSection, { title: "Licence and source", className: "about-licence", children: [_jsxs("p", { style: FIRST_PARAGRAPH_STYLE, children: [about.license, ", \u00A9 cheminfo. Use it in a course, fork it, or lift a piece of it into something else. The sources are at", ' ', _jsx(ExternalLink, { href: about.repository }), "."] }), about.version === undefined ? null : (_jsxs("p", { style: PARAGRAPH_STYLE, children: ["This page is running version ", about.version, "."] }))] }), _jsx(AboutSection, { title: "Found a problem?", className: "about-issues", children: _jsxs("p", { style: FIRST_PARAGRAPH_STYLE, children: ["Tell us: a report naming what you typed and what came back is the fastest fix there is. ", _jsx(ExternalLink, { href: about.issues }), "."] }) })] }));
+}
+function ExternalLink(props) {
+    const { href } = props;
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: LINK_STYLE, children: href.replace(/^https?:\/\//, '') }));
+}
+const PAGE_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: 980,
+    // Centred, because the About is read on its own rather than beside a tool.
+    marginInline: 'auto',
+    gap: 10,
+};
+const HERO_STYLE = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    padding: 16,
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--radius)',
+    background: 'var(--surface)',
+    gap: 16,
+    lineHeight: 1.55,
+};
+const NAME_STYLE = {
+    margin: 0,
+    fontSize: 26,
+    fontWeight: 700,
+};
+const TAGLINE_STYLE = {
+    margin: '2px 0 8px',
+    color: 'var(--text-muted)',
+    fontSize: 14,
+};
+const WHAT_STYLE = { margin: 0 };
+const CAN_LIST_STYLE = {
+    margin: 0,
+    paddingLeft: 20,
+};
+const FIRST_PARAGRAPH_STYLE = {
+    margin: 0,
+};
+const PARAGRAPH_STYLE = {
+    margin: '8px 0 0',
+};
+const LINK_STYLE = { color: 'var(--accent)' };
+//# sourceMappingURL=AboutPage.js.map

package/lib/about/ui/AboutPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.js","sourceRoot":"","sources":["../../../src/about/ui/AboutPage.tsx"],"names":[],"mappings":"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"}

package/lib/about/ui/AboutSection.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface AboutSectionProps {
+    /**
+     * What the section is called, written as its heading.
+     * @default undefined — the section carries no heading
+     */
+    title?: string;
+    /**
+     * Class the section carries, in addition to `about-section`.
+     * @default undefined
+     */
+    className?: string;
+    /** What the section holds. */
+    children: ReactNode;
+}
+/**
+ * One block of the About page: a heading and what sits under it, on the
+ * family's own surface rather than on a component library's card.
+ * @param props - See {@link AboutSectionProps}.
+ * @returns The section.
+ */
+export declare function AboutSection(props: AboutSectionProps): ReactElement;
+//# sourceMappingURL=AboutSection.d.ts.map

package/lib/about/ui/AboutSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutSection.d.ts","sourceRoot":"","sources":["../../../src/about/ui/AboutSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAcnE"}

package/lib/about/ui/AboutSection.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One block of the About page: a heading and what sits under it, on the
+ * family's own surface rather than on a component library's card.
+ * @param props - See {@link AboutSectionProps}.
+ * @returns The section.
+ */
+export function AboutSection(props) {
+    const { title, className, children } = props;
+    return (_jsxs("section", { className: className === undefined ? 'about-section' : `about-section ${className}`, style: SECTION_STYLE, children: [title === undefined ? null : _jsx("h2", { style: TITLE_STYLE, children: title }), children] }));
+}
+const SECTION_STYLE = {
+    padding: 16,
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--radius)',
+    background: 'var(--surface)',
+    // An About page is printed as often as it is read, and a section split over
+    // two pages loses the heading that says what its list is.
+    breakInside: 'avoid',
+    lineHeight: 1.55,
+};
+const TITLE_STYLE = {
+    margin: '0 0 8px',
+    color: 'var(--accent)',
+    fontSize: 16,
+    fontWeight: 600,
+};
+//# sourceMappingURL=AboutSection.js.map

package/lib/about/ui/AboutSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutSection.js","sourceRoot":"","sources":["../../../src/about/ui/AboutSection.tsx"],"names":[],"mappings":";AAiBA;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,OAAO,CACL,mBACE,SAAS,EACP,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,SAAS,EAAE,EAE1E,KAAK,EAAE,aAAa,aAEnB,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAI,KAAK,EAAE,WAAW,YAAG,KAAK,GAAM,EACjE,QAAQ,IACD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,yBAAyB;IACjC,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,gBAAgB;IAC5B,4EAA4E;IAC5E,0DAA0D;IAC1D,WAAW,EAAE,OAAO;IACpB,UAAU,EAAE,IAAI;CACgB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC"}