@conduction/docusaurus-preset 0.1.0

package/src/components/Clients/Clients.module.css

@@ -0,0 +1,166 @@
+/**
+ * <Clients /> styles.
+ *
+ * Grid variant: 5/4/3/2-column flat wall, grayscale at rest. Used for
+ * the Partners row and any small logo set.
+ *
+ * Marquee variant: three pointy-top hex rows, honeycomb stagger. The
+ * scroll itself is JS-driven (lib/clients-flow.js): each row is a
+ * static relative container, the runtime spawns absolutely-positioned
+ * hex anchors on the right, drifts them left via translateX, and culls
+ * once they leave the viewport. CSS-animated tracks were dropped after
+ * the duplicate-and-wrap approach started showing a seam at the loop
+ * boundary. Soft mask fade at left/right edges, prefers-reduced-motion
+ * freezes the runtime to a static snapshot, < 720px collapses to one
+ * lane.
+ */
+
+.section {
+  background: white;
+  font-family: var(--conduction-typography-font-family-body);
+  padding: 96px 64px;
+}
+@media (max-width: 700px) {
+  .section { padding: 64px 16px; }
+}
+
+.inner {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+/* ============ Grid variant ============ */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 32px;
+  margin-top: var(--space-6);
+  align-items: center;
+  justify-items: center;
+}
+@media (max-width: 1100px) {
+  .grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
+}
+@media (max-width: 800px) {
+  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
+}
+@media (max-width: 500px) {
+  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
+}
+
+.cell {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 8px;
+  min-height: 72px;
+}
+
+.logo {
+  max-width: 100%;
+  max-height: 56px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  filter: grayscale(1);
+  opacity: 0.6;
+  transition: filter 200ms ease, opacity 200ms ease;
+}
+.cell:hover .logo {
+  filter: grayscale(0);
+  opacity: 1;
+}
+
+/* ============ Marquee variant ============ */
+
+.marquee {
+  --hex-w: 120px;
+  --hex-h: 138.56px;     /* hex-w * 1.1547 (pointy-top ratio) */
+  --gap: 8px;            /* breathing room between hexes */
+  /* Isotropic gap: vertical row pitch = (hex-w + gap) * √3/2 so the
+     visible gap perpendicular to the slanted hex edges matches the
+     horizontal gap between flat sides. Overlap = hex-h - that pitch. */
+  --hex-overlap: calc(var(--hex-h) - (var(--hex-w) + var(--gap)) * 0.866);
+  --offset: calc((var(--hex-w) + var(--gap)) / 2); /* row 2 lateral stagger */
+  position: relative;
+  overflow: hidden;
+  margin-top: var(--space-8);
+  padding: var(--space-4) 0;
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+/* Each row is a static relative band the runtime spawns hexes into.
+   The honeycomb pack-up (negative margin-top) and row-2 stagger are
+   handled here in CSS; the runtime only drives x-axis drift. */
+.row {
+  position: relative;
+  overflow: hidden;
+  height: var(--hex-h);
+  margin-top: calc(var(--hex-overlap) * -1);
+}
+.row:first-child { margin-top: 0; }
+/* Row 2 stagger is applied by the runtime via translateX on the
+   spawned hexes (data-row-stagger or the default idx === 1 case),
+   so no CSS offset is needed here. Padding/margin would only
+   inflate the row's bounding rect, which the runtime measures for
+   spawn arithmetic — keeping the row plain ensures all three rows
+   have identical widths and stay in lockstep. */
+
+.hex {
+  /* The flow runtime sets position:absolute + top:0 + left:0 + an
+     animated translateX in inline style. Absent the runtime (preview
+     fallback or reduced-motion before hydrate completes) the hex
+     would otherwise pile at the row's natural baseline; absolute
+     positioning here keeps it tucked at top:0,left:0 until the
+     runtime sets a transform. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--hex-w);
+  height: var(--hex-h);
+  background: white;
+  clip-path: var(--hex-pointy-top);
+  display: grid;
+  place-items: center;
+  text-decoration: none;
+}
+.hex::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: var(--c-cobalt-50);
+  clip-path: var(--hex-pointy-top);
+  z-index: 0;
+}
+.hex::after {
+  content: "";
+  position: absolute; inset: 1.5px;
+  background: white;
+  clip-path: var(--hex-pointy-top);
+  z-index: 1;
+}
+.hexLogo {
+  position: relative;
+  z-index: 2;
+  max-width: 60%;
+  max-height: 50%;
+  object-fit: contain;
+  filter: grayscale(1) opacity(0.55);
+  transition: filter 200ms ease;
+}
+.hex:hover .hexLogo,
+.hex:focus-visible .hexLogo {
+  filter: grayscale(0) opacity(1);
+}
+
+@media (max-width: 720px) {
+  .marquee {
+    --hex-w: 88px;
+    --hex-h: 101.6px;
+    --gap: 6px;
+    /* --hex-overlap recomputes from the calc in .marquee */
+  }
+  .row2, .row3 { display: none; }
+}

package/src/components/ComposeBlock/ComposeBlock.jsx

@@ -0,0 +1,70 @@
+/**
+ * <ComposeBlock />
+ *
+ * Code block styled like a terminal-adjacent compose-yaml panel.
+ * Mirrors the .compose treatment from preview/pages/demo.html: dark
+ * cobalt-900 background, IBM Plex Mono, an optional file-name pill
+ * at the top, and a copy-to-clipboard button on hover.
+ *
+ * Used wherever a page needs to drop in a chunk of YAML, JSON, bash,
+ * or any other plain text the reader might want to copy: /demo
+ * (docker-compose), /apps/<slug> (sample register schema), /docs
+ * configuration recipes.
+ *
+ * Usage in MDX:
+ *
+ *   <ComposeBlock filename="docker-compose.yml" lang="yaml">
+ *     {`services:
+ *       nextcloud:
+ *         image: nextcloud:latest
+ *         ports: ["8080:80"]
+ *     `}
+ *   </ComposeBlock>
+ *
+ *   <ComposeBlock>
+ *     {`docker compose up -d
+ *     docker compose logs -f nextcloud`}
+ *   </ComposeBlock>
+ *
+ * Note: this component is for verbatim copy-paste blocks. For
+ * syntax-highlighted code, use Docusaurus's built-in fenced code
+ * blocks (```yaml ...) which Docusaurus colorises via Prism.
+ */
+
+import React, {useState, useCallback, useRef} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './ComposeBlock.module.css';
+
+export default function ComposeBlock({filename, lang, children, className}) {
+  const isBrowser = useIsBrowser();
+  const [copied, setCopied] = useState(false);
+  const preRef = useRef(null);
+
+  const onCopy = useCallback(() => {
+    if (!isBrowser) return;
+    const text = preRef.current?.textContent || '';
+    if (!text || !navigator.clipboard) return;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    }).catch(() => {/* clipboard API can fail in iframes; just no-op */});
+  }, [isBrowser]);
+
+  return (
+    <div className={[styles.block, className].filter(Boolean).join(' ')} role="region" aria-label={filename || 'Code block'}>
+      {filename && <span className={styles.filename}>{filename}</span>}
+      <button
+        type="button"
+        className={styles.copy}
+        onClick={onCopy}
+        aria-label={copied ? 'Copied to clipboard' : 'Copy to clipboard'}
+        title={copied ? 'Copied' : 'Copy'}
+      >
+        {copied ? '✓ copied' : 'copy'}
+      </button>
+      <pre ref={preRef} className={styles.pre}>
+        <code className={lang ? `language-${lang}` : undefined}>{children}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/ComposeBlock/ComposeBlock.module.css

@@ -0,0 +1,74 @@
+/**
+ * <ComposeBlock /> styles. Mirrors the .compose treatment from
+ * preview/pages/demo.html so the React component renders identically
+ * to the kit page version.
+ */
+
+.block {
+  position: relative;
+  background: var(--c-cobalt-900);
+  color: rgba(255, 247, 210, 0.92);
+  padding: 28px 32px;
+  border-radius: var(--radius-lg);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  line-height: 1.55;
+  margin: 32px 0;
+  overflow-x: auto;
+  box-shadow: 0 12px 32px -8px rgba(10, 23, 47, 0.45);
+}
+
+.filename {
+  display: inline-block;
+  background: rgba(255, 247, 210, 0.08);
+  color: var(--c-orange-knvb);
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.copy {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  background: rgba(255, 247, 210, 0.06);
+  color: rgba(255, 247, 210, 0.7);
+  border: 1px solid rgba(255, 247, 210, 0.12);
+  padding: 4px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
+}
+.block:hover .copy,
+.copy:focus-visible { opacity: 1; }
+.copy:hover {
+  background: rgba(255, 247, 210, 0.14);
+  color: rgba(255, 247, 210, 0.92);
+}
+
+.pre {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  white-space: pre;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: 0;
+  font-family: inherit;
+  white-space: pre;
+}

package/src/components/ConductionBg/ConductionBg.jsx

@@ -0,0 +1,150 @@
+/**
+ * <ConductionBg />
+ *
+ * Parallax honeycomb background. Drops depth-tiered hex spans inside a
+ * position:absolute layer that fills its closest position:relative
+ * ancestor. Hexes drift on scroll (smaller hexes = smaller depth = read
+ * as further away) and breathe in opacity.
+ *
+ * Mirrors preview/conduction-bg.html in the kit. The runtime-script
+ * version still ships under sites/www/static/lib/ for plain-HTML
+ * surfaces (the preview pages); this React component is the canonical
+ * way to use the pattern from MDX or any Docusaurus swizzle.
+ *
+ * Per huisstijl: pointy-top only, never rotated.
+ *
+ * Usage in MDX:
+ *
+ *   <Section background="inverse" spacing="default">
+ *     <ConductionBg />        {/* white hexes for cobalt surfaces *\/}
+ *     <h2 style={{position: 'relative', zIndex: 1}}>Pick an app.</h2>
+ *   </Section>
+ *
+ *   <ConductionBg theme="on-light" count={12} />  {/* cobalt hexes for white surfaces *\/}
+ *
+ * Note: the parent must be position:relative + overflow:hidden for the
+ * hexes to clip and the scroll-tied parallax to feel right.
+ */
+
+import React, {useEffect, useRef} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './ConductionBg.module.css';
+
+/* Depth tiers picked to match the kit runtime. Smaller hexes get smaller
+   depth so they translate less per scroll-pixel — that's what reads
+   as "further away". Keep the weights in sync with conduction-bg.js. */
+const TIERS = [
+  {d: 0.10, sMin: 32,  sMax: 56,  oMin: 0.03, oMax: 0.10, w: 5},
+  {d: 0.25, sMin: 56,  sMax: 96,  oMin: 0.04, oMax: 0.13, w: 4},
+  {d: 0.45, sMin: 96,  sMax: 150, oMin: 0.05, oMax: 0.16, w: 3},
+  {d: 0.65, sMin: 150, sMax: 220, oMin: 0.07, oMax: 0.18, w: 2},
+  {d: 0.85, sMin: 220, sMax: 300, oMin: 0.08, oMax: 0.20, w: 1},
+];
+const PARALLAX_FACTOR = 0.4;
+const TIER_TOTAL = TIERS.reduce((s, t) => s + t.w, 0);
+
+const rand = (a, b) => Math.random() * (b - a) + a;
+function pickTier() {
+  let r = Math.random() * TIER_TOTAL;
+  for (const t of TIERS) { if ((r -= t.w) <= 0) return t; }
+  return TIERS[0];
+}
+
+export default function ConductionBg({theme = 'default', count = 18, className}) {
+  const isBrowser = useIsBrowser();
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!isBrowser || !ref.current) return;
+    const bg = ref.current;
+    const host = bg.parentElement;
+    if (!host) return;
+
+    /* Idempotency guard: re-mounting the same wrapper (e.g. SPA route
+       change that re-runs the effect) shouldn't double up the hexes. */
+    if (bg.dataset.cbgHydrated === '1') return;
+    bg.dataset.cbgHydrated = '1';
+
+    const onLight = theme === 'on-light';
+    /* Cobalt-on-white reads stronger per opacity-unit than white-on-cobalt;
+       scale back the on-light range so the field stays a soft veil. */
+    const opaScale = onLight ? 0.55 : 1.0;
+    const reduceMotion = typeof window.matchMedia === 'function'
+      && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const accentIndex = Math.floor(count / 2);
+    const hexes = [];
+    for (let i = 0; i < count; i++) {
+      const tier = pickTier();
+      const size = rand(tier.sMin, tier.sMax);
+      const isAccent = (i === accentIndex);
+      const hex = document.createElement('span');
+      hex.className = isAccent ? styles.hex + ' ' + styles.accent : styles.hex;
+      hex.style.width = size + 'px';
+      hex.style.height = (size * 1.1547) + 'px';
+      hex.style.left = rand(-5, 105) + '%';
+      hex.style.top = rand(-25, 125) + '%';
+      hex.style.setProperty('--cbg-opa-min', (tier.oMin * opaScale).toFixed(3));
+      hex.style.setProperty(
+        '--cbg-opa-max',
+        ((isAccent ? Math.min(tier.oMax + 0.05, 0.28) : tier.oMax) * opaScale).toFixed(3)
+      );
+      hex.style.setProperty('--cbg-dur', rand(11, 18).toFixed(1) + 's');
+      hex.style.setProperty('--cbg-delay', rand(-18, 0).toFixed(1) + 's');
+      hex.dataset.depth = tier.d;
+      bg.appendChild(hex);
+      hexes.push(hex);
+    }
+
+    if (reduceMotion) return undefined;
+
+    /* Scroll-tied parallax. Only run while the host is in viewport
+       (intersection observer flips `visible`). */
+    let visible = false;
+    let ticking = false;
+
+    function update() {
+      const rect = host.getBoundingClientRect();
+      const offset = (rect.top + rect.height / 2) - window.innerHeight / 2;
+      for (const h of hexes) {
+        const depth = parseFloat(h.dataset.depth);
+        const ty = -offset * depth * PARALLAX_FACTOR;
+        h.style.transform = `translate(-50%, -50%) translateY(${ty.toFixed(1)}px)`;
+      }
+      ticking = false;
+    }
+
+    function onScroll() {
+      if (!visible || ticking) return;
+      ticking = true;
+      requestAnimationFrame(update);
+    }
+
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) update();
+    }, {rootMargin: '300px 0px'});
+    io.observe(host);
+
+    window.addEventListener('scroll', onScroll, {passive: true});
+    window.addEventListener('resize', onScroll, {passive: true});
+    update();
+
+    return () => {
+      io.disconnect();
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+      /* Clean up the injected nodes so a remount starts fresh. */
+      for (const h of hexes) h.remove();
+      delete bg.dataset.cbgHydrated;
+    };
+  }, [isBrowser, theme, count]);
+
+  const composed = [
+    styles.bg,
+    theme === 'on-light' ? styles.onLight : null,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return <div ref={ref} className={composed} aria-hidden="true" />;
+}

package/src/components/ConductionBg/ConductionBg.module.css

@@ -0,0 +1,41 @@
+/**
+ * <ConductionBg /> styles. Mirrors preview/conduction-bg.css scoped
+ * under CSS modules so the React component carries its own styling.
+ */
+
+.bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  --cbg-hex: #ffffff;
+  --cbg-accent: var(--c-orange-knvb);
+}
+
+.onLight {
+  --cbg-hex: var(--c-blue-cobalt);
+  --cbg-accent: var(--c-orange-knvb);
+}
+
+.hex {
+  position: absolute;
+  clip-path: var(--hex-pointy-top);
+  background: var(--cbg-hex);
+  will-change: transform, opacity;
+  transform: translate(-50%, -50%);
+  animation: conductionBgBreathe var(--cbg-dur, 14s) ease-in-out var(--cbg-delay, 0s) infinite;
+}
+
+.accent { background: var(--cbg-accent); }
+
+@keyframes conductionBgBreathe {
+  0%, 100% { opacity: var(--cbg-opa-min, 0.04); }
+  50%      { opacity: var(--cbg-opa-max, 0.18); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hex {
+    animation: none;
+    opacity: var(--cbg-opa-max, 0.12);
+  }
+}

package/src/components/ContentCard/ContentCard.jsx

@@ -0,0 +1,126 @@
+/**
+ * <ContentCard /> + <ContentCardGrid />
+ *
+ * Card for an academy entry: blog post, guide, case study, webinar,
+ * tutorial. Two-column card with a hex thumbnail panel on the left
+ * and meta + title + tags on the right.
+ *
+ * Mirrors the "Keep learning…" cards in preview/components/academy.html
+ * and the academy.conduction.nl landing.
+ *
+ * Visual structure:
+ *
+ *   ┌────────────────────────────────────────────┐
+ *   │  ┌────────┐                                │
+ *   │  │  hex   │   Author · Date                │
+ *   │  │  thumb │   Title goes here.             │
+ *   │  │        │   Optional summary line.       │
+ *   │  └────────┘   ⬢ Type  ⬢ Tag  ⬢ Tag         │
+ *   └────────────────────────────────────────────┘
+ *
+ * Card becomes an <a> when href is provided.
+ *
+ * Usage in MDX:
+ *
+ *   <ContentCardGrid columns={2}>
+ *     <ContentCard
+ *       href="/posts/install-opencatalogi"
+ *       contentType="guide"
+ *       title="Install OpenCatalogi in two minutes."
+ *       summary="From app store to first register, no terminal required."
+ *       author={{ name: "Ruben van der Linde" }}
+ *       date="2026-05-05"
+ *       tags={["OpenCatalogi", "Install"]}
+ *       thumbnail={{ icon: <svg>...</svg>, tone: 'cobalt-deep' }}
+ *     />
+ *   </ContentCardGrid>
+ */
+
+import React from 'react';
+import HexThumbnail from '../primitives/HexThumbnail';
+import AuthorByline from '../primitives/AuthorByline';
+import Pill from '../primitives/Pill';
+import {
+  CONTENT_TYPE_LABELS,
+  CONTENT_TYPE_BULLET_COLOR,
+} from '../ContentTypeFilter/contentTypes';
+import styles from './ContentCard.module.css';
+
+export function ContentCardGrid({columns = 2, children, className}) {
+  const composed = [
+    styles.grid,
+    styles['cols-' + columns],
+    className,
+  ].filter(Boolean).join(' ');
+  return <div className={composed}>{children}</div>;
+}
+
+export default function ContentCard({
+  href,
+  contentType,
+  contentTypeLabel,
+  title,
+  summary,
+  author,
+  date,
+  dateLabel,
+  locale,
+  tags = [],
+  thumbnail,
+  className,
+  ...rest
+}) {
+  const Tag = href ? 'a' : 'div';
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+
+  const thumbProps = thumbnail || {};
+  const panelToneClass = thumbProps.panelTone
+    ? styles['panel-' + thumbProps.panelTone]
+    : styles['panel-cobalt-deep'];
+
+  const typeLabel = contentTypeLabel
+    || (contentType && CONTENT_TYPE_LABELS[contentType])
+    || null;
+  const typeBullet = contentType
+    ? CONTENT_TYPE_BULLET_COLOR[contentType]
+    : undefined;
+
+  return (
+    <Tag href={href} className={composed} {...rest}>
+      <div className={[styles.thumbPanel, panelToneClass].join(' ')}>
+        {thumbProps.src
+          ? <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'} src={thumbProps.src} alt={thumbProps.alt} />
+          : <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'}>{thumbProps.icon}</HexThumbnail>}
+      </div>
+
+      <div className={styles.body}>
+        {(author || date) && (
+          <AuthorByline
+            name={author && author.name}
+            avatarSrc={author && author.avatarSrc}
+            initials={author && author.initials}
+            date={date}
+            dateLabel={dateLabel}
+            locale={locale}
+          />
+        )}
+
+        {title && <h3 className={styles.title}>{title}</h3>}
+        {summary && <p className={styles.summary}>{summary}</p>}
+
+        {(typeLabel || tags.length > 0) && (
+          <div className={styles.tags}>
+            {typeLabel && (
+              <Pill bullet bulletColor={typeBullet}>
+                {typeLabel}
+              </Pill>
+            )}
+            {tags.map((tag, i) => (
+              <Pill key={i} bullet bulletColor="var(--c-cobalt-300)">{tag}</Pill>
+            ))}
+          </div>
+        )}
+      </div>
+    </Tag>
+  );
+}