react-cheminfo 0.17.0 → 0.19.0

package/src/about/core/about.ts

@@ -63,6 +63,13 @@ export interface AboutContent {
    * @default the repository of the ECOSYSTEM_SITES record
    */
   repository?: string;
+  /**
+   * Whether a visitor can open that repository. A site naming a repository of
+   * its own says so here too, since the family's record then describes another
+   * one.
+   * @default the `publicRepository` of the ECOSYSTEM_SITES record
+   */
+  publicRepository?: boolean;
   /**
    * Which build is running, from `virtual:cheminfo-build-info` — never written
    * by hand, which is what keeps it true after the next release.
@@ -108,6 +115,8 @@ export interface ResolvedAbout {
   providedBy: ProviderEntry[];
   license: string;
   repository: string;
+  /** Whether a visitor can open the repository, and so whether it is named. */
+  publicRepository: boolean;
   /** Which build is running, or `undefined` when the site does not say. */
   build: BuildInfo | undefined;
   issues: string;
@@ -139,6 +148,8 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     providedBy: providers(content.providedBy ?? []),
     license: content.license ?? DEFAULT_LICENSE,
     repository,
+    publicRepository:
+      content.publicRepository ?? site.publicRepository ?? false,
     build: content.build,
     issues: content.issues ?? `${withoutTrailingSlash(repository)}/issues`,
   };

package/src/about/core/index.ts

@@ -1,3 +1,4 @@
+export { githubSources } from './repository.ts';
 export type { AboutContent, AboutPerson, ResolvedAbout } from './about.ts';
 export { aboutProblems, resolveAbout } from './about.ts';
 export type { ProviderEntry, ProviderId } from './providers.ts';

package/src/about/core/repository.ts

@@ -0,0 +1,22 @@
+/**
+ * What can be linked to inside a repository, and when.
+ *
+ * Only GitHub has the addresses the About page builds — a release tag, a
+ * commit — and only a repository a visitor can open is worth pointing them at.
+ */
+
+/** Where our repositories live, and the only host whose paths we know. */
+const GITHUB = 'https://github.com/';
+
+/**
+ * The sources as a base a release or a commit can be appended to.
+ * @param repository - Where the sources live.
+ * @returns The address without its trailing slash, or `undefined` when it is
+ * not a GitHub repository and nothing inside it can be addressed.
+ */
+export function githubSources(repository: string): string | undefined {
+  const sources = repository.endsWith('/')
+    ? repository.slice(0, -1)
+    : repository;
+  return sources.startsWith(GITHUB) ? sources : undefined;
+}

package/src/about/ui/AboutBuild.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import type { BuildInfo } from '../../build/core/buildInfo.ts';
 import { formatBuiltAt, shortCommit } from '../../build/core/buildInfo.ts';
+import { githubSources } from '../core/repository.ts';
 
 export interface AboutBuildProps {
   /** What the build published about itself. */
@@ -11,38 +12,32 @@ export interface AboutBuildProps {
 }
 
 /**
- * The one line that says which build of the site a visitor has open.
+ * The one line that says when the build a visitor has open was made.
  *
  * A report of something going wrong is worth answering only when we know what
- * was running, and a visitor cannot read that off the page otherwise. The
- * version and the commit link into the repository, so the change that caused a
- * problem is one click from the page that shows it.
+ * was running. The version itself is in the hero, where a reader is asked to
+ * quote it from; this line carries the rest, and the commit links into the
+ * repository, so the change that caused a problem is one click from the page
+ * that shows it.
  * @param props - See {@link AboutBuildProps}.
  * @returns The line.
  */
 export function AboutBuild(props: AboutBuildProps): ReactElement {
   const { build, repository } = props;
-  const sources = repository.endsWith('/')
-    ? repository.slice(0, -1)
-    : repository;
-  const onGitHub = sources.startsWith(GITHUB);
+  const sources = githubSources(repository);
 
   return (
     <p style={PARAGRAPH_STYLE}>
-      Running version{' '}
-      <Reference
-        href={
-          onGitHub ? `${sources}/releases/tag/v${build.version}` : undefined
-        }
-      >
-        {build.version}
-      </Reference>
-      , built {formatBuiltAt(build.builtAt)}
+      Built {formatBuiltAt(build.builtAt)}
       {build.commit === undefined ? null : (
         <>
           {' from commit '}
           <Reference
-            href={onGitHub ? `${sources}/commit/${build.commit}` : undefined}
+            href={
+              sources === undefined
+                ? undefined
+                : `${sources}/commit/${build.commit}`
+            }
           >
             {shortCommit(build.commit)}
           </Reference>
@@ -67,8 +62,6 @@ function Reference(props: {
   );
 }
 
-const GITHUB = 'https://github.com/';
-
 const PARAGRAPH_STYLE = {
   margin: '8px 0 0',
   color: 'var(--text-muted)',

package/src/about/ui/AboutPage.tsx

@@ -10,6 +10,7 @@ import { AboutBuild } from './AboutBuild.tsx';
 import { AboutCitations } from './AboutCitations.tsx';
 import { AboutProvidedBy } from './AboutProvidedBy.tsx';
 import { AboutSection } from './AboutSection.tsx';
+import { AboutVersion } from './AboutVersion.tsx';
 
 export interface AboutPageProps {
   /** What the site says about itself. */
@@ -67,20 +68,22 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       }
       style={PAGE_STYLE}
     >
-      <header
-        className="about-hero"
-        style={logo === undefined ? HERO_STYLE : LOGO_HERO_STYLE}
-      >
+      <header className="about-hero" style={HERO_STYLE}>
         {logo === undefined
           ? (mark ?? <SiteMark site={site} size={56} />)
           : null}
-        <div>
+        <div style={HERO_BODY_STYLE}>
           <h1 style={logo === undefined ? NAME_STYLE : LOGO_NAME_STYLE}>
             {logo ?? <Wordmark site={site} size={26} />}
           </h1>
           <p style={TAGLINE_STYLE}>{site.tagline}</p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
+        <AboutVersion
+          build={about.build}
+          repository={about.repository}
+          publicRepository={about.publicRepository}
+        />
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
@@ -122,16 +125,23 @@ export function AboutPage(props: AboutPageProps): ReactElement {
         </AboutSection>
       )}
 
-      <AboutSection title="Licence and source" className="about-licence">
-        <p style={FIRST_PARAGRAPH_STYLE}>
-          {about.license}, © cheminfo. Use it in a course, fork it, or lift a
-          piece of it into something else. The sources are at{' '}
-          <ExternalLink href={about.repository} />.
-        </p>
-        {about.build === undefined ? null : (
-          <AboutBuild build={about.build} repository={about.repository} />
-        )}
-      </AboutSection>
+      {/*
+        A repository nobody outside can open is named nowhere: a licence a
+        reader cannot act on and a link that answers 404 say less than silence.
+        The version stays in the hero, unlinked, so a report still names a build.
+      */}
+      {!about.publicRepository ? null : (
+        <AboutSection title="Licence and source" className="about-licence">
+          <p style={FIRST_PARAGRAPH_STYLE}>
+            {about.license}, © cheminfo. Use it in a course, fork it, or lift a
+            piece of it into something else. The sources are at{' '}
+            <ExternalLink href={about.repository} />.
+          </p>
+          {about.build === undefined ? null : (
+            <AboutBuild build={about.build} repository={about.repository} />
+          )}
+        </AboutSection>
+      )}
 
       <AboutSection title="Found a problem?" className="about-issues">
         <p style={FIRST_PARAGRAPH_STYLE}>
@@ -162,6 +172,11 @@ const PAGE_STYLE = {
   gap: 10,
 } as const satisfies CSSProperties;
 
+const HERO_BODY_STYLE = {
+  flex: '1 1 auto',
+  minWidth: 0,
+} as const satisfies CSSProperties;
+
 const HERO_STYLE = {
   display: 'flex',
   alignItems: 'flex-start',
@@ -179,13 +194,6 @@ const NAME_STYLE = {
   fontWeight: 700,
 } as const satisfies CSSProperties;
 
-// A drawn lockup already carries the mark and the name at its own proportions,
-// so the hero gives it the full width rather than a column beside a mark.
-const LOGO_HERO_STYLE = {
-  ...HERO_STYLE,
-  display: 'block',
-} as const satisfies CSSProperties;
-
 const LOGO_NAME_STYLE = {
   margin: '0 0 4px',
 } as const satisfies CSSProperties;

package/src/about/ui/AboutVersion.tsx

@@ -0,0 +1,67 @@
+/**
+ * Which release of a site a visitor has open, in the corner of its hero.
+ *
+ * A report of something going wrong is worth answering only when we know what
+ * was running, and the version is the one thing an About page cannot say from
+ * a hand-written record. It sits at the top of the page rather than at the
+ * bottom because it is the one line a reader is asked to quote back.
+ */
+
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { BuildInfo } from '../../build/core/buildInfo.ts';
+import { releasedVersion } from '../../build/core/buildInfo.ts';
+import { githubSources } from '../core/repository.ts';
+
+export interface AboutVersionProps {
+  /** What the build published about itself, or `undefined` when it published none. */
+  build: BuildInfo | undefined;
+  /** Where the sources live, which is what the version links into. */
+  repository: string;
+  /** Whether a visitor can open that repository, and so whether it is linked. */
+  publicRepository: boolean;
+}
+
+/**
+ * The version badge, or nothing when there is no version worth showing.
+ * @param props - See {@link AboutVersionProps}.
+ * @returns The badge, or `null`.
+ */
+export function AboutVersion(props: AboutVersionProps): ReactElement | null {
+  const { build, repository, publicRepository } = props;
+  const version = releasedVersion(build);
+  if (version === undefined) return null;
+  const sources = publicRepository ? githubSources(repository) : undefined;
+  if (sources === undefined) {
+    return (
+      <span style={BADGE_STYLE} className="about-version">
+        {version}
+      </span>
+    );
+  }
+
+  return (
+    <a
+      className="about-version"
+      href={`${sources}/releases/tag/v${version}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={LINK_BADGE_STYLE}
+    >
+      {version}
+    </a>
+  );
+}
+
+const BADGE_STYLE = {
+  flex: '0 0 auto',
+  fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+  fontSize: 13,
+  color: 'var(--text-muted)',
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+const LINK_BADGE_STYLE = {
+  ...BADGE_STYLE,
+  color: 'var(--accent)',
+} as const satisfies CSSProperties;

package/src/about/ui/index.ts

@@ -1,5 +1,7 @@
 export type { AboutBuildProps } from './AboutBuild.tsx';
 export { AboutBuild } from './AboutBuild.tsx';
+export type { AboutVersionProps } from './AboutVersion.tsx';
+export { AboutVersion } from './AboutVersion.tsx';
 export type { AboutCitationsProps } from './AboutCitations.tsx';
 export { AboutCitations } from './AboutCitations.tsx';
 export type { AboutPageProps } from './AboutPage.tsx';

package/src/build/core/buildInfo.ts

@@ -25,6 +25,30 @@ export interface BuildInfo {
   reactCheminfo?: string;
 }
 
+/**
+ * The version a build reports when the repository has never been released.
+ *
+ * release-please writes the version into the root `package.json`, so a site
+ * whose first release has not happened yet is built from the `0.0.0` it was
+ * scaffolded with. That is not a version anybody can look up, so nothing shows
+ * it: a page saying `0.0.0` reads as a bug rather than as a release.
+ */
+export const UNRELEASED_VERSION = '0.0.0';
+
+/**
+ * The version to show a reader, if there is one.
+ * @param build - What the build published about itself, or `undefined`.
+ * @returns The released version, or `undefined` when the build published none
+ * or has never been released.
+ */
+export function releasedVersion(
+  build: BuildInfo | undefined,
+): string | undefined {
+  const version = build?.version;
+  if (version === undefined || version === UNRELEASED_VERSION) return undefined;
+  return version;
+}
+
 /**
  * The commit as it is written for a reader.
  * @param commit - The full hash.

package/src/build/core/index.ts

@@ -1,2 +1,7 @@
 export type { BuildInfo } from './buildInfo.ts';
-export { formatBuiltAt, shortCommit } from './buildInfo.ts';
+export {
+  UNRELEASED_VERSION,
+  formatBuiltAt,
+  releasedVersion,
+  shortCommit,
+} from './buildInfo.ts';

package/src/build/vite/buildInfo.ts

@@ -15,6 +15,7 @@ import { dirname, join, resolve } from 'node:path';
 import type { Plugin } from 'vite';
 
 import type { BuildInfo } from '../core/buildInfo.ts';
+import { UNRELEASED_VERSION } from '../core/buildInfo.ts';
 
 import { commitFromEnvironment, readGitHead } from './gitHead.ts';
 
@@ -92,7 +93,7 @@ export function resolveBuildInfo(root: string): BuildInfo {
   const repository = findRepositoryRoot(root);
 
   return {
-    version: readVersion(repository) ?? readVersion(root) ?? UNRELEASED,
+    version: readVersion(repository) ?? readVersion(root) ?? UNRELEASED_VERSION,
     builtAt: buildInstant(),
     commit: readGitHead(repository) ?? commitFromEnvironment(),
     reactCheminfo: readOwnVersion(),
@@ -174,5 +175,4 @@ function buildInstant(): string {
 
 const RESOLVED_MODULE = `\0${BUILD_INFO_MODULE}`;
 const OWN_NAME = 'react-cheminfo';
-const UNRELEASED = '0.0.0';
 const SECOND_LENGTH = 19;

package/src/ecosystem/core/sites.ts

@@ -62,6 +62,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -84,6 +85,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -97,6 +99,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -133,6 +136,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -144,6 +148,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -166,6 +171,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -177,6 +183,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -188,6 +195,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -210,6 +218,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -243,6 +252,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -254,6 +264,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',
@@ -267,6 +278,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     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',

package/src/ecosystem/core/types.ts

@@ -60,6 +60,14 @@ export interface EcosystemSite {
   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;
   /**