@conduction/docusaurus-preset 1.4.2 → 1.5.0

package/package.json

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

package/src/components/DetailHero/DetailHero.jsx

@@ -37,6 +37,11 @@
  * 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).
+ *
+ * `background="cobalt"` paints the hero in a full-bleed cobalt panel
+ * with white type — the product-page identity used on the
+ * {slug}.conduction.nl landings. Default (undefined) keeps the
+ * existing on-cream rendering used by the connext apps detail pages.
  */
 
 import React from 'react';
@@ -61,12 +66,18 @@ export default function DetailHero({
   className,
   appId,
   downloads,
+  background,
 }) {
   const dlCount = downloads != null ? downloads : (appId ? downloadsForApp(appId) : 0);
   const hasIllustration = Boolean(illustration);
+  /* `background="cobalt"` flips the hero to a full-bleed cobalt panel
+     with white type — the product-page identity used on
+     {slug}.conduction.nl landings. Default (undefined) keeps the
+     existing on-cream rendering used by connext apps detail pages. */
+  const bgClass = background === 'cobalt' ? styles.bgCobalt : null;
 
   return (
-    <section className={[styles.head, hasIllustration && styles.withIllustration, className].filter(Boolean).join(' ')}>
+    <section className={[styles.head, hasIllustration && styles.withIllustration, bgClass, className].filter(Boolean).join(' ')}>
       {crumb && Array.isArray(crumb) && (
         <div className={styles.crumb}>
           {crumb.map((c, i) => {

package/src/components/DetailHero/DetailHero.module.css

@@ -8,8 +8,43 @@
   margin: 0 auto;
   padding: 24px 64px 56px;
   font-family: var(--conduction-typography-font-family-body);
+  position: relative;
 }
 
+/* Cobalt-background hero variant for product-page identity. The brand
+   panel sits full-bleed via a pseudo-element so the centred content
+   keeps its 1280px max-width. Text + crumb + badges flip to white /
+   cobalt-100 against the dark surface; the icon hex and the action
+   buttons carry their own colour via iconColor + Button tone. */
+.bgCobalt {
+  padding-top: 56px;
+  padding-bottom: 64px;
+  color: white;
+}
+.bgCobalt::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  background: var(--c-blue-cobalt);
+  z-index: -1;
+}
+.bgCobalt > * { position: relative; }
+
+.bgCobalt .crumb,
+.bgCobalt .crumb a { color: var(--c-cobalt-100); }
+.bgCobalt .crumb a:hover { color: var(--c-orange-knvb); }
+.bgCobalt .sep { color: var(--c-cobalt-300); }
+.bgCobalt .badge { color: var(--c-cobalt-100); }
+.bgCobalt .versionBadge { color: var(--c-cobalt-200); }
+.bgCobalt .downloadsBadge { color: white; }
+.bgCobalt .title,
+.bgCobalt .titleText { color: white; }
+.bgCobalt .tagline { color: var(--c-cobalt-100); }
+.bgCobalt .tagline :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+
 .crumb {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;

package/static/lib/canal-footer.js

@@ -129,15 +129,37 @@
   /* 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. */
+     templates. The static decoration (trapgevel skyline, drift speeds,
+     Conduction-house Maps link, drift-boat caches) is still wanted —
+     run those first so a no-game build doesn't ship an empty .skyline.
+     Then bail out before the game-only wiring rather than null-deref'ing
+     on the missing HUD / restart-button. The script's `resize` handler
+     re-runs buildSkyline() on viewport changes too, so the skyline
+     stays full when a viewer resizes the window. */
   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. */
+    buildSkyline();
+    rollSpeeds();
+    wireConductionHouse();
+    captureDriftTemplates();
+    const onResizeNoGame = () => {
+      clearTimeout(window._canalNoGameResizeT);
+      window._canalNoGameResizeT = setTimeout(() => {
+        buildSkyline();
+        rollSpeeds();
+        wireConductionHouse();
+      }, 200);
+    };
+    window.addEventListener('resize', onResizeNoGame);
+    /* Mark hydrated and expose hydrate as a no-op (the IIFE's later
+       `window.CanalFooter.hydrate = init` already handles the SPA
+       re-mount path; we just need _cleanup to tear down the resize
+       listener so it doesn't leak across SPA navigations. */
     window.CanalFooter = window.CanalFooter || {};
-    window.CanalFooter.hydrate  = window.CanalFooter.hydrate  || function () {};
-    window.CanalFooter._cleanup = window.CanalFooter._cleanup || function () {};
+    window.CanalFooter.hydrate = window.CanalFooter.hydrate || function () {};
+    window.CanalFooter._cleanup = function () {
+      window.removeEventListener('resize', onResizeNoGame);
+      clearTimeout(window._canalNoGameResizeT);
+    };
     return;
   }