@conduction/docusaurus-preset 0.1.0

package/src/components/CookieCli/CookieCli.jsx

@@ -0,0 +1,223 @@
+/**
+ * <CookieCli />
+ *
+ * Terminal-styled cookie consent banner. Mirrors the kit's
+ * preview/components/cookie-cli.html: black terminal panel with green
+ * prompt, IBM Plex Mono throughout, four cookie categories shown as
+ * [1] [2] [3] [4] options, three action buttons.
+ *
+ * Persists choice in localStorage under a configurable key. Won't
+ * re-render after a decision unless the page calls window
+ * .ConductionCookieCli.reset().
+ *
+ * Per huisstijl: terminal dark IS the accent here. The Plex Mono
+ * caption and the [1] [2] keys read as a Conduction tell.
+ *
+ * Usage in MDX (or anywhere in the app):
+ *
+ *   <CookieCli
+ *     siteHost="conduction.nl"
+ *     categories={[
+ *       {key: 'essential',   label: 'essential',   tag: 'required', required: true, defaultOn: true},
+ *       {key: 'analytics',   label: 'analytics',   tag: 'opt-in',   defaultOn: true},
+ *       {key: 'preferences', label: 'preferences', tag: 'opt-in'},
+ *       {key: 'marketing',   label: 'marketing',   tag: 'opt-in'},
+ *     ]}
+ *     onAccept={(selected) => { /* track or fire telemetry *\/ }}
+ *   />
+ *
+ * The component reads + writes the selection from localStorage
+ * automatically; <onAccept/> is called with the resolved selection
+ * on every save.
+ */
+
+import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './CookieCli.module.css';
+
+const STORAGE_KEY = 'conduction:cookie-cli';
+
+const DEFAULT_CATEGORIES = [
+  {key: 'essential',   label: 'essential',   tag: 'required', required: true, defaultOn: true},
+  {key: 'analytics',   label: 'analytics',   tag: 'opt-in',   defaultOn: false},
+  {key: 'preferences', label: 'preferences', tag: 'opt-in',   defaultOn: false},
+  {key: 'marketing',   label: 'marketing',   tag: 'opt-in',   defaultOn: false},
+];
+
+function readStored() {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function writeStored(selection) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      ...selection,
+      _ts: Date.now(),
+    }));
+  } catch (e) {
+    /* localStorage may be disabled (private mode, quota); fail open */
+  }
+}
+
+export default function CookieCli({
+  siteHost = 'conduction.nl',
+  categories = DEFAULT_CATEGORIES,
+  onAccept,
+  className,
+}) {
+  const isBrowser = useIsBrowser();
+
+  const initial = useMemo(() => {
+    const fromStore = readStored();
+    if (fromStore) return fromStore;
+    const fresh = {};
+    for (const c of categories) fresh[c.key] = !!c.defaultOn;
+    return fresh;
+  }, [categories]);
+
+  const [selected, setSelected] = useState(initial);
+  const [decided, setDecided] = useState(() => readStored() != null);
+
+  /* Sync local state to localStorage if the dataset arrived from
+     storage on a fresh mount. Skipped on SSR to keep hydration stable. */
+  useEffect(() => {
+    if (!isBrowser) return;
+    const stored = readStored();
+    if (stored) {
+      setSelected(stored);
+      setDecided(true);
+    }
+  }, [isBrowser]);
+
+  /* Expose a window.ConductionCookieCli.reset() so the privacy page
+     can re-show the prompt when a user wants to change their choice. */
+  useEffect(() => {
+    if (!isBrowser) return;
+    window.ConductionCookieCli = {
+      reset: () => {
+        try { window.localStorage.removeItem(STORAGE_KEY); } catch (e) {/* */}
+        setDecided(false);
+      },
+      get: () => readStored(),
+    };
+    return () => { delete window.ConductionCookieCli; };
+  }, [isBrowser]);
+
+  const toggle = useCallback((cat) => {
+    if (cat.required) return;
+    setSelected((prev) => ({...prev, [cat.key]: !prev[cat.key]}));
+  }, []);
+
+  const save = useCallback((finalSelection) => {
+    writeStored(finalSelection);
+    setSelected(finalSelection);
+    setDecided(true);
+    if (typeof onAccept === 'function') onAccept(finalSelection);
+  }, [onAccept]);
+
+  const acceptAll = useCallback(() => {
+    const all = {};
+    for (const c of categories) all[c.key] = true;
+    save(all);
+  }, [categories, save]);
+
+  const saveCurrent = useCallback(() => save(selected), [save, selected]);
+
+  const rejectNonEssential = useCallback(() => {
+    const minimal = {};
+    for (const c of categories) minimal[c.key] = !!c.required;
+    save(minimal);
+  }, [categories, save]);
+
+  /* Bind keyboard shortcuts: A = accept all, S = save, R = reject,
+     1-9 = toggle category n. */
+  useEffect(() => {
+    if (!isBrowser || decided) return;
+    function onKey(e) {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const k = e.key.toLowerCase();
+      if (k === 'a') { e.preventDefault(); acceptAll(); return; }
+      if (k === 's') { e.preventDefault(); saveCurrent(); return; }
+      if (k === 'r') { e.preventDefault(); rejectNonEssential(); return; }
+      const idx = parseInt(e.key, 10);
+      if (!Number.isNaN(idx) && idx >= 1 && idx <= categories.length) {
+        e.preventDefault();
+        toggle(categories[idx - 1]);
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isBrowser, decided, acceptAll, saveCurrent, rejectNonEssential, toggle, categories]);
+
+  /* Hide the banner once the user has made a decision; the prompt
+     reappears via window.ConductionCookieCli.reset(). */
+  if (!isBrowser || decided) return null;
+
+  return (
+    <div className={[styles.term, className].filter(Boolean).join(' ')} role="dialog" aria-label="Cookie consent">
+      <div className={styles.bar}>
+        <div className={styles.dots}>
+          <span className={[styles.dot, styles.dotR].join(' ')} />
+          <span className={[styles.dot, styles.dotY].join(' ')} />
+          <span className={[styles.dot, styles.dotG].join(' ')} />
+        </div>
+        <div className={styles.title}>
+          {'— '}<b>{siteHost}</b>{' · cookie-consent — bash —'}
+        </div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.prompt}>
+          <span className={styles.user}>you</span>
+          <span className={styles.sigil}>@</span>
+          <span className={styles.host}>{siteHost}</span>
+          <span className={styles.sigil}>:</span>
+          <span className={styles.path}>~</span>
+          <span className={styles.sigil}>$</span>{' '}
+          <span className={styles.cmd}>cat ./cookies.toml</span>
+        </div>
+        <p className={styles.comment}># Pick what you're OK with. Essential cookies are required.</p>
+
+        <ul className={styles.opts}>
+          {categories.map((c, i) => {
+            const on = !!selected[c.key] || !!c.required;
+            return (
+              <li
+                key={c.key}
+                className={on ? styles.optOn : null}
+                onClick={() => toggle(c)}
+                role="button"
+                tabIndex={c.required ? -1 : 0}
+                aria-pressed={on}
+                style={c.required ? {cursor: 'default'} : undefined}
+              >
+                <span className={styles.optKey}>[{i + 1}]</span>
+                <span className={styles.optCheck}>{on ? '✓' : '☐'}</span>
+                <span className={styles.optLabel}>{c.label}</span>
+                {c.tag && <span className={styles.optTag}>{c.tag}</span>}
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className={styles.actions}>
+          <button type="button" className={[styles.btn, styles.btnPrimary].join(' ')} onClick={acceptAll}>
+            <span className={styles.btnKey}>A</span>Accept all
+          </button>
+          <button type="button" className={styles.btn} onClick={saveCurrent}>
+            <span className={styles.btnKey}>S</span>Save selection
+          </button>
+          <button type="button" className={styles.btn} onClick={rejectNonEssential}>
+            <span className={styles.btnKey}>R</span>Reject non-essential
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/CookieCli/CookieCli.module.css

@@ -0,0 +1,166 @@
+/**
+ * <CookieCli /> styles. Mirrors preview/components/cookie-cli.html
+ * exactly: terminal dark panel, IBM Plex Mono throughout, three
+ * action buttons with key glyphs.
+ */
+
+.term {
+  --term-bg: #0A0F1A;
+  --term-fg: #C9D4E5;
+  --term-fg-dim: #5F6E86;
+  --term-cobalt: #6892D9;
+  --term-green: #5FE39A;
+  --term-border: #1A2540;
+
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+
+  background: var(--term-bg);
+  color: var(--term-fg);
+  border: 1px solid var(--term-border);
+  border-radius: 8px;
+  box-shadow:
+    0 0 0 1px rgba(33, 70, 139, 0.12),
+    0 24px 64px -16px rgba(10, 23, 47, 0.45),
+    inset 0 0 80px rgba(0, 0, 0, 0.4);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  line-height: 1.55;
+  width: calc(100% - 48px);
+  max-width: 640px;
+  overflow: hidden;
+}
+
+.bar {
+  background: #060912;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--term-border);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--term-fg-dim);
+}
+.dots { display: flex; gap: 6px; }
+.dot { width: 10px; height: 10px; border-radius: 50%; }
+.dotR { background: #FF6B7A; }
+.dotY { background: #F7C76F; }
+.dotG { background: var(--term-green); }
+.title { flex: 1; text-align: center; }
+.title b { color: var(--term-fg); }
+
+.body { padding: 18px 20px; }
+
+.prompt { color: var(--term-fg); margin: 6px 0; }
+.user { color: var(--term-green); }
+.host { color: var(--term-cobalt); }
+.sigil { color: var(--term-fg-dim); }
+.path { color: var(--term-fg-dim); }
+.cmd { color: var(--term-fg); }
+
+.comment {
+  color: var(--term-fg-dim);
+  margin: 6px 0;
+}
+
+.opts {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.opts li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: var(--term-fg);
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  width: 100%;
+}
+.opts li:hover { background: rgba(255, 255, 255, 0.02); }
+.opts li:focus-visible {
+  outline: 1px solid var(--term-cobalt);
+  outline-offset: 2px;
+}
+.optKey { color: var(--term-fg-dim); }
+.optCheck { color: var(--term-fg-dim); width: 12px; }
+.optOn .optCheck { color: var(--term-green); }
+.optLabel { color: var(--term-fg); flex: 1; }
+.optTag {
+  font-size: 10px;
+  color: var(--term-fg-dim);
+  border: 1px solid var(--term-border);
+  padding: 1px 7px;
+  border-radius: 3px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--term-border);
+  flex-wrap: wrap;
+}
+
+.btn {
+  background: transparent;
+  color: var(--term-fg);
+  border: 1px solid var(--term-border);
+  padding: 6px 12px;
+  font-family: inherit;
+  font-size: 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.btn:hover {
+  background: rgba(33, 70, 139, 0.10);
+  border-color: var(--term-cobalt);
+}
+
+.btnKey {
+  background: var(--term-border);
+  color: var(--term-cobalt);
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-size: 10px;
+}
+
+.btnPrimary {
+  background: var(--c-orange-knvb);
+  color: white;
+  border-color: var(--c-orange-knvb);
+}
+.btnPrimary:hover {
+  background: var(--c-orange-knvb);
+  border-color: white;
+  filter: brightness(1.05);
+}
+.btnPrimary .btnKey {
+  background: rgba(0, 0, 0, 0.2);
+  color: white;
+}
+
+@media (max-width: 600px) {
+  .term {
+    bottom: 12px;
+    width: calc(100% - 24px);
+  }
+  .actions { flex-direction: column; }
+  .btn { justify-content: center; }
+}

package/src/components/CtaBanner/CtaBanner.jsx

@@ -0,0 +1,61 @@
+/**
+ * <CtaBanner />
+ *
+ * Cobalt-900 marketing panel with a centred title, lede, and a
+ * primary + secondary CTA pair. Used at the bottom of marketing
+ * pages ("Ready to install?", "Pick an app. Install it. Done.").
+ *
+ * Mirrors the cta-banner section in preview/pages/landing.html and
+ * the .cta-banner mock in preview/components.html.
+ *
+ * Composition:
+ *   - <Button variant="on-dark-primary" />  for the white pill
+ *   - <Button variant="on-dark-secondary" /> for the bordered ghost
+ *   - <ConductionBg />                       for the parallax hex layer
+ *
+ * Usage in MDX:
+ *
+ *   <CtaBanner
+ *     title="Pick an app. Install it. Done."
+ *     lede={<>Drop OpenCatalogi into your <span className="next-blue">Nextcloud</span> in two minutes.</>}
+ *     primaryCta={{ label: "Install from app store", href: "/apps" }}
+ *     secondaryCta={{ label: "Get a demo via a partner", href: "/partners" }}
+ *   />
+ */
+
+import React from 'react';
+import ConductionBg from '../ConductionBg/ConductionBg';
+import Button from '../primitives/Button';
+import styles from './CtaBanner.module.css';
+
+export default function CtaBanner({
+  title,
+  lede,
+  primaryCta,
+  secondaryCta,
+}) {
+  return (
+    <section className={styles.section}>
+      <div className={styles.banner}>
+        <ConductionBg />
+        {title && <h2 className={styles.title}>{title}</h2>}
+        {lede && <p className={styles.lede}>{lede}</p>}
+
+        {(primaryCta || secondaryCta) && (
+          <div className={styles.actions}>
+            {primaryCta && (
+              <Button variant="on-dark-primary" href={primaryCta.href || '#'}>
+                {primaryCta.label}
+              </Button>
+            )}
+            {secondaryCta && (
+              <Button variant="on-dark-secondary" href={secondaryCta.href || '#'}>
+                {secondaryCta.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/CtaBanner/CtaBanner.module.css

@@ -0,0 +1,65 @@
+/**
+ * <CtaBanner /> styles. Mirrors the .cta-banner section from
+ * preview/pages/landing.html exactly: cobalt-blue (NOT cobalt-900)
+ * panel inside a 1280px container, centred copy, on-dark Buttons.
+ *
+ * Button + ConductionBg carry their own styling; this module only
+ * owns the panel chrome (frame, title, lede, actions row).
+ */
+
+.section {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 96px 64px;
+  background: white;
+  font-family: var(--conduction-typography-font-family-body);
+}
+@media (max-width: 700px) {
+  .section { padding: 64px 16px; }
+}
+
+.banner {
+  position: relative;
+  background: var(--c-blue-cobalt);
+  color: white;
+  border-radius: var(--radius-xl);
+  padding: 72px 64px;
+  overflow: hidden;
+  text-align: center;
+}
+@media (max-width: 700px) {
+  .banner { padding: 48px 24px; }
+}
+
+.title {
+  position: relative;
+  color: white;
+  font-size: 40px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 12px;
+}
+@media (max-width: 700px) {
+  .title { font-size: 28px; }
+}
+
+.lede {
+  position: relative;
+  font-size: 17px;
+  color: rgba(255, 255, 255, 0.78);
+  line-height: 1.5;
+  max-width: 560px;
+  margin: 0 auto 32px;
+}
+.lede :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+.lede :global(.cg-yellow) { color: var(--c-commonground-yellow); }
+
+.actions {
+  position: relative;
+  display: inline-flex;
+  gap: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}

package/src/components/DetailHero/DetailHero.jsx

@@ -0,0 +1,143 @@
+/**
+ * <DetailHero />
+ *
+ * Hero pattern shared by app-detail, solution-page, and partner-detail
+ * pages. Two-column layout: title + supporting copy on the left,
+ * an optional illustration (typically an <AppMock>) on the right.
+ *
+ * The page-subject icon renders as a small leading hex inline with
+ * the H1 title, *not* as a giant right-side panel. That frees the
+ * right column for an illustration that shows the product itself.
+ *
+ *     [crumb]
+ *     [status badges]
+ *     [hex] [Title]                        [    illustration    ]
+ *     tagline
+ *     [primary] [secondary] [tertiary]
+ *
+ * If no illustration is passed, the hero collapses to a single
+ * column and the title row stays inline-hex + h1.
+ *
+ * Usage:
+ *
+ *   <DetailHero
+ *     appId="mydash"
+ *     crumb={[{label: 'Apps', href: '/apps'}, 'MyDash']}
+ *     status={{label: 'Beta', color: 'var(--c-orange-knvb)'}}
+ *     version="v0.9"
+ *     locales="NL · EN"
+ *     title="MyDash"
+ *     tagline="..."
+ *     primaryCta={{label: 'Install from app store', href: '/install'}}
+ *     icon={<svg>...</svg>}
+ *     iconColor="var(--c-blue-cobalt)"
+ *     illustration={<AppMock app="mydash" />}
+ *   />
+ */
+
+import React from 'react';
+import HexBullet from '../primitives/HexBullet';
+import Button from '../primitives/Button';
+import {downloadsForApp, formatDownloads} from '../../data/app-downloads';
+import styles from './DetailHero.module.css';
+
+export default function DetailHero({
+  crumb,
+  status,
+  version,
+  locales,
+  title,
+  tagline,
+  primaryCta,
+  secondaryCta,
+  tertiaryCta,
+  icon,
+  iconColor,
+  illustration,
+  className,
+  appId,
+  downloads,
+}) {
+  const dlCount = downloads != null ? downloads : (appId ? downloadsForApp(appId) : 0);
+  const hasIllustration = Boolean(illustration);
+
+  return (
+    <section className={[styles.head, hasIllustration && styles.withIllustration, className].filter(Boolean).join(' ')}>
+      {crumb && Array.isArray(crumb) && (
+        <div className={styles.crumb}>
+          {crumb.map((c, i) => {
+            const sep = i < crumb.length - 1 ? <span className={styles.sep}>/</span> : null;
+            if (typeof c === 'string') {
+              return <React.Fragment key={i}>{c}{sep}</React.Fragment>;
+            }
+            return (
+              <React.Fragment key={i}>
+                {c.href
+                  ? <a href={c.href}>{c.label}</a>
+                  : <span>{c.label}</span>}
+                {sep}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      )}
+
+      <div className={styles.headInner}>
+        <div className={styles.copy}>
+          {(status || version || locales || dlCount > 0) && (
+            <div className={styles.badgeRow}>
+              {status && (
+                <span className={styles.badge}>
+                  <HexBullet size="md" color={status.color || 'var(--c-mint-500)'} />
+                  {status.label}
+                </span>
+              )}
+              {version && <span className={[styles.badge, styles.versionBadge].join(' ')}>{version}</span>}
+              {locales && <span className={[styles.badge, styles.versionBadge].join(' ')}>{locales}</span>}
+              {dlCount > 0 && (
+                <span
+                  className={[styles.badge, styles.downloadsBadge].join(' ')}
+                  title="Total release-asset downloads from GitHub. Updated weekdays at 09:00."
+                  data-app-downloads={appId || ''}
+                >
+                  <svg className={styles.downloadIcon} viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 3v12m0 0l-5-5m5 5l5-5M5 21h14"/>
+                  </svg>
+                  {formatDownloads(dlCount)} downloads
+                </span>
+              )}
+            </div>
+          )}
+
+          {title && (
+            <h1 className={styles.title}>
+              {icon && (
+                <span
+                  className={styles.titleIcon}
+                  style={iconColor ? {background: iconColor} : undefined}
+                  aria-hidden="true"
+                >
+                  {icon}
+                </span>
+              )}
+              <span className={styles.titleText}>{title}</span>
+            </h1>
+          )}
+          {tagline && <p className={styles.tagline}>{tagline}</p>}
+
+          {(primaryCta || secondaryCta || tertiaryCta) && (
+            <div className={styles.actions}>
+              {primaryCta && <Button variant="primary" href={primaryCta.href}>{primaryCta.label}</Button>}
+              {secondaryCta && <Button variant="secondary" href={secondaryCta.href}>{secondaryCta.label}</Button>}
+              {tertiaryCta && <Button variant="ghost" href={tertiaryCta.href}>{tertiaryCta.label} →</Button>}
+            </div>
+          )}
+        </div>
+
+        {hasIllustration && (
+          <div className={styles.illustration}>{illustration}</div>
+        )}
+      </div>
+    </section>
+  );
+}