openvibers/openvibe.bench Commits

Showcase pages: the right canonical URL and navbar link; frames load dark (#28)

OP OpenVibers committed 14 days ago · ac44197ef7 · 3 files, +14 −3

The showcase pages never passed their path to the layout, so it took '/': the navbar marked Home as the current
page and every showcase page told search engines its canonical URL was the home page. Frames still loading showed as
white boxes on dark themes; they now take the theme's background.

Changes

ddiff --git a/public/css/bench.css b/public/css/bench.css
iindex 33dde8c..02528e6 100644
---- a/public/css/bench.css
++++ b/public/css/bench.css
@@@ -166,7 +166,7 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
  /* Outputs: live frames from the render origin */
  .br-outs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .br-out { margin: 0; display: grid; gap: 6px; min-width: 0; }
--.br-out-frame, .br-out-img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border, #1f2d47); border-radius: 12px; background: #fff; display: block; }
++.br-out-frame, .br-out-img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border, #1f2d47); border-radius: 12px; background: var(--bg-primary, #0a0f1c); display: block; }
  .br-out-img { object-fit: contain; background: var(--bg-primary, #0a0f1c); }
  .br-out figcaption { font-size: .76rem; color: var(--text-muted, #7386a3); }
  .br-out-link { font-size: .86rem; overflow-wrap: anywhere; color: var(--room-strong); }
@@@ -229,7 +229,7 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
  .sc-pane figcaption { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700; color: var(--text-muted, #7386a3); }
  .sc-pane-label { letter-spacing: .04em; text-transform: uppercase; }
  .sc-pane-clock { font-variant-numeric: tabular-nums; }
--.sc-pane-frame { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border, #1f2d47); border-radius: 12px; background: #fff; display: block; }
++.sc-pane-frame { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border, #1f2d47); border-radius: 12px; background: var(--bg-primary, #0a0f1c); display: block; }
  .sc-round .sc-pane-frame { aspect-ratio: 16 / 11; }
  .sc-pane-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin: 4px 0 0; font-size: .82rem; }
  .sc-pane-facts dt { color: var(--text-muted, #7386a3); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
ddiff --git a/server/http/showcase.js b/server/http/showcase.js
iindex 7902eda..05325d2 100644
---- a/server/http/showcase.js
++++ b/server/http/showcase.js
@@@ -309,6 +309,7 @@ function createShowcasePages(ctx) {
          return send(res, 200, {
              config,
              viewer: viewerOf(req),
++            path: req.originalUrl,   // the navbar's current link and the canonical URL
              title: 'Showcase: two models side by side',
              description: 'One prompt, two models, live sandboxed frames: the OpenVibe.Bench showcase.',
              body: raw(galleryView(pairs)),
@@@ -319,11 +320,12 @@ function createShowcasePages(ctx) {
          const subject = req.principal && req.principal.kind === 'user' ? req.principal.subject : null;
          const round = await loadRound(ctx, String(req.params.id || ''), subject);
          if (!round) {
--            return send(res, 404, { config, viewer: viewerOf(req), title: 'No such round', body: raw('<section><h1>No such round</h1></section>') });
++            return send(res, 404, { config, viewer: viewerOf(req), path: req.originalUrl, title: 'No such round', body: raw('<section><h1>No such round</h1></section>') });
          }
          return send(res, 200, {
              config,
              viewer: viewerOf(req),
++            path: req.originalUrl,   // the navbar's current link and the canonical URL
              title: 'Compare two outputs',
              description: 'Two models, one prompt, side by side.',
              body: raw(roundView(round, Boolean(subject))),
ddiff --git a/test/results-pages.test.js b/test/results-pages.test.js
iindex 4148855..a108b7b 100644
---- a/test/results-pages.test.js
++++ b/test/results-pages.test.js
@@@ -170,6 +170,15 @@ function runDoc(benchmark, over = {}) {
          assert.match(String(res.headers.get('cache-control')), /no-transform/);
      });
  
++    await check('the showcase page names itself: its canonical URL and its navbar link', async () => {
++        const res = await t.get('/showcase');
++        assert.strictEqual(res.status, 200, res.text.slice(0, 300));
++        assert.match(res.text, /rel="canonical" href="https:\/\/bench\.openvibe\.services\/showcase"/, 'canonical is the showcase, not the home');
++        const nav = JSON.parse(res.text.match(/window\.__OV_PAGE = (\{.*?\});/)[1]);
++        const active = nav.navbar.links.filter((l) => l.active).map((l) => l.label);
++        assert.deepStrictEqual(active, ['Showcase'], 'only Showcase is current');
++    });
++
      await check('stop', async () => { await t.close(); });
      done();
  })();