@conduction/docusaurus-preset 3.0.0 → 3.1.1

package/package.json

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

package/src/components/LeafCard/LeafCard.jsx

@@ -0,0 +1,157 @@
+/**
+ * <LeafCard /> + <LeafGrid />
+ *
+ * Metadata header for an Open Register leaf integration. Mirrors the
+ * registry descriptor (id, label, icon, group, requiredApp, storage)
+ * so every per-leaf docs page leads with the same compact summary —
+ * one card, six fields, no prose to skim. Used at the top of every
+ * docs/Integrations/{leaf}.md page in the openregister docs site.
+ *
+ * Used on:
+ *   - /docs/Integrations/{leaf}              (one <LeafCard />)
+ *   - /docs/Integrations/leaf-system        (a <LeafGrid /> of all 18+1)
+ *
+ * Brand:
+ *   - Pointy-top hex carries the leaf's MDI icon (cobalt by default,
+ *     orange for the one accent-leaf when grouped). Falls back to the
+ *     `id` initial when no icon is given.
+ *   - Status pill colours: green = backend-ready, amber = stub,
+ *     cobalt = external (OpenConnector-routed), grey = built-in.
+ *
+ * Usage in MDX:
+ *
+ *   import {LeafCard} from '@conduction/docusaurus-preset/components';
+ *
+ *   <LeafCard
+ *     id="calendar"
+ *     label="Meetings"
+ *     icon="Calendar"
+ *     group="comms"
+ *     requiredApp="calendar"
+ *     storage="link-table"
+ *     status="backend-ready" />
+ *
+ * <LeafGrid /> renders a responsive grid of LeafCard children for
+ * the overview page:
+ *
+ *   <LeafGrid>
+ *     <LeafCard id="calendar" ... />
+ *     <LeafCard id="contacts" ... />
+ *   </LeafGrid>
+ */
+
+import React from 'react';
+import styles from './LeafCard.module.css';
+
+const STATUS_LABELS = {
+  'backend-ready': 'Backend ready',
+  'stub': 'Provider stub',
+  'external': 'External (OpenConnector)',
+  'built-in': 'Built-in',
+};
+
+const GROUP_LABELS = {
+  'core': 'Core',
+  'comms': 'Communication',
+  'docs': 'Documents',
+  'workflow': 'Workflow',
+  'external': 'External',
+};
+
+const STORAGE_LABELS = {
+  'magic-column': 'Magic column',
+  'link-table': 'Link table',
+  'external': 'External (no local store)',
+  'query-time': 'Query-time (live)',
+};
+
+/**
+ * Render a single MDI icon glyph by name, with a graceful fallback
+ * to the first letter of the leaf id when the icon name is unknown.
+ * The docs site doesn't ship the full MDI set, so unknown icons fall
+ * back to a text initial rather than 404'ing on a missing asset.
+ */
+function LeafGlyph({icon, id}) {
+  if (icon) {
+    // Defer the actual icon rendering to the consuming docs site
+    // (which can swizzle this if it wires up vue-material-design-icons
+    // or any equivalent React icon pack). Default: render the icon
+    // name as a small uppercase tag so the page still reads.
+    return <span className={styles.iconText} aria-hidden="true">{icon.charAt(0)}</span>;
+  }
+  return <span className={styles.iconText} aria-hidden="true">{(id || '?').charAt(0).toUpperCase()}</span>;
+}
+
+export function LeafCard({
+  id,
+  label,
+  icon,
+  group,
+  requiredApp,
+  storage,
+  status,
+  href,
+  description,
+  className,
+}) {
+  const statusLabel = STATUS_LABELS[status] || status;
+  const groupLabel = GROUP_LABELS[group] || group;
+  const storageLabel = STORAGE_LABELS[storage] || storage;
+  const composed = [styles.card, styles['status-' + (status || 'unknown')], className].filter(Boolean).join(' ');
+
+  const inner = (
+    <>
+      <div className={styles.head}>
+        <div className={styles.hex} aria-hidden="true">
+          <LeafGlyph icon={icon} id={id} />
+        </div>
+        <div className={styles.heading}>
+          <div className={styles.label}>{label}</div>
+          <code className={styles.id}>{id}</code>
+        </div>
+        {status && <span className={styles.statusPill}>{statusLabel}</span>}
+      </div>
+      {description && <p className={styles.description}>{description}</p>}
+      <dl className={styles.meta}>
+        {group && (
+          <>
+            <dt>Group</dt>
+            <dd>{groupLabel}</dd>
+          </>
+        )}
+        {requiredApp !== undefined && (
+          <>
+            <dt>Required app</dt>
+            <dd>{requiredApp ? <code>{requiredApp}</code> : <span className={styles.muted}>None (always available)</span>}</dd>
+          </>
+        )}
+        {storage && (
+          <>
+            <dt>Storage</dt>
+            <dd>{storageLabel}</dd>
+          </>
+        )}
+        {icon && (
+          <>
+            <dt>Icon</dt>
+            <dd><code>{icon}</code></dd>
+          </>
+        )}
+      </dl>
+    </>
+  );
+
+  // Render as link when href is set so leaves on the overview grid
+  // navigate to their dedicated page on click.
+  if (href) {
+    return <a href={href} className={composed}>{inner}</a>;
+  }
+  return <div className={composed}>{inner}</div>;
+}
+
+export function LeafGrid({columns = 3, children, className}) {
+  const composed = [styles.grid, styles['grid-' + columns], className].filter(Boolean).join(' ');
+  return <div className={composed}>{children}</div>;
+}
+
+export default LeafCard;

package/src/components/LeafCard/LeafCard.module.css

@@ -0,0 +1,153 @@
+/* LeafCard — per-leaf metadata header.
+   Pointy-top hex + label + status pill + meta grid. Sized for both
+   single-card placement at the top of a docs page and grid placement
+   on the overview. */
+
+.card {
+  display: block;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 120ms ease, transform 120ms ease;
+}
+
+a.card:hover {
+  border-color: var(--c-cobalt-400);
+  transform: translateY(-1px);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+
+.hex {
+  width: 40px;
+  height: 46px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.iconText {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.id {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  font-family: var(--conduction-typography-font-family-code);
+  margin-top: 2px;
+}
+
+.statusPill {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.status-backend-ready .statusPill {
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+}
+
+.status-stub .statusPill {
+  background: var(--c-orange-50, #fff4e5);
+  color: var(--c-orange-knvb);
+}
+
+.status-external .statusPill {
+  background: var(--c-cobalt-100);
+  color: var(--c-cobalt-900);
+}
+
+.status-built-in .statusPill {
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+}
+
+.description {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  margin: 0 0 var(--space-4);
+  line-height: 1.55;
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px var(--space-4);
+  margin: 0;
+  font-size: 13px;
+}
+
+.meta dt {
+  color: var(--c-cobalt-400);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
+  align-self: center;
+}
+
+.meta dd {
+  margin: 0;
+  color: var(--c-cobalt-900);
+  align-self: center;
+}
+
+.muted {
+  color: var(--c-cobalt-400);
+  font-style: italic;
+}
+
+/* Grid for the overview page. */
+.grid {
+  display: grid;
+  gap: var(--space-5);
+  margin: var(--space-5) 0;
+}
+
+.grid-1 { grid-template-columns: 1fr; }
+.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+@media (max-width: 768px) {
+  .grid-2, .grid-3, .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}

package/src/components/index.js

@@ -63,6 +63,12 @@ export {default as GameModal} from './GameModal/GameModal.jsx';
    framework-agnostic diagram set in @conduction/diagrams. Brand is
    flat-hex only; the 3D prism wrapper was removed in v3.0.0. */
 export {Hex, Platform, DomainTree, DiagramPipeline, SideBox, HoneycombBg, Pair, ArchFlow} from './Diagrams/Diagrams.jsx';
+
+/* LeafCard — metadata header for an Open Register leaf integration.
+   <LeafGrid> renders a responsive grid of LeafCards for the overview
+   page; <LeafCard> on its own anchors the top of a per-leaf docs
+   page. See docs/Integrations/leaf-system.md for the worked use. */
+export {default as LeafCard, LeafGrid} from './LeafCard/LeafCard.jsx';
 export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';

package/src/css/brand.css

@@ -310,3 +310,23 @@ a:not(.navbar__link):not(.footer__link-item):not(.button):hover {
   color: var(--c-cobalt-700);
   background: transparent;
 }
+
+/* ============================================================
+   Body grows with content.
+
+   Infima ships `html, body { height: 100% }`. With long pages the
+   body stops at one viewport while content overflows beneath it.
+   Anything past that height paints over the browser canvas, not
+   over body. On screens where the canvas is dark (Chrome on macOS
+   dark mode, Windows high-contrast), the canal-footer pattern is
+   preceded by a `#1B1B1D` band.
+
+   Swapping `height: 100%` for `min-height: 100vh` keeps short
+   pages looking the same and lets body cover the full document
+   on long pages. Site-level customCss can still override.
+   ============================================================ */
+html,
+body {
+  height: auto;
+  min-height: 100vh;
+}