@conduction/docusaurus-preset 3.45.3 → 3.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.45.3",
+  "version": "3.46.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/DetailHero/DetailHero.jsx

@@ -35,9 +35,9 @@
  *     game={<HiddenGame id="stamp-rush" unlock={...}><StampRush /></HiddenGame>}
  *   />
  *
- * `game` is the app's hidden mini-game. It renders across the full
- * width of the hero, under the copy and the illustration, and shows
- * nothing until the player finds it.
+ * `game` is the app's hidden mini-game. It shows nothing until the
+ * player finds it, and then takes the illustration's place: the hero
+ * widens that column and the mock steps aside.
  *
  * Each cta object also accepts `tone: "orange"` to flip the primary
  * (or secondary) variant to the KNVB-orange accent. Reserved for
@@ -396,18 +396,25 @@ export default function DetailHero({
           )}
         </div>
 
-        {hasIllustration && (
-          <div className={styles.illustration}>{illustration}</div>
-        )}
+        {/* The app's hidden mini-game, when it has one, and the mock
+            it takes the place of.
 
-        {/* The app's hidden mini-game, when it has one. It lives here
-            rather than further down the page because the way in is up
-            here too: you knock on the logo in this hero, and what you
-            unlocked should not be somewhere you have to scroll to find.
-            It spans both columns, so the game gets the width of the
-            hero instead of the width of the mock. While the game is
-            still hidden this renders nothing at all. */}
-        {game && <div className={styles.game}>{game}</div>}
+            Both live in the same column. The game renders nothing at
+            all until somebody finds it, and once it is open the mock
+            gives way: the way in is up here (you knock on the logo in
+            this hero), so what you unlocked belongs where you were
+            already looking, not below the fold and not beside the
+            picture of the app. The swap is a sibling selector on
+            HiddenGame's own `data-hidden-game="found"`, so the mock
+            stays while a `link` opener is still sitting unclicked. */}
+        {(hasIllustration || game) && (
+          <div className={styles.visual}>
+            {game}
+            {hasIllustration && (
+              <div className={styles.illustration}>{illustration}</div>
+            )}
+          </div>
+        )}
       </div>
     </section>
   );

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

@@ -235,18 +235,34 @@ a.downloadsBadge:hover {
 }
 .illustration > * { width: 100%; max-width: 560px; }
 
-/* The app's mini-game, across the whole hero rather than in the
-   illustration's column: the games are wide, and a card squeezed into
-   half a hero reads as an accident. Empty until the game is found, and
-   `:empty` keeps the margin off until then. */
-.game {
-  grid-column: 1 / -1;
-  margin-top: 40px;  /* The games hold between 460 and 760px of content, so a card
-     stretched across the whole hero is mostly empty on the right. Wide
-     enough for the widest board, and no wider. */
-  max-width: 820px;
-}
-.game:empty { display: none; }
+/* The mini-game and the mock share the hero's right-hand column. */
+.visual { min-width: 0; }
+
+/* Found, so the mock steps aside. A sibling selector rather than
+   :has(), because the swap must work everywhere: an opener that is
+   still unclicked carries a different value and leaves the mock
+   alone. */
+[data-hidden-game='found'] + .illustration { display: none; }
+
+/* A game needs more room than a mock does: the boards hold up to
+   760px and the column is about 560. Progressive, so a browser
+   without :has() shows a narrower game rather than a broken hero. */
+.withIllustration .headInner:has([data-hidden-game='found']) {
+  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
+}
 @media (max-width: 900px) {
-  .illustration { justify-content: flex-start; }
+  .withIllustration .headInner:has([data-hidden-game='found']) {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
+
+/* The quiet opener for the `link` kind, which is the one way in that
+   shows itself. It sits above the mock rather than replacing it. */
+.visual > [data-hidden-game='opener'] { margin: 0 0 12px; }
+
+/* Its own colour is picked for a white page and lands at about 3:1 on
+   the cobalt hero, under AA. The crumb and the badges up top already
+   answered this with cobalt-100, so the opener uses it too. */
+.bgCobalt .visual [data-hidden-game='opener'] button { color: var(--c-cobalt-100); }
+.bgCobalt .visual [data-hidden-game='opener'] button:hover,
+.bgCobalt .visual [data-hidden-game='opener'] button:focus-visible { color: white; }

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -17,9 +17,9 @@
  *   <FeaturedCard
  *     href="/posts/install-opencatalogi"
  *
- * `game` puts a hidden mini-game across the bottom of the card. Only
- * on a card without `href`: inside a link the card would swallow every
- * click before the game saw it.
+ * `game` puts a hidden mini-game where the visual is, once the reader
+ * finds it. Only on a card without `href`: inside a link the card
+ * would swallow every click before the game saw it.
  *     eyebrow="Featured guide"
  *     title="Install OpenCatalogi in two minutes."
  *     lede="From app store to first register, no terminal required."
@@ -166,6 +166,19 @@ export default function FeaturedCard({
         )}
       </div>
 
+      {/* The post's hidden mini-game, when it has one. It belongs in
+          the hero for the same reason the app games do: the way in is
+          up here, so what you unlocked should be too. It shows
+          nothing until the game is found, and then takes the visual's
+          place.
+
+          Not rendered when the whole card is a link: a game inside an
+          anchor cannot be played, because the card swallows the click
+          before the game sees it. `game` and `href` do not go
+          together, and a card that links somewhere is a teaser, not a
+          place to play. */}
+      {!href && game}
+
       <div className={[styles.visual, hasVisual && styles.visualNode].filter(Boolean).join(' ')} aria-hidden="true">
         {hasVisual ? visual : (<>
         {thumbProps.src
@@ -180,18 +193,6 @@ export default function FeaturedCard({
         ].join(' ')} />
         </>)}
       </div>
-
-      {/* The post's hidden mini-game, when it has one. It belongs in
-          the hero for the same reason the app games do: the way in is
-          up here, so what you unlocked should be too. It spans both
-          columns and shows nothing until the game is found.
-
-          Not rendered when the whole card is a link: a game inside an
-          anchor cannot be played, because the card swallows the click
-          before the game sees it. `game` and `href` do not go
-          together, and a card that links somewhere is a teaser, not a
-          place to play. */}
-      {game && !href && <div className={styles.game}>{game}</div>}
     </Tag>
   );
 }

package/src/components/FeaturedCard/FeaturedCard.module.css

@@ -25,17 +25,20 @@
 
 .body { min-width: 0; }
 
-/* The post's mini-game, across the whole card rather than in the
-   visual's column: the games are wide, and a card squeezed into half a
-   hero reads as an accident. Empty until the game is found. */
-.game {
-  grid-column: 1 / -1;
-  margin-top: var(--space-8);  /* The games hold between 460 and 760px of content, so a card
-     stretched across the whole hero is mostly empty on the right. Wide
-     enough for the widest board, and no wider. */
-  max-width: 820px;
+/* Found, so the visual steps aside and the game takes its column. A
+   sibling selector rather than :has(), so the swap works everywhere;
+   an opener that is still unclicked carries a different value and
+   leaves the visual alone. */
+[data-hidden-game='found'] + .visual { display: none; }
+
+/* A game needs more of the card than a thumbnail does. Progressive: a
+   browser without :has() shows a narrower game, not a broken card. */
+.card:has([data-hidden-game='found']) {
+  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
+}
+@media (max-width: 900px) {
+  .card:has([data-hidden-game='found']) { grid-template-columns: minmax(0, 1fr); }
 }
-.game:empty { display: none; }
 
 .eyebrow {
   display: inline-flex;

package/src/components/HiddenGame/HiddenGame.jsx

@@ -35,6 +35,14 @@
  * Once found, a game stays found for that browser: reopening the page
  * shows it straight away, because hiding it again would punish the
  * person who solved it.
+ *
+ * The wrapper carries `data-hidden-game="found"` once it is open, and
+ * the `link` opener carries `data-hidden-game="opener"`. That is how a
+ * host can give the game the space something else is using: a product
+ * hero hides its mock when the game beside it is found, with a plain
+ * sibling selector rather than a class from this module. The two
+ * values are distinct because an opener is not a game: the hero keeps
+ * its mock while the way in is still sitting there unclicked.
  */
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -170,7 +178,7 @@ export default function HiddenGame({id, unlock = {}, children, className}) {
        nothing at all: an empty wrapper is the point. */
     if (unlock.kind !== 'link') return null;
     return (
-      <p className={[styles.opener, className].filter(Boolean).join(' ')}>
+      <p className={[styles.opener, className].filter(Boolean).join(' ')} data-hidden-game="opener">
         <button type="button" className={styles.openerButton} onClick={reveal}>
           {unlock.label || translate({
             id: 'preset.hiddenGame.opener',
@@ -183,7 +191,7 @@ export default function HiddenGame({id, unlock = {}, children, className}) {
   }
 
   return (
-    <div className={[styles.found, className].filter(Boolean).join(' ')} ref={holder}>
+    <div className={[styles.found, className].filter(Boolean).join(' ')} ref={holder} data-hidden-game="found">
       {children}
     </div>
   );