@conduction/docusaurus-preset 1.7.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.7.0",
+  "version": "2.1.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...</>}
@@ -37,9 +40,10 @@
 
 import React from 'react';
 import HexBullet from '../primitives/HexBullet';
+import {appHrefByName} from '../../data/apps-registry';
 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 +53,7 @@ export function PartnerGrid({columns = 3, children, className}) {
 export default function PartnerCard({
   variant = 'full',
   href,
-  tier = 'partner',
+  tier = 'host',
   name,
   logo,
   logoAlt,
@@ -85,17 +89,30 @@ export default function PartnerCard({
     );
   }
 
-  /* Default: full partner card */
+  /* Default: full partner card.
+     The card wrapper is always a <div> rather than an <a>, even when
+     a partner detail href is set, so the per-app pills can be
+     individually clickable links to /apps/<slug>. The card-wide click
+     target is rendered as a stretched-link overlay (.cardLink) that
+     covers the whole card via position:absolute; nested <a> pills
+     sit on top via z-index, so clicks reach the pill instead of the
+     overlay when they land on a pill, and reach the overlay otherwise. */
   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)';
+  const bulletColor = tier === 'certified' ? 'var(--c-orange-knvb)' : 'var(--c-blue-cobalt)';
 
   return (
-    <Tag href={href} className={composed}>
+    <div className={composed}>
+      {href && (
+        <a
+          href={href}
+          className={styles.cardLink}
+          aria-label={name ? `${name} partner page` : 'Partner page'}
+        />
+      )}
       <span className={styles.tier}>{TIER_LABELS[tier] || tier}</span>
       {logo && (
         <div className={styles.avatar}>
@@ -106,15 +123,29 @@ export default function PartnerCard({
       {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>
-          ))}
+          {apps.map((app, i) => {
+            const appUrl = appHrefByName(app);
+            const inner = (
+              <>
+                <HexBullet size="sm" color={bulletColor} />
+                {app}
+              </>
+            );
+            return appUrl ? (
+              <a
+                key={app}
+                href={appUrl}
+                className={styles.appPill}
+              >
+                {inner}
+              </a>
+            ) : (
+              <span key={app} className={styles.appPill}>{inner}</span>
+            );
+          })}
         </div>
       )}
-    </Tag>
+    </div>
   );
 }
 

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

@@ -33,6 +33,21 @@
   text-decoration: none;
   color: inherit;
 }
+/* Stretched-link overlay. Covers the whole card so any click on
+   non-interactive content navigates to the partner detail page,
+   while leaving room for nested links (app pills) to take precedence
+   via z-index. The overlay carries the aria-label since the card
+   itself is no longer the anchor. */
+.cardLink {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 1;
+}
+.cardLink:focus-visible {
+  outline: 2px solid var(--c-blue-cobalt);
+  outline-offset: -2px;
+}
 
 .tier {
   position: absolute;
@@ -49,9 +64,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 +95,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 +110,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;
@@ -100,8 +122,26 @@
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-family: var(--conduction-typography-font-family-code);
+  /* When the pill is rendered as <a> it sits above the cardLink
+     overlay so clicks land on the pill, not the card-wide link. */
+  position: relative;
+  z-index: 2;
+  text-decoration: none;
+  transition: background 160ms, color 160ms;
+}
+/* Hover affordance only when the pill is a real link (i.e. the
+   app is in the registry). Plain <span> pills (e.g. "Nextcloud")
+   stay static. */
+a.appPill:hover {
+  background: var(--c-blue-cobalt);
+  color: white;
+  text-decoration: none;
+}
+.card.tier-certified a.appPill:hover {
+  background: white;
+  color: var(--c-blue-cobalt);
 }
-.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 +222,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.
@@ -37,21 +37,22 @@
  */
 
 import React from 'react';
+import {appHrefByName} from '../../data/apps-registry';
 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 +62,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(' ');
 
@@ -71,13 +72,13 @@ export default function PartnerSidecard({
         {tier === 'certified' && (
           <img
             className={styles.tierBadge}
-            src="/img/brand/avatar-conduction-gold-on-white.svg"
+            src="/img/brand/avatar-conduction-gold.svg"
             alt="Conduction-certified mark"
             width="44"
             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>
 
@@ -85,9 +86,14 @@ export default function PartnerSidecard({
         <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>
-            ))}
+            {partner.apps.map((app) => {
+              const url = appHrefByName(app);
+              return url ? (
+                <a key={app} href={url} className={styles.chip}>{app}</a>
+              ) : (
+                <span key={app} className={styles.chip}>{app}</span>
+              );
+            })}
           </div>
         </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 ---------- */
 
@@ -101,6 +103,15 @@
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-family: var(--conduction-typography-font-family-code);
+  text-decoration: none;
+  transition: background 160ms, color 160ms;
+}
+/* Only the <a> form gets hover affordance — plain <span> chips
+   (apps not in the apps-registry, e.g. Nextcloud) stay static. */
+a.chip:hover {
+  background: var(--c-blue-cobalt);
+  color: white;
+  text-decoration: none;
 }
 
 /* ---------- Solutions list ---------- */

package/src/data/apps-registry.js

@@ -59,3 +59,26 @@ export function getApp(slug) {
 export function getApps(slugs = []) {
   return slugs.map(getApp).filter(Boolean);
 }
+
+/**
+ * Resolve a display-name (e.g. "OpenCatalogi", "DocuDesk", "MyDash")
+ * to its product page href, or undefined when the name is not in the
+ * registry. Used by partner cards / sidecards to turn the apps-shipped
+ * chip row into a clickable link list. Names like "Nextcloud" that
+ * aren't ours fall through and the consumer renders a plain span.
+ *
+ * Match is case-insensitive on both name and slug so consumers can
+ * pass either form ("OpenCatalogi", "opencatalogi", or "OpenCATALOGI")
+ * without each adding their own normalisation.
+ */
+export function appHrefByName(name) {
+  if (!name) return undefined;
+  const target = String(name).toLowerCase();
+  for (const slug of APP_SLUGS) {
+    const entry = APPS_REGISTRY[slug];
+    if (slug === target || entry.name.toLowerCase() === target) {
+      return entry.productHref;
+    }
+  }
+  return undefined;
+}