@conduction/docusaurus-preset 0.1.0

package/src/components/FeatureList/FeatureList.jsx

@@ -0,0 +1,54 @@
+/**
+ * <FeatureList /> + <FeatureItem />
+ *
+ * Long, single-column feature list from preview/components/feature-list.html.
+ * Used in the broad column on app and solution detail pages, scales
+ * cleanly to 6-12 items.
+ *
+ * Each feature pairs a cobalt-50 hex glyph with a heading and a short
+ * body paragraph.
+ *
+ * Usage in MDX:
+ *
+ *   <FeatureList items={[
+ *     {icon: <svg>...</svg>, title: 'Schemas you write once.', body: '...'},
+ *     {icon: <svg>...</svg>, title: 'One backbone, every app.', body: '...'},
+ *   ]} />
+ *
+ * Or with children for full MDX flexibility:
+ *
+ *   <FeatureList>
+ *     <FeatureItem icon={<svg/>} title="...">
+ *       Body paragraph...
+ *     </FeatureItem>
+ *   </FeatureList>
+ */
+
+import React from 'react';
+import styles from './FeatureList.module.css';
+
+export function FeatureItem({icon, title, body, children}) {
+  return (
+    <div className={styles.feature}>
+      <div className={styles.glyph}>{icon}</div>
+      <div>
+        {title && <h3 className={styles.title}>{title}</h3>}
+        {/* `body` prop is a string or inline JSX, wrap in <p> for typography.
+            `children` come from MDX which already wraps loose text in <p>;
+            using <div> here avoids the nested <p> DOM-validation warning. */}
+        {body && <p className={styles.body}>{body}</p>}
+        {!body && children && <div className={styles.body}>{children}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default function FeatureList({items, children, className}) {
+  return (
+    <div className={[styles.list, className].filter(Boolean).join(' ')}>
+      {items
+        ? items.map((it, i) => <FeatureItem key={i} {...it} />)
+        : children}
+    </div>
+  );
+}

package/src/components/FeatureList/FeatureList.module.css

@@ -0,0 +1,52 @@
+/**
+ * <FeatureList /> styles. Mirrors feature-list.css exactly.
+ */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.feature {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 24px;
+}
+
+.glyph {
+  width: 56px;
+  height: 64px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-50);
+  color: var(--c-blue-cobalt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.glyph svg {
+  width: 26px;
+  height: 26px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 8px;
+  color: var(--c-cobalt-900);
+}
+.title :global(.next-blue) { color: var(--c-nextcloud-blue); }
+
+.body {
+  font-size: 15px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 0;
+}
+.body :global(.next-blue) { color: var(--c-nextcloud-blue); }

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -0,0 +1,101 @@
+/**
+ * <FeaturedCard />
+ *
+ * Hero spot at the top of the academy landing. Cobalt-900 ground, body
+ * copy on the left, a large pointy-top hex with two satellite hexes on
+ * the right. Used to surface one editorial pick per page.
+ *
+ * Mirrors the .featured-card section in preview/components/academy.html.
+ *
+ * Per huisstijl, the satellite-3 hex is the page's single KNVB orange
+ * accent; the rest is solid cobalt + white. Pass `accent="cobalt"` to
+ * suppress the orange accent on screens that already use orange
+ * elsewhere.
+ *
+ * Usage in MDX:
+ *
+ *   <FeaturedCard
+ *     href="/posts/install-opencatalogi"
+ *     eyebrow="Featured guide"
+ *     title="Install OpenCatalogi in two minutes."
+ *     lede="From app store to first register, no terminal required."
+ *     ctaLabel="Read the guide"
+ *     author={{ name: "Ruben van der Linde" }}
+ *     date="2026-05-05"
+ *     thumbnail={{ icon: <svg>...</svg> }}
+ *   />
+ */
+
+import React from 'react';
+import HexThumbnail from '../primitives/HexThumbnail';
+import HexBullet from '../primitives/HexBullet';
+import AuthorByline from '../primitives/AuthorByline';
+import styles from './FeaturedCard.module.css';
+
+export default function FeaturedCard({
+  href,
+  eyebrow,
+  title,
+  lede,
+  ctaLabel = 'Read more',
+  author,
+  date,
+  dateLabel,
+  locale,
+  thumbnail,
+  accent = 'orange',
+  className,
+}) {
+  const Tag = href ? 'a' : 'div';
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+  const thumbProps = thumbnail || {};
+
+  return (
+    <Tag href={href} className={composed}>
+      <div className={styles.body}>
+        {eyebrow && (
+          <span className={styles.eyebrow}>
+            <HexBullet size="md" color="var(--c-orange-knvb)" />
+            <span>{eyebrow}</span>
+          </span>
+        )}
+        {title && <h2 className={styles.title}>{title}</h2>}
+        {lede && <p className={styles.lede}>{lede}</p>}
+
+        {(author || date) && (
+          <div className={styles.meta}>
+            <AuthorByline
+              name={author && author.name}
+              avatarSrc={author && author.avatarSrc}
+              initials={author && author.initials}
+              date={date}
+              dateLabel={dateLabel}
+              locale={locale}
+              tone="on-dark"
+            />
+          </div>
+        )}
+
+        {ctaLabel && (
+          <span className={styles.cta}>
+            <span>{ctaLabel}</span>
+            <span aria-hidden="true">→</span>
+          </span>
+        )}
+      </div>
+
+      <div className={styles.visual} aria-hidden="true">
+        {thumbProps.src
+          ? <HexThumbnail size="xl" tone="cobalt" src={thumbProps.src} alt={thumbProps.alt} />
+          : <HexThumbnail size="xl" tone={thumbProps.tone || 'cobalt'}>{thumbProps.icon}</HexThumbnail>}
+        <span className={[styles.satellite, styles.s1].join(' ')} />
+        <span className={[styles.satellite, styles.s2].join(' ')} />
+        <span className={[
+          styles.satellite,
+          styles.s3,
+          accent === 'orange' ? styles.s3Orange : styles.s3Cobalt,
+        ].join(' ')} />
+      </div>
+    </Tag>
+  );
+}

package/src/components/FeaturedCard/FeaturedCard.module.css

@@ -0,0 +1,98 @@
+/**
+ * <FeaturedCard /> styles. Mirrors .featured-card in
+ * preview/components/academy.css.
+ */
+
+.card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  background: var(--c-cobalt-900);
+  color: white;
+  border-radius: var(--radius-xl);
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.card:hover { text-decoration: none; color: white; }
+
+@media (max-width: 900px) {
+  .card { grid-template-columns: 1fr; padding: var(--space-8); }
+}
+
+.body { min-width: 0; }
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-300);
+  margin-bottom: var(--space-4);
+}
+
+.title {
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  color: white;
+  margin: 0 0 var(--space-4);
+}
+@media (max-width: 700px) { .title { font-size: 28px; } }
+
+.lede {
+  font-size: 17px;
+  color: var(--c-cobalt-200);
+  line-height: 1.55;
+  margin: 0 0 var(--space-6);
+  max-width: 50ch;
+}
+
+.meta { margin-bottom: var(--space-5); }
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 22px;
+  background: white;
+  color: var(--c-cobalt-900);
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: var(--radius-pill);
+  text-decoration: none;
+  transition: background 120ms ease;
+}
+.card:hover .cta { background: var(--c-cobalt-50); }
+
+.visual {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  min-height: 300px;
+}
+
+.satellite {
+  position: absolute;
+  width: 64px;
+  height: 74px;
+  clip-path: var(--hex-pointy-top);
+}
+.s1 { top: 8px;     left: calc(50% - 160px); background: var(--c-cobalt-700); }
+.s2 { bottom: 12px; right: calc(50% - 168px); background: var(--c-cobalt-700); }
+.s3 { top: 40%;     right: calc(50% - 172px); }
+.s3Orange { background: var(--c-orange-knvb); }
+.s3Cobalt { background: var(--c-cobalt-700); }
+
+@media (max-width: 900px) {
+  .visual { min-height: 240px; }
+  .satellite { width: 48px; height: 56px; }
+}

package/src/components/GameModal/GameModal.jsx

@@ -0,0 +1,197 @@
+/**
+ * <GameModal />
+ *
+ * The end-of-game dialog for the Conduction mini-games (hex-rain, the
+ * canal-footer boats, future invaders / domino / hex-tetris). Mounts
+ * once per page; listens for `connext:gameend` CustomEvents (the event
+ * name is a brand-internal identifier, retained for compatibility),
+ * opens
+ * with the matching copy, tracks total games found in localStorage so
+ * the cross-site progress bar is consistent.
+ *
+ * Mirrors preview/components/game-modal.html. The previous JS-only
+ * version (game-modal.js) gets replaced by this component on any
+ * Docusaurus surface that mounts <GameModal/>.
+ *
+ * Game payload shape, fired by the playing component:
+ *
+ *   window.dispatchEvent(new CustomEvent('connext:gameend', {
+ *     detail: {
+ *       id: 'hexrain',
+ *       won: true,                 // or false
+ *       score: 12,                 // numeric
+ *       summary: '12 / 12 collected'
+ *     }
+ *   }));
+ *
+ * Usage in MDX (mount once on the layout, not per page):
+ *
+ *   import {GameModal} from '@conduction/docusaurus-preset/components';
+ *   <GameModal />
+ *
+ * Custom games table (default covers the five planned mini-games):
+ *
+ *   <GameModal games={[
+ *     {id: 'hexrain',  label: 'Twelve apps'},
+ *     {id: 'boats',    label: 'Sink the boats'},
+ *     {id: 'invaders', label: 'Hex-vaders'},
+ *     {id: 'domino',   label: 'Hex-domino'},
+ *     {id: 'tetris',   label: 'Hex-tris'},
+ *   ]} />
+ */
+
+import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './GameModal.module.css';
+
+const STORAGE_KEY = 'conduction:minigames';
+
+const DEFAULT_GAMES = [
+  {id: 'hexrain',      label: 'Twelve apps · hex rain'},
+  {id: 'boats',        label: 'Sink the boats · footer canal'},
+  {id: 'invaders',     label: 'Hex-vaders · cookie CLI'},
+  {id: 'logo-memory',  label: 'Logo memory · clients marquee'},
+  {id: 'kade-cyclist', label: 'Kade cyclist · footer kade'},
+];
+
+function readFound() {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch (e) { return {}; }
+}
+
+function writeFound(found) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(found));
+  } catch (e) {/* fail open */}
+}
+
+export default function GameModal({games = DEFAULT_GAMES, className}) {
+  const isBrowser = useIsBrowser();
+  const [open, setOpen] = useState(false);
+  const [event, setEvent] = useState(null);
+  const [found, setFound] = useState({});
+
+  /* On mount: read found-games table from localStorage and subscribe
+     to the `connext:gameend` event. Each event opens the modal with
+     the supplied copy and (if won) marks the game as found. */
+  useEffect(() => {
+    if (!isBrowser) return;
+    setFound(readFound());
+
+    function onEnd(e) {
+      const detail = e.detail || {};
+      setEvent(detail);
+      setOpen(true);
+      /* Discovery vs. victory: any game-end counts the game as "found"
+         because a few of the games (kade-cyclist, future endless
+         runners) never reach a clean win state. The scoreboard pill
+         still reflects the actual performance for that round. */
+      if (detail.id) {
+        setFound((prev) => {
+          if (prev[detail.id]) return prev;
+          const next = {...prev, [detail.id]: true};
+          writeFound(next);
+          return next;
+        });
+      }
+    }
+    window.addEventListener('connext:gameend', onEnd);
+    return () => window.removeEventListener('connext:gameend', onEnd);
+  }, [isBrowser]);
+
+  /* Escape closes the modal. */
+  useEffect(() => {
+    if (!isBrowser || !open) return;
+    function onKey(e) { if (e.key === 'Escape') setOpen(false); }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isBrowser, open]);
+
+  const close = useCallback(() => {
+    /* Notify the playing runtime so it can tear down its in-page UI
+       (lifted hexes, kade stage, etc.) and restore the original
+       surface. Without this the marquee or kade stays in its game-
+       over visual until the next page load. */
+    if (event?.id) {
+      Promise.resolve().then(() => {
+        window.dispatchEvent(new CustomEvent('connext:gameclose', {detail: {id: event.id}}));
+      });
+    }
+    setOpen(false);
+  }, [event]);
+  const replay = useCallback(() => {
+    /* Fire a `connext:gamereplay` event so the playing component (which
+       listens for it) can re-init. We don't dispatch from inside an
+       event handler that came from React, so use a microtask to keep
+       the call stack clean. */
+    if (event?.id) {
+      Promise.resolve().then(() => {
+        window.dispatchEvent(new CustomEvent('connext:gamereplay', {detail: {id: event.id}}));
+      });
+    }
+    setOpen(false);
+  }, [event]);
+
+  const foundCount = useMemo(() => Object.values(found).filter(Boolean).length, [found]);
+  const total = games.length;
+  const percent = total > 0 ? Math.round((foundCount / total) * 100) : 0;
+
+  if (!isBrowser || !open || !event) return null;
+
+  const eyebrow = event.won ? 'Mini-game complete' : 'Game over';
+  const title = event.title || (event.won ? 'Nice run.' : "That's all of them.");
+  const subtitle = event.subtitle ||
+    (event.won
+      ? "You've cleared a hidden Conduction mini-game."
+      : "Try again any time, the rain doesn't stop.");
+
+  return (
+    <div className={[styles.modal, className].filter(Boolean).join(' ')} role="dialog" aria-modal="true" aria-labelledby="gm-title">
+      <div className={styles.overlay} onClick={close} />
+      <div className={styles.panel}>
+        <button type="button" className={styles.close} onClick={close} aria-label="Close">×</button>
+        <p className={styles.eyebrow}>{eyebrow}</p>
+        <h2 className={styles.title} id="gm-title">{title}</h2>
+        <p className={styles.subtitle}>{subtitle}</p>
+
+        {typeof event.score !== 'undefined' && (
+          <span className={styles.scorePill}>{event.summary || `score: ${event.score}`}</span>
+        )}
+
+        <div className={styles.progress}>
+          <div className={styles.progressLabel}>
+            <span><strong>{foundCount}</strong> / {total} mini-games found</span>
+            <span>{percent}%</span>
+          </div>
+          <div className={styles.progressBar}>
+            <div className={styles.progressFill} style={{width: percent + '%'}} />
+          </div>
+        </div>
+
+        <ul className={styles.grid}>
+          {games.map((g) => (
+            <li key={g.id} className={found[g.id] ? styles.gridItemFound : styles.gridItem}>
+              <span className={styles.gridHex} aria-hidden="true" />
+              <span>{g.label}</span>
+            </li>
+          ))}
+        </ul>
+
+        <p className={styles.cta}>
+          {foundCount < total
+            ? `${total - foundCount} more game${total - foundCount === 1 ? '' : 's'} hidden somewhere. Keep clicking.`
+            : "All five found. You read the kit."}
+        </p>
+
+        <div className={styles.actions}>
+          <button type="button" className={styles.btnSecondary} onClick={close}>Close</button>
+          <button type="button" className={styles.btnPrimary} onClick={replay}>Play again</button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/GameModal/GameModal.module.css

@@ -0,0 +1,184 @@
+/**
+ * <GameModal /> styles. Mirrors preview/components/game-modal.css
+ * for the panel + overlay; cobalt-on-white per huisstijl.
+ */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 23, 47, 0.55);
+  backdrop-filter: blur(2px);
+  cursor: pointer;
+}
+
+.panel {
+  position: relative;
+  background: white;
+  color: var(--c-cobalt-700);
+  border-radius: var(--radius-xl);
+  padding: 40px 36px 32px;
+  width: calc(100% - 48px);
+  max-width: 520px;
+  box-shadow: var(--shadow-3, 0 30px 80px -20px rgba(10, 23, 47, 0.4));
+}
+
+.close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  font-size: 20px;
+  cursor: pointer;
+  line-height: 1;
+  font-family: inherit;
+  transition: background 120ms ease;
+}
+.close:hover { background: var(--c-cobalt-100); }
+
+.eyebrow {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-orange-knvb);
+  margin: 0 0 8px;
+  font-weight: 500;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 8px;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+  margin: 0 0 16px;
+}
+
+.scorePill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  margin-bottom: 24px;
+}
+
+.progress {
+  margin: 24px 0 16px;
+}
+.progressLabel {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 8px;
+}
+.progressLabel strong { color: var(--c-cobalt-900); font-weight: 700; }
+
+.progressBar {
+  height: 6px;
+  background: var(--c-cobalt-50);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.progressFill {
+  height: 100%;
+  background: var(--c-orange-knvb);
+  transition: width 240ms ease;
+}
+
+.grid {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.gridItem,
+.gridItemFound {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+}
+.gridItemFound { color: var(--c-cobalt-900); font-weight: 500; }
+.gridHex {
+  width: 10px;
+  height: 12px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-200);
+  flex-shrink: 0;
+}
+.gridItemFound .gridHex { background: var(--c-mint-500); }
+
+.cta {
+  font-size: 13px;
+  color: var(--c-cobalt-400);
+  margin: 16px 0 24px;
+  font-style: italic;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.btnSecondary {
+  background: white;
+  color: var(--c-cobalt-700);
+  border: 1px solid var(--c-cobalt-200);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 120ms ease;
+}
+.btnSecondary:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+
+.btnPrimary {
+  background: var(--c-blue-cobalt);
+  color: white;
+  border: 1px solid var(--c-blue-cobalt);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 120ms ease;
+}
+.btnPrimary:hover { background: var(--c-cobalt-700); border-color: var(--c-cobalt-700); }