@conduction/docusaurus-preset 1.7.0 → 2.0.0

package/package.json

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

package/src/components/PartnerCard/PartnerCard.jsx

@@ -3,10 +3,13 @@
  *
  * 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)
+ * Three tiers (low → high):
+ *   - host      (default, white panel + cobalt-50 tier pill) —
+ *               ships our apps, no SLA with Conduction.
+ *   - service   (white panel + gold tier pill) — SLA, third-line
+ *               support, roadmap input.
+ *   - certified (cobalt-fill inverse + white tier pill) — trained,
+ *               joint roadmap, tender-eligible.
  *
  * Visual structure:
  *   ┌─────────────────────────────┐
@@ -25,7 +28,7 @@
  *   <PartnerGrid>
  *     <PartnerCard
  *       href="/partners/yard"
- *       tier="partner"
+ *       tier="host"
  *       name="YARD"
  *       logo="/img/partners/yard.png"
  *       summary={<>Digital design- en development-bureau uit Utrecht...</>}
@@ -39,7 +42,7 @@ import React from 'react';
 import HexBullet from '../primitives/HexBullet';
 import styles from './PartnerCard.module.css';
 
-const TIER_LABELS = {partner: 'Partner', certified: 'Certified', strategic: 'Strategic'};
+const TIER_LABELS = {host: 'Host', service: 'Service', certified: 'Certified'};
 
 export function PartnerGrid({columns = 3, children, className}) {
   const composed = [styles.grid, styles['cols-' + columns], className].filter(Boolean).join(' ');
@@ -49,7 +52,7 @@ export function PartnerGrid({columns = 3, children, className}) {
 export default function PartnerCard({
   variant = 'full',
   href,
-  tier = 'partner',
+  tier = 'host',
   name,
   logo,
   logoAlt,
@@ -92,7 +95,7 @@ export default function PartnerCard({
     className,
   ].filter(Boolean).join(' ');
   const Tag = href ? 'a' : 'div';
-  const bulletColor = tier === 'strategic' ? 'var(--c-orange-knvb)' : 'var(--c-blue-cobalt)';
+  const bulletColor = tier === 'certified' ? 'var(--c-orange-knvb)' : 'var(--c-blue-cobalt)';
 
   return (
     <Tag href={href} className={composed}>

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

@@ -49,9 +49,16 @@
   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); }
+/* Service tier: gold pill on a white card. */
+.tier-service .tier { background: var(--c-gold-500); color: var(--c-cobalt-900); }
+
+/* Certified tier: cobalt-fill inverse card. The compound .card.tier-certified
+   selector is deliberate — it lifts specificity above the plain .card rule
+   so the cobalt fill reliably wins over .card { background: white } even
+   after CSS-module bundlers reshuffle declaration order. Same for the
+   nested colour rules below. */
+.card.tier-certified { background: var(--c-blue-cobalt); color: white; border-color: var(--c-blue-cobalt); }
+.tier-certified .tier { background: white; color: var(--c-blue-cobalt); }
 
 .avatar {
   display: inline-flex;
@@ -73,12 +80,12 @@
 }
 
 .name { font-size: 18px; font-weight: 700; color: var(--c-cobalt-900); }
-.tier-strategic .name { color: white; }
+.tier-certified .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); }
+.tier-certified .summary { color: rgba(255, 255, 255, 0.78); }
+.tier-certified .summary :global(.next-blue) { color: var(--c-nextcloud-cyan); }
 
 .apps {
   margin-top: auto;
@@ -88,7 +95,7 @@
   gap: 6px;
   flex-wrap: wrap;
 }
-.tier-strategic .apps { border-top-color: rgba(255, 255, 255, 0.18); }
+.tier-certified .apps { border-top-color: rgba(255, 255, 255, 0.18); }
 
 .appPill {
   display: inline-flex;
@@ -101,7 +108,7 @@
   font-size: 12px;
   font-family: var(--conduction-typography-font-family-code);
 }
-.tier-strategic .appPill { background: rgba(255, 255, 255, 0.12); color: white; }
+.tier-certified .appPill { background: rgba(255, 255, 255, 0.12); color: white; }
 
 /* Become-a-partner CTA tile */
 .become {
@@ -182,8 +189,8 @@
   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); }
+.other.tier-service .miniAvatar { box-shadow: inset 0 0 0 2px var(--c-gold-500); }
+.other.tier-certified .miniAvatar { box-shadow: inset 0 0 0 2px var(--c-orange-knvb); }
 
 .otherName {
   font-size: 15px;

package/src/components/PartnerDirectory/PartnerDirectory.jsx

@@ -5,27 +5,32 @@
  * <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
+ *   - tier:     Certified / Service / Host (only shown when ≥1 partner)
+ *   - offering: union of every partners[].apps[] AND .solutions[]
+ *               value, sorted by count. Solutions get pretty labels;
+ *               unknown slugs fall back to the slug itself.
  *
  * 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).
+ * facets, selections are AND-ed (all-of). The offering facet matches
+ * against the union of the partner's apps and solutions, so picking
+ * "Woo" shows every partner that ships the Woo solution.
  *
  * Usage in MDX:
  *
  *   <PartnerDirectory
  *     partners={[
- *       {href: '/partners/acato', tier: 'strategic', name: 'Acato',
+ *       {href: '/partners/acato', tier: 'certified', name: 'Acato',
  *        logo: '/img/partners/acato.png',
- *        summary: <>Nederlandse open-source specialist…</>,
- *        apps: ['OpenRegister', 'OpenCatalogi', 'DocuDesk']},
+ *        summary: <>Digital agency uit Almere…</>,
+ *        apps: ['OpenCatalogi', 'OpenRegister', 'OpenConnector'],
+ *        solutions: ['woo']},
  *       …
  *     ]}
  *     becomePartner={{
  *       href: '#become-a-partner',
  *       title: 'Ship Conduction to your customers.',
- *       body:  'Join as Partner, Certified, or Strategic.',
+ *       body:  'Three tiers: Host, Service, Certified.',
  *       ctaLabel: 'Apply below',
  *     }}
  *   />
@@ -36,8 +41,21 @@ 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'];
+const TIER_LABELS = {host: 'Host', service: 'Service', certified: 'Certified'};
+const TIER_ORDER = ['certified', 'service', 'host'];
+
+// Pretty labels for solution slugs that the catalog uses. Anything not
+// in this map falls back to the raw slug, so a new solution keeps
+// working without an explicit registration.
+const SOLUTION_LABELS = {
+  woo: 'Woo',
+  archief: 'Archief',
+  'software-catalog': 'Software catalog',
+  'mkb-workspace': 'MKB workspace',
+  zaakafhandeling: 'Zaakafhandeling',
+  'legacy-erp': 'Legacy ERP',
+  'nen-7510': 'NEN 7510',
+};
 
 function deriveFacets(partners) {
   const tierItems = TIER_ORDER
@@ -48,19 +66,29 @@ function deriveFacets(partners) {
     }))
     .filter(item => item.count > 0);
 
-  const appCounts = {};
+  // Combined offering facet: apps + solutions. Each entry records its
+  // kind so the filter can match against the right partner field.
+  // Items are stored under a stable value namespaced by kind
+  // ('app:OpenCatalogi', 'solution:woo') so an app and a solution
+  // with the same name never collide.
+  const offeringCounts = new Map(); // value → {label, count, kind, raw}
+  const bump = (kind, raw, label) => {
+    const value = `${kind}:${raw}`;
+    const existing = offeringCounts.get(value);
+    if (existing) existing.count += 1;
+    else offeringCounts.set(value, {value, label, count: 1, kind, raw});
+  };
   for (const p of partners) {
-    for (const a of p.apps || []) {
-      appCounts[a] = (appCounts[a] || 0) + 1;
-    }
+    for (const a of p.apps || []) bump('app', a, a);
+    for (const s of p.solutions || []) bump('solution', s, SOLUTION_LABELS[s] || s);
   }
-  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 offeringItems = Array.from(offeringCounts.values())
+    .sort((a, b) => b.count - a.count || a.label.localeCompare(b.label))
+    .map(({value, label, count}) => ({value, label, 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});
+  if (tierItems.length     > 0) facets.push({key: 'tier',     label: 'Partner tier',       items: tierItems});
+  if (offeringItems.length > 0) facets.push({key: 'offering', label: 'Apps and solutions', items: offeringItems});
   return facets;
 }
 
@@ -68,10 +96,17 @@ 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 offeringFilter = selected.offering || [];
+  if (offeringFilter.length > 0) {
     const partnerApps = partner.apps || [];
-    if (!appFilter.some(a => partnerApps.includes(a))) return false;
+    const partnerSolutions = partner.solutions || [];
+    const ok = offeringFilter.some(value => {
+      const [kind, raw] = value.split(':');
+      if (kind === 'app') return partnerApps.includes(raw);
+      if (kind === 'solution') return partnerSolutions.includes(raw);
+      return false;
+    });
+    if (!ok) return false;
   }
 
   return true;

package/src/components/PartnerSidecard/PartnerSidecard.jsx

@@ -4,10 +4,10 @@
  * 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).
+ *                        (Host = cobalt-50 pill, Service = gold pill,
+ *                        Certified = white pill on a cobalt-fill card,
+ *                        with a small gold Conduction avatar to read as
+ *                        a Conduction-issued credential).
  *   2. Apps supported.   Chip row from partner.apps.
  *   3. Solutions shipped. Chip row from solutionsBySlugs(partner.solutions),
  *                        each linking to its /solutions/<slug> page.
@@ -40,18 +40,18 @@ import React from 'react';
 import styles from './PartnerSidecard.module.css';
 
 const TIER_LABELS = {
-  partner: 'Partner',
+  host: 'Host',
+  service: 'Service',
   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.',
+  host:
+    'Host partners ship our open-source apps to their customers. They sell, host, and resell Nextcloud-supported variants through their own channels. No SLA with Conduction, no direct line to our support, not eligible to respond to tenders with our products.',
+  service:
+    'Service partners hold an SLA with Conduction. Their team can call us directly for third-line support, with named contacts and input on bug priority and feature requests. They run rollouts; we back them up.',
   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.',
+    'Certified partners are trained, audited, and on the joint roadmap with Conduction. Eligible to co-sale on public tenders with our products, and the Conduction-credential mark on their own collateral.',
 };
 
 export default function PartnerSidecard({
@@ -61,7 +61,7 @@ export default function PartnerSidecard({
   className,
 }) {
   if (!partner) return null;
-  const tier = partner.tier || 'partner';
+  const tier = partner.tier || 'host';
   const tierLabel = TIER_LABELS[tier] || tier;
   const composed = [styles.rail, styles[`tier-${tier}`], className].filter(Boolean).join(' ');
 
@@ -77,7 +77,7 @@ export default function PartnerSidecard({
             height="44"
           />
         )}
-        <div className={styles.tierLabel}>{tier === 'partner' ? 'Partner' : `${tierLabel} partner`}</div>
+        <div className={styles.tierLabel}>{`${tierLabel} partner`}</div>
         <p className={styles.tierBlurb}>{TIER_BLURB[tier]}</p>
       </div>
 

package/src/components/PartnerSidecard/PartnerSidecard.module.css

@@ -25,15 +25,17 @@
   box-shadow: var(--shadow-1);
 }
 
-.tier-strategic .tierCard {
+.tier-certified .tierCard {
+  /* Cobalt-fill card carries the Conduction-issued credential treatment
+     for top-tier partners. */
   background: var(--c-blue-cobalt);
   border-color: var(--c-blue-cobalt);
   color: white;
 }
 
-.tier-certified .tierCard {
-  /* white card, but a hairline gold stripe + the gold avatar reads it as
-     "Conduction-issued credential" rather than just another Partner. */
+.tier-service .tierCard {
+  /* white card, but a hairline gold stripe reads it as a service-level
+     SLA partner rather than a plain Host. */
   border-top: 4px solid var(--c-gold-500);
 }
 
@@ -53,8 +55,8 @@
   margin-bottom: var(--space-2);
   font-weight: 600;
 }
-.tier-strategic .tierLabel { color: rgba(255, 255, 255, 0.78); }
-.tier-certified .tierLabel { color: var(--c-gold-600, #8B6914); }
+.tier-certified .tierLabel { color: rgba(255, 255, 255, 0.78); }
+.tier-service .tierLabel { color: var(--c-gold-600, #8B6914); }
 
 .tierBlurb {
   font-size: 13px;
@@ -62,7 +64,7 @@
   color: var(--c-cobalt-700);
   margin: 0;
 }
-.tier-strategic .tierBlurb { color: rgba(255, 255, 255, 0.85); }
+.tier-certified .tierBlurb { color: rgba(255, 255, 255, 0.85); }
 
 /* ---------- Generic section ---------- */