Server-render the site navigation in the first HTML (#526)

OP OpenVibers committed 3 days ago · c9267c3033 · 2 files, +5 −2

Changes

ddiff --git a/server/web/layout.js b/server/web/layout.js
iindex 1468229..1d1f0e3 100644
---- a/server/web/layout.js
++++ b/server/web/layout.js
@@@ -190,8 +190,7 @@ ${o.app ? `<script src="${asset('vibe-md.js')}" defer></script>\n<script src="${
  </head>
  <body class="${[cls, o.app ? 'oc-app-body' : ''].filter(Boolean).join(' ')}"${scale}>
  <a class="oc-skip" href="#main">Skip to content</a>
--<div id="navbar-mount"></div>
--${frame.noscriptNav({ name: siteName, home: '/', links: siteLinks.map(({ label, href }) => ({ label, href })) })}
++${frame.serverNav({ name: siteName, service: siteService, home: '/', links: siteLinks.map(({ label, href }) => ({ label, href })) })}
  <main id="main" class="${o.app ? 'vb-wrap' : `oc-main${o.shell ? ' oc-main--shell' : (o.wide ? ' oc-main--wide' : '')}`}"${o.mainAttrs ? ` ${o.mainAttrs}` : ''}>
  <noscript><p class="oc-account">${who}</p></noscript>
  ${o.body || ''}
ddiff --git a/test/web.test.js b/test/web.test.js
iindex 60a4c67..2e28e89 100644
---- a/test/web.test.js
++++ b/test/web.test.js
@@@ -38,6 +38,10 @@ t('global chat reads without JavaScript; signing in shows the composer', async (
      assert.match(r.text, /Sign in with OpenVibe/);
      assert.match(r.text, /<meta name="robots" content="index, follow">/);
      assert.match(r.text, /\/shared\/navbar\.js\?v=/, 'the Frame from this site\'s own /shared/');
++    // The first HTML carries the site's navigation for a crawler, not only the scripts that draw it.
++    const serverNav = /<div id="navbar-mount"><nav class="openvibe-navbar"[^>]*data-ov-server-nav="true"[\s\S]*?<\/nav><\/div>/.exec(r.text);
++    assert.ok(serverNav, 'the first HTML has the server navigation');
++    assert.match(serverNav[0], /href="\/rooms"[^>]*>Rooms</, 'and its places');
      // A Content-Security-Policy with a per-response nonce, carried by every inline script and only by them.
      const csp = r.headers.get('content-security-policy') || '';
      const nonce = (/'nonce-([^']+)'/.exec(csp) || [])[1];

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

index 1468229..1d1f0e3 100644

--- a/server/web/layout.js

+++ b/server/web/layout.js

@@ -190,8 +190,7 @@ ${o.app ? `<script src="${asset('vibe-md.js')}" defer></script>\n<script src="${

</head>

<a class="oc-skip" href="#main">Skip to content</a>

-<div id="navbar-mount"></div>

-${frame.noscriptNav({ name: siteName, home: '/', links: siteLinks.map(({ label, href }) => ({ label, href })) })}

+${frame.serverNav({ name: siteName, service: siteService, home: '/', links: siteLinks.map(({ label, href }) => ({ label, href })) })}

${o.body || ''}

diff --git a/test/web.test.js b/test/web.test.js

index 60a4c67..2e28e89 100644

--- a/test/web.test.js

+++ b/test/web.test.js

@@ -38,6 +38,10 @@ t('global chat reads without JavaScript; signing in shows the composer', async (

assert.match(r.text, /Sign in with OpenVibe/);

assert.match(r.text, /<meta name="robots" content="index, follow">/);

assert.match(r.text, /\/shared\/navbar\.js\?v=/, 'the Frame from this site\'s own /shared/');

+ // The first HTML carries the site's navigation for a crawler, not only the scripts that draw it.

+ const serverNav = /<div id="navbar-mount"><nav class="openvibe-navbar"[^>]*data-ov-server-nav="true"[\s\S]*?<\/nav><\/div>/.exec(r.text);

+ assert.ok(serverNav, 'the first HTML has the server navigation');

+ assert.match(serverNav[0], /href="\/rooms"[^>]*>Rooms</, 'and its places');

// A Content-Security-Policy with a per-response nonce, carried by every inline script and only by them.

const csp = r.headers.get('content-security-policy') || '';

const nonce = (/'nonce-([^']+)'/.exec(csp) || [])[1];