@conduction/docusaurus-preset 2.0.0 → 2.1.0

package/package.json

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

package/src/components/PartnerCard/PartnerCard.jsx

@@ -40,6 +40,7 @@
 
 import React from 'react';
 import HexBullet from '../primitives/HexBullet';
+import {appHrefByName} from '../../data/apps-registry';
 import styles from './PartnerCard.module.css';
 
 const TIER_LABELS = {host: 'Host', service: 'Service', certified: 'Certified'};
@@ -88,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 === '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}>
@@ -109,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;
@@ -107,6 +122,24 @@
   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-certified .appPill { background: rgba(255, 255, 255, 0.12); color: white; }
 

package/src/components/PartnerSidecard/PartnerSidecard.jsx

@@ -37,6 +37,7 @@
  */
 
 import React from 'react';
+import {appHrefByName} from '../../data/apps-registry';
 import styles from './PartnerSidecard.module.css';
 
 const TIER_LABELS = {
@@ -71,7 +72,7 @@ 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"
@@ -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

@@ -103,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;
+}