openvibers/openvibe.events Commits

Events: the front page meets the edges, shows each curl sample whole, and lays the webhook steps two by two (#75)

OP OpenVibers committed 29 days ago · f0ef3ad167 · 2 files, +8 −0

**The openvibe.events front page lays out cleanly.**

**Found:** while reviewing every home page:
- the body kept the browser's default 8 px margin, because the page has no stylesheet beyond the showcase's, so the Frame's footer stopped short of the edges;
- the three curl samples sat in three narrow columns, which cut every command off mid-line;
- the four webhook steps fell three and one, and a step with one line of text had a gap under its title, because grid rows stretched it to match its neighbour.

**Change (`server/home.js`, one inline `<style>`; the CSP already allows inline styles):**
- `body{margin:0}`;
- the code samples each take a full-width row;
- the steps go two by two (`minmax(420px, 1fr)`), with `align-content:start` and each title level with its number.

The step alignment belongs in the showcase kit and will move into openvibe-shared with its next release.

**Checked** by injecting exactly these rules into the live page at 1280 and 390 px: no horizontal overflow, every curl line visible, and the steps aligned.

**Test:** `home.test.js` checks that the page carries its rules.

Changes

ddiff --git a/server/home.js b/server/home.js
iindex 9e6b211..794ad26 100644
---- a/server/home.js
++++ b/server/home.js
@@@ -92,6 +92,11 @@ function sections({ apiUrl }) {
      });
  }
  
++// The page's own few rules (it has no stylesheet beyond the showcase's): no browser margin around the body, so the Frame's
++// footer meets the edges; each curl sample on its own full-width row (three columns cut every command off); the four
++// webhook steps two by two instead of three and one alone, each title level with its number.
++const HOME_STYLE = '<style>body{margin:0}.page .sc-code{grid-template-columns:minmax(0,1fr)}.page .sc-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}.page .sc-steps li{align-items:start;align-content:start}.page .sc-steps b{line-height:30px}</style>';
++
  function renderHome({ siteUrl, apiUrl }) {
      const nav = {
          service: 'events',
@@@ -112,6 +117,7 @@ function renderHome({ siteUrl, apiUrl }) {
          head: [
              appIcon.headTags({ site: 'events' }),
              `<link rel="stylesheet" href="${ovServe.url(showcase.STYLESHEET)}">`,
++            HOME_STYLE,
          ].join('\n'),
          body: `<div id="navbar-mount"></div>
  <main id="main" class="page">
ddiff --git a/test/home.test.js b/test/home.test.js
iindex c23eb96..fe91e93 100644
---- a/test/home.test.js
++++ b/test/home.test.js
@@@ -73,6 +73,8 @@ t('GET / as a browser: the home page, its CSP and its cache policy', async () =>
      assert.strictEqual(r.headers['cache-control'], 'private, max-age=300');
      assert.strictEqual(r.headers.vary, 'Accept');
      assert.strictEqual((r.body.match(/<h1\b/g) || []).length, 1, 'exactly one h1');
++    // The page's own rules: the body meets the edges (no browser margin), each curl sample takes a full row.
++    assert.match(r.body, /<style>body\{margin:0\}\.page \.sc-code\{grid-template-columns:minmax\(0,1fr\)\}/);
      assert.ok(r.body.includes('Events your services'), 'the hero text');
      assert.ok(r.body.includes(`<link rel="canonical" href="${SITE}/">`), 'the canonical product origin');
      assert.ok(r.body.includes(`The API is at ${SITE}`), 'the hero note names the API origin');