@conduction/docusaurus-preset 2.9.0 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/DetailHero/DetailHero.jsx

@@ -45,11 +45,25 @@
  */
 
 import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import HexBullet from '../primitives/HexBullet';
 import Button from '../primitives/Button';
+import {deriveStability} from '../../theme/brand.jsx';
 import {downloadsForApp, formatDownloads} from '../../data/app-downloads';
 import styles from './DetailHero.module.css';
 
+/**
+ * Per-stability hex-bullet colour. Keeps the hero badge and the
+ * navbar pill on the same maturity story without each site having
+ * to pass a colour explicitly.
+ */
+const STABILITY_COLORS = {
+  Stable: 'var(--c-mint-500)',
+  Beta:   'var(--c-orange-knvb)',
+  RC:     'var(--c-blue-cobalt)',
+  Alpha:  'var(--c-red-vermillion)',
+};
+
 export default function DetailHero({
   crumb,
   status,
@@ -76,6 +90,23 @@ export default function DetailHero({
      existing on-cream rendering used by connext apps detail pages. */
   const bgClass = background === 'cobalt' ? styles.bgCobalt : null;
 
+  /* Reconcile the hero's badge row with the navbar version pill so
+     they can't drift apart. When the caller doesn't pass `version`
+     and/or `status` props, fall back to the same customFields.appVersion
+     the navbar reads, and auto-derive Stable/Beta/RC/Alpha from the
+     SemVer string via deriveStability(). Sites can still pass explicit
+     props to override (e.g. a static-site demo that wants to show
+     "Preview" instead of the auto-derived label). */
+  const {siteConfig} = useDocusaurusContext();
+  const appVersion = siteConfig?.customFields?.appVersion;
+  const resolvedVersion = version || (appVersion ? `v${appVersion}` : undefined);
+  const resolvedStatus = status || (appVersion
+    ? {
+        label: deriveStability(appVersion),
+        color: STABILITY_COLORS[deriveStability(appVersion)],
+      }
+    : undefined);
+
   return (
     <section className={[styles.head, hasIllustration && styles.withIllustration, bgClass, className].filter(Boolean).join(' ')}>
       {crumb && Array.isArray(crumb) && (
@@ -99,15 +130,15 @@ export default function DetailHero({
 
       <div className={styles.headInner}>
         <div className={styles.copy}>
-          {(status || version || locales || dlCount > 0) && (
+          {(resolvedStatus || resolvedVersion || locales || dlCount > 0) && (
             <div className={styles.badgeRow}>
-              {status && (
+              {resolvedStatus && (
                 <span className={styles.badge}>
-                  <HexBullet size="md" color={status.color || 'var(--c-mint-500)'} />
-                  {status.label}
+                  <HexBullet size="md" color={resolvedStatus.color || STABILITY_COLORS[resolvedStatus.label] || 'var(--c-mint-500)'} />
+                  {resolvedStatus.label}
                 </span>
               )}
-              {version && <span className={[styles.badge, styles.versionBadge].join(' ')}>{version}</span>}
+              {resolvedVersion && <span className={[styles.badge, styles.versionBadge].join(' ')}>{resolvedVersion}</span>}
               {locales && <span className={[styles.badge, styles.versionBadge].join(' ')}>{locales}</span>}
               {dlCount > 0 && (
                 <span

package/src/components/PlatformDiagram/PlatformDiagram.jsx

@@ -87,6 +87,7 @@ export default function PlatformDiagram({workspace, lists = [], flows = []}) {
                 name={item.name}
                 meta={item.meta}
                 desc={item.desc}
+                href={item.href}
                 brand-color={item.brandColor}
               >
                 {item.icon}

package/src/data/apps-registry.js

@@ -32,7 +32,6 @@ export const APPS_REGISTRY = {
   openconnector:   {slug: 'openconnector',   name: 'OpenConnector',    productHref: '/apps/openconnector',   docsHref: 'https://docs.conduction.nl/openconnector',   academyHref: '/academy?app=openconnector'},
   docudesk:        {slug: 'docudesk',        name: 'DocuDesk',         productHref: '/apps/docudesk',        docsHref: 'https://docs.conduction.nl/docudesk',        academyHref: '/academy?app=docudesk'},
   mydash:          {slug: 'mydash',          name: 'MyDash',           productHref: '/apps/mydash',          docsHref: 'https://docs.conduction.nl/mydash',          academyHref: '/academy?app=mydash'},
-  openwoo:         {slug: 'openwoo',         name: 'OpenWoo',          productHref: '/apps/openwoo',         docsHref: 'https://docs.conduction.nl/openwoo',         academyHref: '/academy?app=openwoo'},
   zaakafhandelapp: {slug: 'zaakafhandelapp', name: 'ZaakAfhandelApp',  productHref: '/apps/zaakafhandelapp', docsHref: 'https://docs.conduction.nl/zaakafhandelapp', academyHref: '/academy?app=zaakafhandelapp'},
   pipelinq:        {slug: 'pipelinq',        name: 'PipelinQ',         productHref: '/apps/pipelinq',        docsHref: 'https://docs.conduction.nl/pipelinq',        academyHref: '/academy?app=pipelinq'},
   procest:         {slug: 'procest',         name: 'Procest',          productHref: '/apps/procest',         docsHref: 'https://docs.conduction.nl/procest',         academyHref: '/academy?app=procest'},
@@ -40,6 +39,10 @@ export const APPS_REGISTRY = {
   softwarecatalog: {slug: 'softwarecatalog', name: 'SoftwareCatalog',  productHref: '/apps/softwarecatalog', docsHref: 'https://docs.conduction.nl/softwarecatalog', academyHref: '/academy?app=softwarecatalog'},
   larpingapp:      {slug: 'larpingapp',      name: 'LarpingApp',       productHref: '/apps/larpingapp',      docsHref: 'https://docs.conduction.nl/larpingapp',      academyHref: '/academy?app=larpingapp'},
   nldesign:        {slug: 'nldesign',        name: 'NLDesign',         productHref: '/apps/nldesign',        docsHref: 'https://docs.conduction.nl/nldesign',        academyHref: '/academy?app=nldesign'},
+  shillinq:        {slug: 'shillinq',        name: 'Shillinq',         productHref: '/apps/shillinq',        docsHref: 'https://docs.conduction.nl/shillinq',        academyHref: '/academy?app=shillinq'},
+  openbuilt:       {slug: 'openbuilt',       name: 'OpenBuilt',        productHref: '/apps/openbuilt',       docsHref: 'https://docs.conduction.nl/openbuilt',       academyHref: '/academy?app=openbuilt'},
+  doriath:         {slug: 'doriath',         name: 'Doriath',          productHref: '/apps/doriath',         docsHref: 'https://docs.conduction.nl/doriath',         academyHref: '/academy?app=doriath'},
+  'app-versions':  {slug: 'app-versions',    name: 'App Versions',     productHref: '/apps/app-versions',    docsHref: 'https://docs.conduction.nl/app-versions',    academyHref: '/academy?app=app-versions'},
 };
 
 export const APP_SLUGS = Object.keys(APPS_REGISTRY);

package/src/theme/Navbar/index.jsx

@@ -49,7 +49,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
-import {brandFor, productWordmark} from '../brand.jsx';
+import {brandFor, productWordmark, deriveStability} from '../brand.jsx';
 import {ICONS} from '../../components/primitives/icons';
 import styles from './styles.module.css';
 
@@ -126,14 +126,18 @@ function NavItem({item, location, appVersion}) {
     return <Link to={to} className={className}>{content}</Link>;
   }
 
-  /* Version pill: code-typeface "Stable · v{version}" chip. Source is
-     customFields.appVersion (set by createConfig() from appinfo/info.xml
-     or package.json). Hidden when no version is available so sites
-     without an app version (Hydra, design-system itself) get a clean
-     navbar instead of an empty pill. */
+  /* Version pill: code-typeface "{Stability} · v{version}" chip.
+     Source is customFields.appVersion (set by createConfig() from
+     appinfo/info.xml or package.json). The maturity prefix
+     (Stable/Beta/RC/Alpha) is auto-derived from the SemVer string —
+     `0.1.0` → Beta, `1.0.0-rc.2` → RC, `1.2.3` → Stable. Sites can
+     still pass an explicit `prefix` to override. Hidden when no
+     version is available so sites without an app version (Hydra,
+     design-system itself) get a clean navbar instead of an empty
+     pill. */
   if (typeIs(item, 'versionPill')) {
     if (!appVersion) return null;
-    const prefix = item.prefix || 'Stable';
+    const prefix = item.prefix || deriveStability(appVersion);
     return (
       <span className={styles.versionPill} title={`${prefix} · v${appVersion}`}>
         {prefix} · v{appVersion}

package/src/theme/brand.jsx

@@ -108,3 +108,36 @@ export function productWordmark(title, brandPrefix) {
   }
   return null;
 }
+
+/**
+ * Derive the maturity label that prefixes the version pill and the
+ * DetailHero status badge. Driven by SemVer:
+ *
+ *   1.0.0+         → "Stable"
+ *   0.x.y          → "Beta"   (every 0.x is pre-1.0 by SemVer rule)
+ *   *-alpha.N      → "Alpha"
+ *   *-beta.N       → "Beta"
+ *   *-rc.N         → "RC"
+ *   anything else  → "Stable" (safe default for non-SemVer strings)
+ *
+ * Both the navbar pill (theme/Navbar) and DetailHero (components/
+ * DetailHero) call this so the chrome and the landing-page status
+ * badge can't drift apart. Sites can still pass an explicit string
+ * to override (`versionPill.prefix = 'Preview'` etc.).
+ */
+export function deriveStability(version) {
+  if (!version || typeof version !== 'string') return 'Stable';
+  /* Pre-release tags win first — '1.0.0-beta.2' is Beta, not Stable.
+     Match case-insensitively because info.xml authors aren't
+     consistent (`-Beta`, `-BETA`, …). */
+  const pre = version.match(/-(alpha|beta|rc)(?:\.|$|-)/i);
+  if (pre) {
+    const tag = pre[1].toLowerCase();
+    if (tag === 'rc') return 'RC';
+    return tag === 'alpha' ? 'Alpha' : 'Beta';
+  }
+  /* No pre-release tag — 0.x is by SemVer convention not yet stable. */
+  const major = version.match(/^(\d+)\./);
+  if (major && parseInt(major[1], 10) === 0) return 'Beta';
+  return 'Stable';
+}

package/static/lib/platform-diagram.css

@@ -96,8 +96,12 @@ platform-diagram .workspace:not(.box-wrap):not(.workspace-corner-hex) .role {
   margin-top: 14px;
 }
 
-/* ---- Box-wrap (positioning shell for each list) ---- */
-platform-diagram .box-wrap { position: relative; }
+/* ---- Box-wrap (positioning shell for each list) ----
+   Hover raises the wrap's z-index so its absolute-positioned .desc
+   tooltip stacks above neighbouring lists (without this the tooltip
+   slides under the next .box-wrap and is unreadable). */
+platform-diagram .box-wrap { position: relative; z-index: 1; }
+platform-diagram .box-wrap:hover { z-index: 20; }
 
 /* ---- List-box ---- */
 platform-diagram .box {
@@ -138,6 +142,14 @@ platform-diagram .row .name {
   min-width: 0;
 }
 platform-diagram .row + .row { border-top: 1px solid var(--c-cobalt-50); }
+platform-diagram a.row { text-decoration: none; color: inherit; cursor: pointer; }
+platform-diagram a.row:hover { text-decoration: none; }
+/* Hovered row escapes its own overflow:hidden clip and creates a
+   stacking context so the .desc tooltip can extend below the row AND
+   paint above later-DOM-order siblings. Without overflow:visible the
+   absolute-positioned .desc gets cropped to the row's bounding box;
+   without z-index the .desc has no stacking context to escape. */
+platform-diagram .row:hover { overflow: visible; z-index: 10; }
 
 /* Multi-column box: rows are wrapped in <.col> so the .row+.row border only
    draws within a single column. The columns sit side by side with a thin
@@ -248,9 +260,12 @@ platform-diagram .workspace-corner-hex.fam-solutions { background: #E34234; }
 platform-diagram .fam-integrate  .glyph,
 platform-diagram .workspace-corner-hex.fam-integrate { background: var(--c-cobalt-400); }
 platform-diagram .fam-builder    .glyph,
-platform-diagram .workspace-corner-hex.fam-builder   { background: var(--c-cobalt-300); }
-/* App Builder hex: KNVB orange (override fam-builder) */
-platform-diagram .workspace-corner-hex.app-builder   { background: var(--c-orange-knvb); }
+platform-diagram .workspace-corner-hex.fam-builder   { background: var(--c-blue-cobalt); }
+/* App Builder hex: KNVB orange placeholder treatment, only while the
+   cluster carries a `has-badge` class (COMING SOON state). Without
+   the badge the hex reverts to the shared workspace cobalt and looks
+   like any other Conduction surface. */
+platform-diagram .workspace-corner-hex.app-builder.has-badge { background: var(--c-orange-knvb); }
 platform-diagram .fam-nextcloud  .glyph,
 platform-diagram .workspace-corner-hex.fam-nextcloud { background: var(--c-nextcloud-blue); }
 
@@ -396,15 +411,17 @@ platform-diagram .box-wrap.app-builder {
   opacity: var(--pd-list-progress);
 }
 
-/* App Builder list: dashed coming-soon styling */
-platform-diagram .box-wrap.app-builder .box {
+/* App Builder list: when a COMING SOON-style badge is attached we treat the
+   cluster as a placeholder (dashed border, faded text). When no badge is
+   set the cluster styles like every other list — OpenBuilt is a real app. */
+platform-diagram .box-wrap.app-builder.has-badge .box {
   border-style: dashed;
   background: var(--c-cobalt-50);
   opacity: 0.92;
 }
-platform-diagram .box-wrap.app-builder .row { color: var(--c-cobalt-400); font-style: italic; }
-platform-diagram .box-wrap.app-builder .row .desc { font-style: normal; }
-platform-diagram .box-wrap.app-builder .row:hover .name { color: var(--c-cobalt-700); }
+platform-diagram .box-wrap.app-builder.has-badge .row { color: var(--c-cobalt-400); font-style: italic; }
+platform-diagram .box-wrap.app-builder.has-badge .row .desc { font-style: normal; }
+platform-diagram .box-wrap.app-builder.has-badge .row:hover .name { color: var(--c-cobalt-700); }
 
 /* Badge (e.g. COMING SOON) — generic, attaches to any .box-wrap */
 platform-diagram .box-wrap .badge {

package/static/lib/platform-diagram.js

@@ -139,6 +139,7 @@
         name:       itemEl.getAttribute('name') || '',
         meta:       itemEl.getAttribute('meta') || '',
         desc:       itemEl.getAttribute('desc') || '',
+        href:       itemEl.getAttribute('href') || '',
         brand:      itemEl.hasAttribute('brand') || itemEl.hasAttribute('brand-color'),
         brandColor: itemEl.getAttribute('brand-color') || '',
         glyph:      svg ? svg.cloneNode(true) : null,
@@ -160,7 +161,8 @@
     const positionClass = POSITION_CLASS[list.position] || list.position;
     const familyClass   = list.family ? `fam-${list.family}` : '';
     const colsClass     = list.columns > 1 ? `cols-${list.columns}` : '';
-    wrap.className = `box-wrap ${positionClass} ${familyClass} ${colsClass}`.trim();
+    const badgeClass = list.badge ? 'has-badge' : '';
+    wrap.className = `box-wrap ${positionClass} ${familyClass} ${colsClass} ${badgeClass}`.trim();
 
     if (list.badge) {
       const badge = document.createElement('span');
@@ -173,8 +175,9 @@
     box.className = 'box' + (list.columns > 1 ? ` cols-${list.columns}` : '');
 
     function makeRow(item) {
-      const row = document.createElement('div');
+      const row = document.createElement(item.href ? 'a' : 'div');
       row.className = 'row';
+      if (item.href) row.setAttribute('href', item.href);
 
       const glyph = document.createElement('span');
       glyph.className = 'glyph' + (item.brand ? ' brand' : '');
@@ -230,8 +233,9 @@
     if (!list.label || list.position === 'top') return null;
     const positionClass = POSITION_CLASS[list.position] || list.position;
     const familyClass   = list.family ? `fam-${list.family}` : '';
+    const badgeClass    = list.badge ? 'has-badge' : '';
     const hex = document.createElement('div');
-    hex.className = `workspace-corner-hex ${positionClass} ${familyClass}`.trim();
+    hex.className = `workspace-corner-hex ${positionClass} ${familyClass} ${badgeClass}`.trim();
     // Allow newline in label to render a <br>; otherwise straight text.
     if (list.label.includes('\n')) {
       list.label.split('\n').forEach((line, i) => {