A shared /try link shows Bot's card: panel pages with a description carry og:url, og:image and a large Twitter card (#151)

OP OpenVibers committed 20 days ago · bb2d94a8b4 · 2 files, +6 −1

Changes

ddiff --git a/server/web/render.js b/server/web/render.js
iindex 42474c1..0dd81c4 100644
---- a/server/web/render.js
++++ b/server/web/render.js
@@@ -22,6 +22,7 @@
   */
  const { qrSvg } = require('./qr');
  const { stepHelp } = require('../routines');
++const social = require('openvibe-shared/social');
  const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
  const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c]);
  /** A data-* attribute's JSON, escaped for a double-quoted attribute. */
@@@ -72,7 +73,10 @@ function page(title, body, { scripts = [], bodyClass = '', description = null, c
  <meta name="description" content="${esc(description)}">
  <meta property="og:title" content="${esc(title)} — OpenVibe.Bot">
  <meta property="og:description" content="${esc(description)}">` : ''}${canonical ? `
--<link rel="canonical" href="https://openvibe.bot${esc(canonical)}">` : ''}
++<link rel="canonical" href="https://openvibe.bot${esc(canonical)}">` : ''}${description && canonical ? `
++<meta property="og:url" content="https://openvibe.bot${esc(canonical)}">
++<meta property="og:image" content="https://openvibe.bot${esc(social.url('bot'))}">
++<meta name="twitter:card" content="summary_large_image">` : ''}
  <link rel="stylesheet" href="/panel/panel.css">
  </head>
  <body${bodyClass ? ` class="${esc(bodyClass)}"` : ''}>
ddiff --git a/test/try-sim.test.js b/test/try-sim.test.js
iindex dd5528b..e994c9b 100644
---- a/test/try-sim.test.js
++++ b/test/try-sim.test.js
@@@ -55,6 +55,7 @@ const { loadProfiles } = require('../server/profiles');
          assert.ok(json, 'the profile rides along as data');
          assert.deepStrictEqual(JSON.parse(json[1]), loadProfiles().get('sim.rover'));
          assert.ok(html.includes('<link rel="canonical" href="https://openvibe.bot/try">') && html.includes('<meta name="description"'));
++        assert.ok(/<meta property="og:image" content="https:\/\/openvibe\.bot\/shared\/social\/bot\.jpg(\?v=[^"]+)?">/.test(html) && html.includes('<meta property="og:url" content="https://openvibe.bot/try">'), 'a shared /try link shows Bot\'s card');
          assert.ok(html.includes('href="/robots/new"'), 'the way on to a real robot');
          for (const s of scripts) {
              const js = await get(s);

diff --git a/server/web/render.js b/server/web/render.js

index 42474c1..0dd81c4 100644

--- a/server/web/render.js

+++ b/server/web/render.js

@@ -22,6 +22,7 @@

const { qrSvg } = require('./qr');

const { stepHelp } = require('../routines');

+const social = require('openvibe-shared/social');

const ESC = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };

const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c]);

/** A data-* attribute's JSON, escaped for a double-quoted attribute. */

@@ -72,7 +73,10 @@ function page(title, body, { scripts = [], bodyClass = '', description = null, c

-<link rel="canonical" href="https://openvibe.bot${esc(canonical)}">` : ''}

+<link rel="canonical" href="https://openvibe.bot${esc(canonical)}">` : ''}${description && canonical ? `

+<meta property="og:url" content="https://openvibe.bot${esc(canonical)}">

+<meta property="og:image" content="https://openvibe.bot${esc(social.url('bot'))}">

+<meta name="twitter:card" content="summary_large_image">` : ''}

</head>

<body${bodyClass ? ` class="${esc(bodyClass)}"` : ''}>

diff --git a/test/try-sim.test.js b/test/try-sim.test.js

index dd5528b..e994c9b 100644

--- a/test/try-sim.test.js

+++ b/test/try-sim.test.js

@@ -55,6 +55,7 @@ const { loadProfiles } = require('../server/profiles');

assert.ok(json, 'the profile rides along as data');

assert.deepStrictEqual(JSON.parse(json[1]), loadProfiles().get('sim.rover'));

assert.ok(html.includes('<link rel="canonical" href="https://openvibe.bot/try">') && html.includes('<meta name="description"'));

+ assert.ok(/<meta property="og:image" content="https:\/\/openvibe\.bot\/shared\/social\/bot\.jpg(\?v=[^"]+)?">/.test(html) && html.includes('<meta property="og:url" content="https://openvibe.bot/try">'), 'a shared /try link shows Bot\'s card');

assert.ok(html.includes('href="/robots/new"'), 'the way on to a real robot');

for (const s of scripts) {

const js = await get(s);