@conduction/docusaurus-preset 3.44.3 → 3.45.1

package/package.json

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

package/src/components/DetailHero/DetailHero.jsx

@@ -32,8 +32,13 @@
  *     icon={<svg>...</svg>}
  *     iconColor="var(--c-blue-cobalt)"
  *     illustration={<AppMock app="launchpad" />}
+ *     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.
+ *
  * 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 (launchpad).
@@ -95,6 +100,7 @@ export default function DetailHero({
   icon,
   iconColor,
   illustration,
+  game,
   className,
   appId,
   downloads,
@@ -393,6 +399,15 @@ export default function DetailHero({
         {hasIllustration && (
           <div className={styles.illustration}>{illustration}</div>
         )}
+
+        {/* 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>}
       </div>
     </section>
   );

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

@@ -234,6 +234,19 @@ a.downloadsBadge:hover {
   width: 100%;
 }
 .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; }
 @media (max-width: 900px) {
   .illustration { justify-content: flex-start; }
 }

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -16,6 +16,10 @@
  *
  *   <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.
  *     eyebrow="Featured guide"
  *     title="Install OpenCatalogi in two minutes."
  *     lede="From app store to first register, no terminal required."
@@ -58,6 +62,7 @@ export default function FeaturedCard({
   locale,
   thumbnail,
   visual,
+  game,
   accent = 'orange',
   contentType,
   durationMinutes,
@@ -175,6 +180,18 @@ 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,6 +25,18 @@
 
 .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;
+}
+.game:empty { display: none; }
+
 .eyebrow {
   display: inline-flex;
   align-items: center;

package/src/components/GameModal/GameModal.module.css

@@ -35,7 +35,7 @@
   background: var(--conduction-color-surface-card);
   color: var(--conduction-color-text-body);
   border-radius: var(--radius-xl);
-  padding: 40px 36px 32px;
+  padding: 44px 44px 36px;
   width: calc(100% - 48px);
   max-width: 520px;
   box-shadow: var(--shadow-3, 0 30px 80px -20px rgba(10, 23, 47, 0.4));
@@ -50,6 +50,10 @@
   gap: 0;
 }
 
+/* The roster sits under the headline and the share block rather than
+   against them. */
+.roster { margin-top: 28px; }
+
 @media (min-width: 880px) {
   .panel { max-width: 880px; }
   .body {
@@ -57,7 +61,7 @@
     grid-template-areas:
       'intro aside'
       'roster roster';
-    column-gap: 40px;
+    column-gap: 56px;
   }
   .intro { grid-area: intro; }
   .aside { grid-area: aside; }
@@ -68,8 +72,9 @@
   .grid {
     display: block;
     columns: 2;
-    column-gap: 32px;
+    column-gap: 56px;
   }
+  .roster { margin-top: 36px; }
   .gridItem,
   .gridItemFound { break-inside: avoid; }
 }
@@ -164,10 +169,10 @@
 .grid {
   list-style: none;
   padding: 0;
-  margin: 0 0 20px;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 7px;
 }
 .gridItem,
 .gridItemFound {
@@ -213,8 +218,8 @@
    ====================================================================== */
 
 .share {
-  margin: 20px 0 0;
-  padding: 16px;
+  margin: 24px 0 0;
+  padding: 20px;
   background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-md);
 }
@@ -302,7 +307,7 @@
   display: flex;
   gap: 8px;
   justify-content: flex-end;
-  margin-top: 20px;
+  margin-top: 32px;
 }
 
 .btnSecondary {