@conduction/docusaurus-preset 3.37.0 → 3.39.0

package/src/components/ThemeSeamMock/__tests__/ThemeSeamMock.render.test.js

@@ -0,0 +1,122 @@
+/**
+ * ThemeSeamMock.render.test.js — renders the real <ThemeSeamMock> JSX
+ * to static markup and asserts on the output.
+ *
+ * What matters about this mock is that both layers are the same
+ * application frame and that the themed layer differs only by the
+ * wrapper that redefines the tokens. A test that let the two layers
+ * drift apart would be checking a screen change, not a finish change,
+ * which is the opposite of the claim the component makes.
+ *
+ * Same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AppMock.render.test.js; CSS modules are stubbed with an identity
+ * proxy, so class assertions read as the source class names.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'ThemeSeamMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-theme-seam-test');
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let ThemeSeamMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  ThemeSeamMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(ThemeSeamMock, props));
+}
+
+function frames(html) {
+  return html.match(/class="frame size-\w+[^"]*"/g) || [];
+}
+
+test('renders two layers of the same app frame, plus the seam', () => {
+  const html = render({app: 'openregister'});
+  assert.equal(frames(html).length, 2, 'expected a stock layer and a themed layer');
+  assert.match(html, /class="layer themed lasuite"/);
+  assert.match(html, /class="seam"/);
+  assert.doesNotMatch(html, /Unknown app/);
+});
+
+test('both layers render the identical frame, so the wipe changes finish and nothing else', () => {
+  const html = render({app: 'procest'});
+  /* Split on the themed wrapper: what follows must repeat what came
+     before it, or the two layers are showing different screens. */
+  const [stock, themed] = html.split('class="layer themed lasuite"');
+  const bodyOf = (s) => (s.match(/<div class="body[^]*$/) || [''])[0].replace(/\s+/g, '');
+  assert.ok(bodyOf(stock).length > 0, 'no stock layer body rendered');
+  assert.equal(
+    bodyOf(stock).slice(0, 400),
+    bodyOf(themed).slice(0, 400),
+    'the themed layer is not the same frame as the stock layer',
+  );
+});
+
+test('the inner AppMocks never run their own loop, which would compete with the seam', () => {
+  const html = render({app: 'openregister'});
+  assert.equal(frames(html).filter((c) => c.includes('static')).length, 2);
+});
+
+test('running={false} freezes the scene on the themed end state', () => {
+  assert.match(render({app: 'openregister', running: false}), /class="seamScene size-md static"/);
+  assert.doesNotMatch(render({app: 'openregister'}), /seamScene size-md static/);
+});
+
+test('an unknown theme falls back to lasuite rather than rendering unthemed', () => {
+  assert.match(render({app: 'openregister', theme: 'nope'}), /class="layer themed lasuite"/);
+});
+
+test('size is forwarded to both frames', () => {
+  const html = render({app: 'openregister', size: 'sm'});
+  assert.match(html, /class="seamScene size-sm"/);
+  assert.equal(frames(html).filter((c) => c.includes('size-sm')).length, 2);
+});
+
+test('a label renders as the caption, and is absent otherwise', () => {
+  assert.match(render({app: 'openregister', label: 'La Suite'}), /<figcaption class="caption">La Suite</);
+  assert.doesNotMatch(render({app: 'openregister'}), /figcaption/);
+});

package/src/components/index.js

@@ -60,6 +60,10 @@ export {default as Pipeline, PipelineStep, IconList} from './Pipeline/Pipeline.j
 export {default as FacetedFilters, FilterChip} from './FacetedFilters/FacetedFilters.jsx';
 export {default as CookieCli} from './CookieCli/CookieCli.jsx';
 export {default as GameModal} from './GameModal/GameModal.jsx';
+export {default as StampRush} from './StampRush/StampRush.jsx';
+export {default as DeadlineDefender} from './DeadlineDefender/DeadlineDefender.jsx';
+export {default as BlueprintRush} from './BlueprintRush/BlueprintRush.jsx';
+export {default as RecordRun} from './RecordRun/RecordRun.jsx';
 
 /* Diagram-set web-component React wrappers (cn-hex, cn-platform,
    cn-domain-tree, cn-pipeline, cn-side-box, cn-honeycomb-bg, cn-pair,
@@ -77,6 +81,7 @@ export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';
 export {default as WidgetMock} from './WidgetMock/WidgetMock.jsx';
+export {default as ThemeSeamMock} from './ThemeSeamMock/ThemeSeamMock.jsx';
 export {default as FlowMock} from './FlowMock/FlowMock.jsx';
 export {default as LeafMock} from './LeafMock/LeafMock.jsx';
 export {default as BuildMock} from './BuildMock/BuildMock.jsx';

package/src/data/app-downloads.js

@@ -65,3 +65,24 @@ export function downloadsForApp(appId) {
 export function formatDownloads(n, locale = 'en') {
   return Number(n || 0).toLocaleString(locale);
 }
+
+/* Below this many downloads an app shows no counter at all.
+   A freshly published app sits on a handful of downloads for weeks,
+   and printing "5 downloads" next to it argues against the app. The
+   counter is there to show traction, so it appears once there is
+   traction to show. Aggregate figures (totalDownloads on the
+   Connext and Common Ground pages) are not subject to this: the
+   fleet total is a real number on its own. */
+export const MIN_DISPLAYED_DOWNLOADS = 1000;
+
+/**
+ * Whether a download count is worth putting on screen.
+ *
+ * Used for the per-app counter on DetailHero, including its
+ * schema.org InteractionCounter: a number we hide from the page does
+ * not belong in the structured data either, or search results quote
+ * back the figure the page declines to show.
+ */
+export function showDownloads(n) {
+  return Number(n || 0) >= MIN_DISPLAYED_DOWNLOADS;
+}

package/src/index.js

@@ -439,6 +439,14 @@ 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),
+ *   minigamesRoster (optional; [{id, label}] of the games this site
+ *     ships, when they are not the preset's default five. A label may
+ *     be a per-locale map, since themeConfig is never translated.)
+ *   minigamesShare (optional; {hashtag, url, prize, prizeHref,
+ *     prizeLinkLabel} passed to
+ *     the game-over dialog's share block. The hashtag defaults to
+ *     #IReadTheKit and the url to siteConfig.url; prize renders a line
+ *     under the share buttons, linked when prizeHref is given.)
  *   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),
@@ -574,6 +582,8 @@ function createConfig(opts) {
            site opts out, while still keeping the static skyline +
            canal decoration. Default true preserves prior behaviour. */
         minigames: opts.minigames !== false,
+        minigamesShare: opts.minigamesShare,
+        minigamesRoster: opts.minigamesRoster,
         /* Footer brand block (the wordmark + tagline + triad + socials
            on the left of the canal-footer grid).
              undefined  -> wordmark = 'Conduction' (product-page default;

package/src/theme/Footer/index.jsx

@@ -52,6 +52,15 @@ export default function Footer() {
      surfaced through createConfig() opts. See createConfig() in
      ../../index.js for the option semantics. */
   const minigamesOn = themeConfig.minigames !== false;
+  /* Campaign copy for the game-over dialog's share block (hashtag, a
+     prize line and where its rules live). A campaign is per site and
+     time-bound, so it lives in themeConfig rather than in the
+     component: the preset ships the mechanism, the site ships the
+     giveaway. */
+  const minigamesShare = themeConfig.minigamesShare || undefined;
+  /* The roster of games this site ships, when it is not the preset's
+     default five. Labels may be per-locale maps. */
+  const minigamesRoster = themeConfig.minigamesRoster || undefined;
   const footerBrand = themeConfig.footerBrand || null;
   /* legalLinks: opt-in/out of the Privacy / Terms / ISO links inside
      the legal-bar, and the two ISO 9001/27001 certification badges on
@@ -479,7 +488,7 @@ export default function Footer() {
           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 />}
+      {minigamesOn && <GameModal share={minigamesShare} games={minigamesRoster} />}
     </>
   );
 }