@conduction/docusaurus-preset 1.3.1 → 1.4.0

package/README.md

@@ -60,6 +60,8 @@ The function returns a complete Docusaurus config with brand defaults pre-applie
 | `i18n` |  | nl / en / de / fr, NL default | Override the brand-default i18n block. |
 | `navbar` |  | locale dropdown + GitHub | Merged into the brand-default navbar object. |
 | `footer` |  | three-column link grid + KvK/BTW copyright | Per-property fallback: any of `style` / `links` / `copyright` you omit keeps the brand default. Pass `footer: { links: [...] }` to swap columns and inherit the brand copyright. |
+| `footerBrand` |  | `{ wordmark: 'Conduction' }` | Overrides the wordmark in the canal-footer's left brand block. Pass `{ wordmark: 'X' }` for a single brand or `{ brands: [{wordmark, logo, href}, ...] }` for product pages co-built with a partner (rendered side by side). |
+| `minigames` |  | `true` | Set `false` to drop the brand canal-footer's boat-sinking + kade-cyclist mini-games on product pages. The static skyline + canal decoration are kept. |
 | `customCss` |  | `[]` | Site-specific CSS, appended to `brand.css`. |
 | `presets` |  | `[['classic', …]]` | Replaces the default preset list. |
 | `plugins` |  | `[]` | Docusaurus plugins. |

package/package.json

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

package/src/components/DetailHero/DetailHero.jsx

@@ -33,6 +33,10 @@
  *     iconColor="var(--c-blue-cobalt)"
  *     illustration={<AppMock app="mydash" />}
  *   />
+ *
+ * Each cta object also accepts `tone: "orange"` to flip the primary
+ * (or secondary) variant to the KNVB-orange accent. Reserved for
+ * product pages with an orange-leaning brand identity (mydash).
  */
 
 import React from 'react';
@@ -127,8 +131,24 @@ export default function DetailHero({
 
           {(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>}
+              {primaryCta && (
+                <Button
+                  variant="primary"
+                  tone={primaryCta.tone}
+                  href={primaryCta.href}
+                >
+                  {primaryCta.label}
+                </Button>
+              )}
+              {secondaryCta && (
+                <Button
+                  variant="secondary"
+                  tone={secondaryCta.tone}
+                  href={secondaryCta.href}
+                >
+                  {secondaryCta.label}
+                </Button>
+              )}
               {tertiaryCta && <Button variant="ghost" href={tertiaryCta.href}>{tertiaryCta.label} →</Button>}
             </div>
           )}

package/src/components/primitives/Button.jsx

@@ -14,11 +14,17 @@
  *   - ghost:      plain text + arrow
  *   - on-dark:    primary variant inverted for use inside cobalt CTA panels
  *
+ * Tone (optional): override the primary/secondary fill colour. The
+ * brand default is cobalt; product pages with an orange-accent identity
+ * (e.g. mydash) pass `tone="orange"` to flip the primary CTA to
+ * KNVB-orange while keeping the rest of the brand chrome intact.
+ *
  * Usage:
  *
  *   <Button href="/apps">Install</Button>
  *   <Button variant="secondary" href="/partners">Get a demo</Button>
  *   <Button variant="ghost" href="https://github.com/...">View on GitHub →</Button>
+ *   <Button tone="orange" href="/install">Install from app store</Button>
  */
 
 import React from 'react';
@@ -26,6 +32,7 @@ import styles from './Button.module.css';
 
 export default function Button({
   variant = 'primary',
+  tone,
   href,
   size = 'md',
   className,
@@ -36,6 +43,7 @@ export default function Button({
     styles.btn,
     styles['v-' + variant],
     styles['s-' + size],
+    tone && styles['t-' + tone],
     className,
   ].filter(Boolean).join(' ');
 

package/src/components/primitives/Button.module.css

@@ -86,3 +86,26 @@
 
 .v-on-dark-primary :global(.next-blue),
 .v-primary :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+
+/* Tone modifier for the primary variant. The brand default is the
+   cobalt fill above; product pages with an orange-accent identity
+   (mydash is the first) opt in by passing tone="orange". The brand
+   rule "one orange accent per screen" still applies; this just lets
+   the screen's single accent live on the primary CTA instead of
+   elsewhere. */
+.t-orange.v-primary {
+  background: var(--c-orange-knvb);
+  border-color: var(--c-orange-knvb);
+}
+.t-orange.v-primary:hover {
+  background: var(--c-orange-knvb-700, #c8482f);
+  border-color: var(--c-orange-knvb-700, #c8482f);
+}
+.t-orange.v-secondary {
+  color: var(--c-orange-knvb);
+  border-color: var(--c-orange-knvb);
+}
+.t-orange.v-secondary:hover {
+  border-color: var(--c-orange-knvb-700, #c8482f);
+  color: var(--c-orange-knvb-700, #c8482f);
+}

package/src/index.js

@@ -125,6 +125,9 @@ const baseFooter = () => ({
  *   footer (per-property fallback: any of style/links/copyright the
  *     site omits keeps its brand default — pass `footer: { links: [...] }`
  *     to swap columns while inheriting the KvK/BTW copyright),
+ *   minigames (default true; set false to drop the brand canal-footer's
+ *     boat-sinking + kade-cyclist mini-games on product pages while
+ *     keeping the static skyline + canal decoration),
  *   customCss[] (appended to brand.css), plugins[], presets,
  *   i18n (overrides defaults)
  */
@@ -212,6 +215,26 @@ function createConfig(opts) {
             copyright: f.copyright || baseFooterCopyright(),
           };
         })(),
+        /* The brand canal-footer carries two interactive mini-games
+           (boat-sinking + kade-cyclist). They're a kit-flavour win on
+           the design-system showcase but distract on product-page
+           landings. Surface as a top-level themeConfig flag so the
+           Footer swizzle can drop the game DOM + lazy scripts when a
+           site opts out, while still keeping the static skyline +
+           canal decoration. Default true preserves prior behaviour. */
+        minigames: opts.minigames !== false,
+        /* Footer brand block (the wordmark + tagline + triad + socials
+           on the left of the canal-footer grid).
+             undefined  -> wordmark = 'Conduction' (product-page default;
+                          previously this fell back to the site title,
+                          which made every product-page footer wear the
+                          product's wordmark instead of the company's).
+             { wordmark: 'X' } -> single custom brand
+             { brands: [{wordmark, logo, href}, ...] } -> dual-brand row,
+                          rendered side by side. Used by product pages
+                          built jointly with a partner (mydash + Sendent
+                          is the first case). */
+        footerBrand: opts.footerBrand || null,
       },
       opts.themeConfig || {}
     ),

package/src/theme/Footer/index.jsx

@@ -45,24 +45,44 @@ function FooterLink({label, href, to}) {
 }
 
 export default function Footer() {
-  const {footer, navbar} = useThemeConfig();
+  const themeConfig = useThemeConfig();
+  const {footer, navbar} = themeConfig;
+  /* `minigames` and `footerBrand` are top-level themeConfig flags
+     surfaced through createConfig() opts. See createConfig() in
+     ../../index.js for the option semantics. */
+  const minigamesOn = themeConfig.minigames !== false;
+  const footerBrand = themeConfig.footerBrand || null;
+
   const location = useLocation();
   /* Brand switch follows the pathname: /connext or /commonground sections
      show their styled wordmark and slot themselves into the triad row.
-     Outside sub-brand sections the wordmark falls back to the navbar
-     title (the parent brand, typically "Conduction"). */
+     Outside sub-brand sections the wordmark defaults to "Conduction"
+     for the company anchor. Sites can override the default via
+     `themeConfig.footerBrand = { wordmark: '...' }`, or render a dual
+     brand row via `{ brands: [{wordmark, logo, href}, ...] }` for
+     product pages co-branded with a partner. The legacy fallback to
+     `navbar.title` was misleading on product-page footers (mydash
+     showing "MyDash" rather than "Conduction"); the company-anchor
+     reading wins. */
   const brand = brandFor(location.pathname, navbar?.title);
-  const wordmark = brand ? brand.wordmark : (navbar?.title || 'Conduction');
+  const defaultWordmark = footerBrand?.wordmark || 'Conduction';
+  const wordmark = brand ? brand.wordmark : defaultWordmark;
+  const brandRow = !brand && Array.isArray(footerBrand?.brands) ? footerBrand.brands : null;
 
   /* canal-footer.js is loaded post-hydration so its DOM mutations
      (filling .skyline, animating boats) don't trip React hydration
-     mismatches. See docs in utils/lazyScript.js. */
+     mismatches. See docs in utils/lazyScript.js. We always load
+     canal-footer.js even when minigames are off, because the same
+     script populates the static skyline; canal-footer.js is null-safe
+     against a missing game-hud, so the game wiring no-ops cleanly. */
   useLazyScript('/lib/canal-footer.js', 'canal-footer');
 
-  /* kade-cyclist.js is the second hidden footer minigame. It listens for
-     clicks on .ki-bike-1 / .ki-bike-2 inside the kade strip and runs a
-     dodge-the-traffic round in parallel with the boat game. */
-  useLazyScript('/lib/kade-cyclist.js', 'kade-cyclist');
+  /* kade-cyclist.js is the second hidden footer minigame. Unlike the
+     canal script it has no static side-effects, so when a product page
+     opts out of minigames we feed `useLazyScript` a falsy src to skip
+     the load. The hook still runs unconditionally — rules-of-hooks
+     stays compliant. */
+  useLazyScript(minigamesOn ? '/lib/kade-cyclist.js' : null, 'kade-cyclist');
 
   /* Re-hydrate the canal-footer + kade-cyclist runtimes on every mount,
      including SPA route changes that re-render this Footer component.
@@ -80,14 +100,17 @@ export default function Footer() {
     function tryHydrate() {
       if (cancelled) return;
       const canalReady = !!window.CanalFooter?.hydrate;
-      const kadeReady  = !!window.KadeCyclist?.hydrate;
+      /* When minigames are off, kade-cyclist.js was never loaded, so
+         polling for it would loop forever. Treat it as ready in that
+         case so the loop exits after canal-footer is wired. */
+      const kadeReady  = !minigamesOn || !!window.KadeCyclist?.hydrate;
       if (canalReady) window.CanalFooter.hydrate();
-      if (kadeReady)  window.KadeCyclist.hydrate();
+      if (kadeReady && minigamesOn) window.KadeCyclist.hydrate();
       if (!canalReady || !kadeReady) requestAnimationFrame(tryHydrate);
     }
     tryHydrate();
     return () => { cancelled = true; };
-  }, [isBrowser, location.pathname]);
+  }, [isBrowser, location.pathname, minigamesOn]);
 
   if (!footer) return null;
   const {links = [], copyright} = footer;
@@ -219,23 +242,30 @@ export default function Footer() {
             </svg>
           </div>
 
-          {/* Mini-game HUD: timer + counter */}
-          <div className="game-hud" aria-live="polite" aria-label="Boat-sinking mini game">
-            <div className="hud-block hud-counter">
-              <span className="hud-num" data-counter="">100</span>
-              <span className="hud-label">Boats left</span>
-            </div>
-            <div className="hud-block hud-timer">
-              <span className="hud-num" data-timer="">60</span>
-              <span className="hud-label">Seconds</span>
-            </div>
-          </div>
+          {/* Mini-game HUD + game-over dialog + restart button. canal-footer.js
+              wires these via querySelector; the script's null-guards (added in
+              the same change) let it skip game initialisation cleanly when
+              they're absent on a product page. */}
+          {minigamesOn && (
+            <>
+              <div className="game-hud" aria-live="polite" aria-label="Boat-sinking mini game">
+                <div className="hud-block hud-counter">
+                  <span className="hud-num" data-counter="">100</span>
+                  <span className="hud-label">Boats left</span>
+                </div>
+                <div className="hud-block hud-timer">
+                  <span className="hud-num" data-timer="">60</span>
+                  <span className="hud-label">Seconds</span>
+                </div>
+              </div>
 
-          <div className="game-over" role="dialog" aria-label="Mini game over">
-            <p className="go-title" data-go-title="">Time's up</p>
-            <p className="go-stat"><span data-go-sunk="">0</span> sunk</p>
-            <button type="button" data-restart="">Play again</button>
-          </div>
+              <div className="game-over" role="dialog" aria-label="Mini game over">
+                <p className="go-title" data-go-title="">Time's up</p>
+                <p className="go-stat"><span data-go-sunk="">0</span> sunk</p>
+                <button type="button" data-restart="">Play again</button>
+              </div>
+            </>
+          )}
 
           <svg className="canal-waves" viewBox="0 0 1400 500" preserveAspectRatio="none" aria-hidden="true">
             <path className="w1" d="M 0,96 L 140,82 L 280,96 L 420,82 L 560,96 L 700,82 L 840,96 L 980,82 L 1120,96 L 1260,82 L 1400,96"/>
@@ -245,7 +275,43 @@ export default function Footer() {
 
           <div className="footer-grid">
             <div className="brand">
-              <div className="wm">{wordmark}</div>
+              {brandRow ? (
+                /* Dual-brand row: product pages co-built with a partner
+                   render both wordmarks/logos side by side. The triad
+                   below grows a partner segment in the same order. */
+                <div
+                  className="wm-row"
+                  style={{display: 'flex', alignItems: 'center', gap: '1.25rem', flexWrap: 'wrap'}}
+                >
+                  {brandRow.map((b, i) => {
+                    const inner = b.logo ? (
+                      <img
+                        src={b.logo}
+                        alt={b.wordmark}
+                        style={{height: 32, width: 'auto', display: 'block'}}
+                      />
+                    ) : (
+                      <span className="wm">{b.wordmark}</span>
+                    );
+                    return b.href ? (
+                      <a
+                        key={i}
+                        href={b.href}
+                        target={b.href.startsWith('http') ? '_blank' : undefined}
+                        rel={b.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                        aria-label={b.wordmark}
+                        style={{textDecoration: 'none'}}
+                      >
+                        {inner}
+                      </a>
+                    ) : (
+                      <React.Fragment key={i}>{inner}</React.Fragment>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="wm">{wordmark}</div>
+              )}
               <p>
                 Open-source apps for <span className="next-blue">Nextcloud</span>. Built and
                 maintained by Conduction in Amsterdam, released under EUPL-1.2.
@@ -253,7 +319,14 @@ export default function Footer() {
               <div className="triad">
                 <span>
                   <span className="h"></span>
-                  Conduction{brand && <> · {brand.label}</>} · <span className="next-blue">Nextcloud</span>
+                  Conduction
+                  {brand && <> · {brand.label}</>}
+                  {brandRow && brandRow
+                    .filter((b) => b.wordmark && b.wordmark !== 'Conduction')
+                    .map((b, i) => (
+                      <React.Fragment key={i}> · {b.wordmark}</React.Fragment>
+                    ))}
+                  {' '}· <span className="next-blue">Nextcloud</span>
                 </span>
               </div>
               <div className="socials">
@@ -330,13 +403,20 @@ export default function Footer() {
 
       {/* Hidden templates cloned by canal-footer.js to populate the
           skyline (5 trapgevel variants) and to spawn boats during the
-          mini-game (sailing ship, cargo, frigate, battleship boss). */}
-      <FooterTemplates />
+          mini-game (sailing ship, cargo, frigate, battleship boss).
+          When minigames are off the boat templates aren't reachable
+          anyway (canal-footer.js's game wiring is null-guarded), but
+          dropping them shaves a few KB of inline SVG from the SSR
+          payload on product pages. */}
+      <FooterTemplates includeBoats={minigamesOn} />
 
       {/* Cross-game completion dialog. Listens for connext:gameend (HexRain,
           canal mini-game) and reports the result with replay + cross-game
-          progress. Position: fixed via CSS module so it overlays the page. */}
-      <GameModal />
+          progress. Position: fixed via CSS module so it overlays the page.
+          Only mounted when minigames are on so a product page doesn't
+          carry the dialog DOM + listeners for an interaction it can't
+          trigger. */}
+      {minigamesOn && <GameModal />}
     </>
   );
 }
@@ -347,17 +427,22 @@ export default function Footer() {
    via .content. Because JSX puts children directly under the template
    instead of in its .content DocumentFragment, we inject the templates
    as raw HTML so the browser's HTML parser slots them correctly. */
-function FooterTemplates() {
+function FooterTemplates({includeBoats = true}) {
+  const html = HOUSE_TEMPLATES_HTML + (includeBoats ? BOAT_TEMPLATES_HTML : '');
   return (
     <div
       style={{display: 'none'}}
       aria-hidden="true"
-      dangerouslySetInnerHTML={{__html: TEMPLATES_HTML}}
+      dangerouslySetInnerHTML={{__html: html}}
     />
   );
 }
 
-const TEMPLATES_HTML = `
+/* Skyline templates (5 trapgevel variants). canal-footer.js queries
+   #tpl-h-a … #tpl-h-e to clone them across the skyline width. Always
+   shipped — the static skyline is part of the brand decoration even
+   on product pages that opt out of minigames. */
+const HOUSE_TEMPLATES_HTML = `
       <template id="tpl-h-a">
         <svg class="house h-a" viewBox="0 -2 80 202" xmlns="http://www.w3.org/2000/svg">
           <path d="M 0,200 L 0,38 L 8,38 L 8,26 L 16,26 L 16,14 L 24,14 L 24,8 L 56,8 L 56,14 L 64,14 L 64,26 L 72,26 L 72,38 L 80,38 L 80,200 Z" fill="var(--c-orange-knvb)"/>
@@ -426,7 +511,14 @@ const TEMPLATES_HTML = `
           <rect x="39.5" y="175" width="16" height="34" fill="rgba(11,32,73,0.55)"/>
         </svg>
       </template>
+`;
 
+/* Boat templates (sailing ship, cargo, frigate, battleship boss).
+   canal-footer.js spawns these as the boat-sinking mini-game escalates;
+   when a site opts out of minigames the script's null-guard skips
+   spawning and these templates are unreachable, so they're elided
+   from the SSR payload. */
+const BOAT_TEMPLATES_HTML = `
       <template id="tpl-ship-sailing">
         <svg class="ci ci-sailing" width="100" height="60" viewBox="-4 -42 108 60" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path d="M 0,12 L 6,16 L 90,16 L 96,12 L 96,8 L 0,8 Z" fill="var(--c-orange-knvb)"/>

package/src/utils/lazyScript.js

@@ -23,10 +23,18 @@
 import {useEffect} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
+/**
+ * Pass a falsy `src` to skip the load entirely. The hook still runs
+ * unconditionally so call sites stay rules-of-hooks-compliant: the
+ * Footer swizzle uses this to gate /lib/kade-cyclist.js behind the
+ * `minigames` themeConfig flag without splitting into conditional
+ * hook calls.
+ */
 export function useLazyScript(src, key) {
   const isBrowser = useIsBrowser();
   useEffect(() => {
     if (!isBrowser) return;
+    if (!src) return;
     if (document.querySelector(`script[data-lazy-script="${key}"]`)) return;
     const script = document.createElement('script');
     script.src = src;

package/static/lib/canal-footer.js

@@ -126,6 +126,21 @@
   const goSunk         = root.querySelector('[data-go-sunk]');
   const goRestart      = root.querySelector('[data-restart]');
 
+  /* Product pages opt out of the boat-sinking mini-game by setting
+     `themeConfig.minigames = false` in createConfig(); the Footer
+     swizzle then doesn't render the .game-hud / .game-over / boat
+     templates. The skyline + house listeners + drifting fleet (built
+     above this point) are still wanted. Bail out before any game
+     wiring rather than null-deref'ing on the missing elements. */
+  if (!hud || !goRestart || !goPanel) {
+    /* Mark hydrated and expose a no-op API so the Footer's
+       useEffect re-hydrate loop exits cleanly on SPA route changes. */
+    window.CanalFooter = window.CanalFooter || {};
+    window.CanalFooter.hydrate  = window.CanalFooter.hydrate  || function () {};
+    window.CanalFooter._cleanup = window.CanalFooter._cleanup || function () {};
+    return;
+  }
+
   let game;
 
   function newGameState() {