@conduction/docusaurus-preset 0.1.0

package/src/components/PartnerCard/PartnerCard.jsx

@@ -0,0 +1,130 @@
+/**
+ * <PartnerCard /> + <PartnerGrid />
+ *
+ * Partner card from preview/components/partner-cards.html.
+ *
+ * Three tiers:
+ *   - partner   (default, white panel + cobalt-50 tier pill)
+ *   - certified (white panel + gold tier pill)
+ *   - strategic (cobalt-fill inverse + white tier pill)
+ *
+ * Visual structure:
+ *   ┌─────────────────────────────┐
+ *   │ [logo plate]      TIER     │
+ *   │ Name                        │
+ *   │ Summary paragraph           │
+ *   │ ──────────                  │
+ *   │ ⬢ App  ⬢ App  ⬢ App         │  ← apps-used pills
+ *   └─────────────────────────────┘
+ *
+ * The companion <BecomePartner/> card slots into the trailing grid
+ * cell as the call-to-action.
+ *
+ * Usage:
+ *
+ *   <PartnerGrid>
+ *     <PartnerCard
+ *       href="/partners/yard"
+ *       tier="partner"
+ *       name="YARD"
+ *       logo="/img/partners/yard.png"
+ *       summary={<>Digital design- en development-bureau uit Utrecht...</>}
+ *       apps={['MyDash', 'OpenCatalogi']}
+ *     />
+ *     <BecomePartner href="/partners/become" />
+ *   </PartnerGrid>
+ */
+
+import React from 'react';
+import HexBullet from '../primitives/HexBullet';
+import styles from './PartnerCard.module.css';
+
+const TIER_LABELS = {partner: 'Partner', certified: 'Certified', strategic: 'Strategic'};
+
+export function PartnerGrid({columns = 3, children, className}) {
+  const composed = [styles.grid, styles['cols-' + columns], className].filter(Boolean).join(' ');
+  return <div className={composed}>{children}</div>;
+}
+
+export default function PartnerCard({
+  variant = 'full',
+  href,
+  tier = 'partner',
+  name,
+  logo,
+  logoAlt,
+  summary,
+  why,
+  apps = [],
+  className,
+}) {
+  /* Compact "other" variant: small mini-avatar (44x50 hex) on the
+     left, name + why on the right. Used at the bottom of partner-
+     detail pages to point to a handful of related partners. The
+     mini-avatar gets a tier-coloured ring to echo the tier styling
+     on the full card. */
+  if (variant === 'other') {
+    const composed = [
+      styles.other,
+      styles['tier-' + tier],
+      className,
+    ].filter(Boolean).join(' ');
+    const Tag = href ? 'a' : 'div';
+    return (
+      <Tag href={href} className={composed}>
+        {logo && (
+          <div className={styles.miniAvatar}>
+            <img src={logo} alt={logoAlt || name + ' logo'} />
+          </div>
+        )}
+        <div>
+          {name && <div className={styles.otherName}>{name}</div>}
+          {(why || summary) && <div className={styles.otherWhy}>{why || summary}</div>}
+        </div>
+      </Tag>
+    );
+  }
+
+  /* Default: full partner card */
+  const composed = [
+    styles.card,
+    styles['tier-' + tier],
+    className,
+  ].filter(Boolean).join(' ');
+  const Tag = href ? 'a' : 'div';
+  const bulletColor = tier === 'strategic' ? 'var(--c-orange-knvb)' : 'var(--c-blue-cobalt)';
+
+  return (
+    <Tag href={href} className={composed}>
+      <span className={styles.tier}>{TIER_LABELS[tier] || tier}</span>
+      {logo && (
+        <div className={styles.avatar}>
+          <img src={logo} alt={logoAlt || name + ' logo'} />
+        </div>
+      )}
+      {name && <div className={styles.name}>{name}</div>}
+      {summary && <div className={styles.summary}>{summary}</div>}
+      {apps.length > 0 && (
+        <div className={styles.apps}>
+          {apps.map((app, i) => (
+            <span key={i} className={styles.appPill}>
+              <HexBullet size="sm" color={bulletColor} />
+              {app}
+            </span>
+          ))}
+        </div>
+      )}
+    </Tag>
+  );
+}
+
+export function BecomePartner({href, eyebrow = 'Become a partner', title, body, ctaLabel}) {
+  return (
+    <a href={href} className={[styles.card, styles.become].join(' ')}>
+      <div className={styles.becomeEyebrow}>{eyebrow}</div>
+      {title && <h4 className={styles.becomeTitle}>{title}</h4>}
+      {body && <p className={styles.becomeBody}>{body}</p>}
+      {ctaLabel && <span className={styles.becomeArrow}>{ctaLabel} →</span>}
+    </a>
+  );
+}

package/src/components/PartnerCard/PartnerCard.module.css

@@ -0,0 +1,198 @@
+/**
+ * <PartnerCard /> styles. Mirrors partner-cards.css exactly.
+ */
+
+.grid {
+  display: grid;
+  gap: 24px;
+  align-items: stretch;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-shadow: var(--shadow-1);
+  text-decoration: none;
+  color: inherit;
+  transition: all 160ms ease;
+  position: relative;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-2);
+  text-decoration: none;
+  color: inherit;
+}
+
+.tier {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 4px 9px;
+  border-radius: var(--radius-pill);
+  font-weight: 600;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+}
+
+.tier-certified .tier { background: var(--c-gold-500); color: var(--c-cobalt-900); }
+.tier-strategic { background: var(--c-blue-cobalt); color: white; border-color: var(--c-blue-cobalt); }
+.tier-strategic .tier { background: white; color: var(--c-blue-cobalt); }
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  background: white;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  height: 36px;
+  box-sizing: content-box;
+}
+.avatar img {
+  max-height: 36px;
+  max-width: 140px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
+
+.name { font-size: 18px; font-weight: 700; color: var(--c-cobalt-900); }
+.tier-strategic .name { color: white; }
+
+.summary { font-size: 14px; line-height: 1.55; color: var(--c-cobalt-700); }
+.summary :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.tier-strategic .summary { color: rgba(255, 255, 255, 0.78); }
+.tier-strategic .summary :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+
+.apps {
+  margin-top: auto;
+  padding-top: 16px;
+  border-top: 1px solid var(--c-cobalt-100);
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.tier-strategic .apps { border-top-color: rgba(255, 255, 255, 0.18); }
+
+.appPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-family: var(--conduction-typography-font-family-code);
+}
+.tier-strategic .appPill { background: rgba(255, 255, 255, 0.12); color: white; }
+
+/* Become-a-partner CTA tile */
+.become {
+  background: var(--c-cobalt-50);
+  border: 1px dashed var(--c-cobalt-300);
+  box-shadow: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 32px;
+}
+.become:hover { border-color: var(--c-blue-cobalt); transform: none; box-shadow: var(--shadow-1); }
+
+.becomeEyebrow {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 8px;
+}
+.becomeTitle {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 6px;
+  color: var(--c-cobalt-900);
+}
+.becomeBody {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+  margin: 0 0 14px;
+  max-width: 56ch;
+}
+.becomeArrow {
+  color: var(--c-blue-cobalt);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* Compact "other" variant. Used at the bottom of partner-detail
+   pages ("Adjacent specialists") and anywhere else a small dense
+   reference to a partner makes sense. Mini-avatar on the left,
+   name + why on the right; tier-coloured ring echoes the full
+   card's tier styling. */
+.other {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  transition: all 160ms ease;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.other:hover {
+  border-color: var(--c-blue-cobalt);
+  transform: translateY(-1px);
+  text-decoration: none;
+  color: inherit;
+}
+.miniAvatar {
+  width: 44px;
+  height: 50px;
+  clip-path: var(--hex-pointy-top);
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.miniAvatar img {
+  max-width: 28px;
+  max-height: 28px;
+  object-fit: contain;
+}
+.other.tier-certified .miniAvatar { box-shadow: inset 0 0 0 2px var(--c-gold-500); }
+.other.tier-strategic .miniAvatar { box-shadow: inset 0 0 0 2px var(--c-orange-knvb); }
+
+.otherName {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  margin-bottom: 4px;
+}
+.otherWhy {
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+  line-height: 1.5;
+}

package/src/components/PartnerDirectory/PartnerDirectory.jsx

@@ -0,0 +1,122 @@
+/**
+ * <PartnerDirectory />
+ *
+ * Filterable partner directory: composes <FacetedFilters/> (sidebar),
+ * <PartnerGrid/>, <PartnerCard/>, and an optional <BecomePartner/> CTA.
+ *
+ * Facets are auto-derived from the partners array:
+ *   - tier: Strategic / Certified / Partner (only shown when ≥1 partner)
+ *   - app:  union of every partners[].apps[] value, sorted by count
+ *
+ * Filter logic: a partner is shown when it matches every active facet.
+ * Within a facet, multiple selections are OR-ed (any-of). Across
+ * facets, selections are AND-ed (all-of).
+ *
+ * Usage in MDX:
+ *
+ *   <PartnerDirectory
+ *     partners={[
+ *       {href: '/partners/acato', tier: 'strategic', name: 'Acato',
+ *        logo: '/img/partners/acato.png',
+ *        summary: <>Nederlandse open-source specialist…</>,
+ *        apps: ['OpenRegister', 'OpenCatalogi', 'DocuDesk']},
+ *       …
+ *     ]}
+ *     becomePartner={{
+ *       href: '#become-a-partner',
+ *       title: 'Ship Conduction to your customers.',
+ *       body:  'Join as Partner, Certified, or Strategic.',
+ *       ctaLabel: 'Apply below',
+ *     }}
+ *   />
+ */
+
+import React, {useState, useMemo} from 'react';
+import FacetedFilters from '../FacetedFilters/FacetedFilters';
+import PartnerCard, {PartnerGrid, BecomePartner} from '../PartnerCard/PartnerCard';
+import styles from './PartnerDirectory.module.css';
+
+const TIER_LABELS = {partner: 'Partner', certified: 'Certified', strategic: 'Strategic'};
+const TIER_ORDER = ['strategic', 'certified', 'partner'];
+
+function deriveFacets(partners) {
+  const tierItems = TIER_ORDER
+    .map(value => ({
+      value,
+      label: TIER_LABELS[value],
+      count: partners.filter(p => p.tier === value).length,
+    }))
+    .filter(item => item.count > 0);
+
+  const appCounts = {};
+  for (const p of partners) {
+    for (const a of p.apps || []) {
+      appCounts[a] = (appCounts[a] || 0) + 1;
+    }
+  }
+  const appItems = Object.entries(appCounts)
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+    .map(([value, count]) => ({value, label: value, count}));
+
+  const facets = [];
+  if (tierItems.length > 0) facets.push({key: 'tier', label: 'Partner tier',     items: tierItems});
+  if (appItems.length  > 0) facets.push({key: 'app',  label: 'Apps & services',  items: appItems});
+  return facets;
+}
+
+function partnerMatches(partner, selected) {
+  const tierFilter = selected.tier || [];
+  if (tierFilter.length > 0 && !tierFilter.includes(partner.tier)) return false;
+
+  const appFilter = selected.app || [];
+  if (appFilter.length > 0) {
+    const partnerApps = partner.apps || [];
+    if (!appFilter.some(a => partnerApps.includes(a))) return false;
+  }
+
+  return true;
+}
+
+export default function PartnerDirectory({
+  partners = [],
+  becomePartner,
+  gridColumns = 2,
+  emptyState = 'No partners match the current filters.',
+  className,
+}) {
+  const [selected, setSelected] = useState({});
+  const facets = useMemo(() => deriveFacets(partners), [partners]);
+  const filtered = useMemo(
+    () => partners.filter(p => partnerMatches(p, selected)),
+    [partners, selected],
+  );
+
+  return (
+    <div className={[styles.layout, className].filter(Boolean).join(' ')}>
+      <FacetedFilters
+        facets={facets}
+        selected={selected}
+        onChange={setSelected}
+      />
+      <div className={styles.results}>
+        {filtered.length > 0 ? (
+          <PartnerGrid columns={gridColumns}>
+            {filtered.map((p, i) => (
+              <PartnerCard key={p.href || p.name || i} {...p} />
+            ))}
+            {becomePartner && <BecomePartner {...becomePartner} />}
+          </PartnerGrid>
+        ) : (
+          <>
+            <p className={styles.empty}>{emptyState}</p>
+            {becomePartner && (
+              <PartnerGrid columns={gridColumns}>
+                <BecomePartner {...becomePartner} />
+              </PartnerGrid>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/PartnerDirectory/PartnerDirectory.module.css

@@ -0,0 +1,25 @@
+.layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 56px;
+  align-items: start;
+}
+
+.results {
+  min-width: 0;
+}
+
+.empty {
+  font-size: 16px;
+  color: var(--c-cobalt-700);
+  text-align: center;
+  padding: 64px 0 32px;
+  margin: 0;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+}

package/src/components/PartnerSidecard/PartnerSidecard.jsx

@@ -0,0 +1,116 @@
+/**
+ * <PartnerSidecard />
+ *
+ * Narrow info panel for the partner detail page right column. Three
+ * stacked sections:
+ *   1. Tier badge.       Pulls the same colour treatment as <PartnerCard>
+ *                        (Partner = cobalt-50 pill, Certified = gold pill
+ *                        with a small gold Conduction avatar to read as a
+ *                        Conduction-issued credential, Strategic = white
+ *                        pill on a cobalt-fill card).
+ *   2. Apps supported.   Chip row from partner.apps.
+ *   3. Solutions shipped. Chip row from solutionsBySlugs(partner.solutions),
+ *                        each linking to its /solutions/<slug> page.
+ *
+ * Optional `cta` renders a primary button at the bottom of the card —
+ * usually the same "Talk to {partner}" target as the hero's primary CTA,
+ * so the rail is self-sufficient when the user scrolls past the hero.
+ *
+ * The card itself doesn't position-stick. The consuming page wraps a
+ * 2-col layout (main + rail) and applies the sticky behaviour to the
+ * column wrapper, so the rail starts after the hero and trails the
+ * scrolling body content.
+ *
+ * Usage:
+ *
+ *   import {PARTNERS} from '@site/src/data/partners-catalog';
+ *   import {solutionsBySlugs} from '@site/src/data/solutions-catalog';
+ *
+ *   const partner = PARTNERS.find(p => p.name === 'Acato');
+ *   const solutions = solutionsBySlugs(partner.solutions);
+ *
+ *   <PartnerSidecard
+ *     partner={partner}
+ *     solutions={solutions}
+ *     cta={{label: 'Talk to Acato', href: 'mailto:hello@acato.nl'}}
+ *   />
+ */
+
+import React from 'react';
+import styles from './PartnerSidecard.module.css';
+
+const TIER_LABELS = {
+  partner: 'Partner',
+  certified: 'Certified',
+  strategic: 'Strategic',
+};
+
+const TIER_BLURB = {
+  partner:
+    'Partner-tier teams have shipped Conduction in production at one or two clients. Listed in the directory, on the community Slack, joining quarterly office hours.',
+  certified:
+    'Certified per app by Conduction. Joint go-to-market on tenders and a higher SLA on shared customers. Carries the Conduction credential.',
+  strategic:
+    'Strategic partner with shared roadmap commitments and joint engineering. By invitation. Co-sale on government tenders, co-branded hosting offerings.',
+};
+
+export default function PartnerSidecard({
+  partner,
+  solutions = [],
+  cta,
+  className,
+}) {
+  if (!partner) return null;
+  const tier = partner.tier || 'partner';
+  const tierLabel = TIER_LABELS[tier] || tier;
+  const composed = [styles.rail, styles[`tier-${tier}`], className].filter(Boolean).join(' ');
+
+  return (
+    <aside className={composed}>
+      <div className={styles.tierCard}>
+        {tier === 'certified' && (
+          <img
+            className={styles.tierBadge}
+            src="/img/brand/avatar-conduction-gold-on-white.svg"
+            alt="Conduction-certified mark"
+            width="44"
+            height="44"
+          />
+        )}
+        <div className={styles.tierLabel}>{tier === 'partner' ? 'Partner' : `${tierLabel} partner`}</div>
+        <p className={styles.tierBlurb}>{TIER_BLURB[tier]}</p>
+      </div>
+
+      {partner.apps && partner.apps.length > 0 && (
+        <div className={styles.section}>
+          <h4 className={styles.sectionTitle}>Apps they ship</h4>
+          <div className={styles.chipRow}>
+            {partner.apps.map((app) => (
+              <span key={app} className={styles.chip}>{app}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {solutions.length > 0 && (
+        <div className={styles.section}>
+          <h4 className={styles.sectionTitle}>Solutions they deliver</h4>
+          <div className={styles.chipColumn}>
+            {solutions.map((s) => (
+              <a key={s.slug} href={s.href} className={styles.solutionLink}>
+                <span className={styles.solutionIcon} aria-hidden="true">{s.icon}</span>
+                <span className={styles.solutionTitle}>{s.shortTitle || s.title}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {cta && (
+        <a href={cta.href} className={styles.cta}>
+          {cta.label}
+        </a>
+      )}
+    </aside>
+  );
+}