send/app/templates/header.js
2018-01-16 13:21:26 -08:00

58 lines
1.6 KiB
JavaScript

const html = require('choo/html');
const assets = require('../../common/assets');
/*
The current weback config uses package.json to generate
version.json for /__version__ meaning `require` returns the
string 'version.json' in the frontend context but the json
on the server.
We want `version` to be constant at build time so this file
has a custom loader (/build/version_loader.js) just to replace
string with the value from package.json. 🤢
*/
const version = require('../../package.json').version || 'VERSION';
function browserName() {
try {
if (/firefox/i.test(navigator.userAgent)) {
return 'firefox';
}
if (/edge/i.test(navigator.userAgent)) {
return 'edge';
}
if (/trident/i.test(navigator.userAgent)) {
return 'ie';
}
if (/chrome/i.test(navigator.userAgent)) {
return 'chrome';
}
if (/safari/i.test(navigator.userAgent)) {
return 'safari';
}
return 'other';
} catch (e) {
return 'unknown';
}
}
const browser = browserName();
module.exports = function(state) {
return html`<header class="header">
<div class="send-logo">
<a href="/">
<img src="${assets.get(
'send_logo.svg'
)}" alt="Send"/><h1 class="site-title">Send</h1>
</a>
<div class="site-subtitle">
<a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
<div>${state.translate('siteSubtitle')}</div>
</div>
</div>
<a href="https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}"
rel="noreferrer noopener"
class="feedback"
target="_blank">${state.translate('siteFeedback')}</a>
</header>`;
};