openvibers/openrestream Commits

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

OP OpenVibers committed 2 days ago · aca1a4ba3c · 3 files, +11 −3

* Server-render the site navigation in the first HTML

* Test the server navigation in the first HTML

Changes

ddiff --git a/server/ui/layout.js b/server/ui/layout.js
iindex f00b26f..c3871b6 100644
---- a/server/ui/layout.js
++++ b/server/ui/layout.js
@@@ -1,5 +1,6 @@
'use strict';
const ovServe = require('openvibe-shared/serve');
++const frame = require('openvibe-shared/frame');
const seo = require('openvibe-shared/seo');
const social = require('openvibe-shared/social');
const { TWIN_PATH_RE } = require('../agent-pages');
@@@ -204,8 +205,7 @@ ${[...new Set(['showcase.css', 'kit.css', 'kit-data.css', ...styles])].map((name
<script src="${ovServe.url('footer.js')}" defer></script>
</head>
<body>
--<div id="navbar-mount"></div>
--<noscript><nav class="ore" style="padding:8px 16px"><a href="/">OpenRestream</a> · <a href="/streams">Streams</a> · <a href="/sessions">Sessions</a> · ${user ? '<a href="/auth/logout">Sign out</a>' : '<a href="/auth/login">Sign in</a>'}</nav></noscript>
++${frame.serverNav({ name: SITE, service: 'openre', home: '/', links: nav.links })}
<main id="main" class="ore">
${body}
</main>
ddiff --git a/test/destinations-ui.test.js b/test/destinations-ui.test.js
iindex 353bc99..1d9dd6c 100644
---- a/test/destinations-ui.test.js
++++ b/test/destinations-ui.test.js
@@@ -55,7 +55,10 @@ t('the UI works without JavaScript: landing, sign-in prompt, streams', async ()
assert.strictEqual(home.status, 200);
assert.match(home.text, /OpenRestream/);
assert.match(home.text, /theme-loader\.js/);
-- assert.match(home.text, /<noscript><nav/);
++ // The first HTML carries the site navigation inside the mount (the browser navbar replaces it on boot).
++ const serverNav = /<div id="navbar-mount"><nav[^>]*data-ov-server-nav="true"[\s\S]*?<\/nav><\/div>/.exec(home.text);
++ assert.ok(serverNav, 'the first HTML has the server navigation');
++ assert.match(serverNav[0], /href="\/streams"[^>]*>Streams</);
const signin = await request(api.base, 'GET', '/streams');
assert.strictEqual(signin.status, 401);
assert.match(signin.text, /Sign in with OpenVibe/);
ddiff --git a/test/discovery.test.js b/test/discovery.test.js
iindex 1581bb3..5b2fb34 100644
---- a/test/discovery.test.js
++++ b/test/discovery.test.js
@@@ -109,6 +109,11 @@ t('the front page leads with open restreaming, links to Live for browser go-live
const r = await request(api.base, 'GET', '/');
assert.strictEqual(r.status, 200);
assert.match(r.text, /<h1>Go live once\. Stream everywhere\.<\/h1>/);
++ // The first HTML carries the site's navigation, 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="\/streams"[^>]*>Streams</);
++ assert.match(serverNav[0], /href="\/go-live"[^>]*>Go live</);
assert.match(r.text, /ovk-page-head/);
// The hero's signal flow (11-07): every platform with its own switch, the count by CSS, no script needed.
const flow = (/<div class="ore-flow"[\s\S]*?<\/ul>/.exec(r.text) || [''])[0];