2017-08-24 23:54:02 +02:00
|
|
|
const html = require('choo/html');
|
|
|
|
|
const assets = require('../common/assets');
|
2018-08-08 00:40:17 +02:00
|
|
|
const initScript = require('./initScript');
|
2017-08-24 23:54:02 +02:00
|
|
|
|
|
|
|
|
module.exports = function(state, body = '') {
|
|
|
|
|
const firaTag = state.fira
|
2018-11-16 21:39:36 +01:00
|
|
|
? html`
|
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
type="text/css"
|
|
|
|
|
href="https://code.cdn.mozilla.net/fonts/fira.css"
|
|
|
|
|
/>
|
|
|
|
|
`
|
2017-08-24 23:54:02 +02:00
|
|
|
: '';
|
|
|
|
|
return html`
|
2018-11-16 21:39:36 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="${state.locale}">
|
|
|
|
|
<head>
|
2018-11-20 15:50:59 +01:00
|
|
|
<base href="/" />
|
2018-11-16 21:39:36 +01:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2017-08-24 23:54:02 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<meta property="og:title" content="${state.title}" />
|
|
|
|
|
<meta name="twitter:title" content="${state.title}" />
|
|
|
|
|
<meta name="description" content="${state.description}" />
|
|
|
|
|
<meta property="og:description" content="${state.description}" />
|
|
|
|
|
<meta name="twitter:description" content="${state.description}" />
|
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
|
|
|
|
content="${state.baseUrl}${assets.get('send-fb.jpg')}"
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
name="twitter:image"
|
|
|
|
|
content="${state.baseUrl}${assets.get('send-twitter.jpg')}"
|
|
|
|
|
/>
|
|
|
|
|
<meta property="og:url" content="${state.baseUrl}" />
|
2018-11-20 21:00:32 +01:00
|
|
|
<meta name="theme-color" content="#0a84ff" />
|
|
|
|
|
<link rel="manifest" href="/app.webmanifest" />
|
2017-08-24 23:54:02 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<title>${state.title}</title>
|
2017-08-24 23:54:02 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
type="text/css"
|
|
|
|
|
href="${assets.get('app.css')}"
|
|
|
|
|
/>
|
2017-11-08 00:54:42 +01:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<!-- generic favicons -->
|
|
|
|
|
<link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32" />
|
|
|
|
|
<link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96" />
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
href="${assets.get('favicon-128.png')}"
|
|
|
|
|
sizes="128x128"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
href="${assets.get('favicon-228.png')}"
|
|
|
|
|
sizes="228x228"
|
|
|
|
|
/>
|
2017-10-06 17:24:17 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<!-- Android -->
|
|
|
|
|
<link
|
|
|
|
|
rel="shortcut icon"
|
|
|
|
|
href="${assets.get('favicon-196.png')}"
|
|
|
|
|
sizes="196x196"
|
|
|
|
|
/>
|
2017-10-06 17:24:17 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<!-- iOS -->
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
href="${assets.get('favicon-120.png')}"
|
|
|
|
|
sizes="120x120"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
href="${assets.get('favicon-152.png')}"
|
|
|
|
|
sizes="152x152"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
href="${assets.get('favicon-180.png')}"
|
|
|
|
|
sizes="180x180"
|
|
|
|
|
/>
|
2017-10-06 17:24:17 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<!-- Windows 8 IE 10 -->
|
|
|
|
|
<meta name="msapplication-TileColor" content="#FFFFFF" />
|
|
|
|
|
<meta
|
|
|
|
|
name="msapplication-TileImage"
|
|
|
|
|
content="${assets.get('favicon-144.png')}"
|
|
|
|
|
/>
|
2017-10-06 17:24:17 +02:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
<!-- Windows 8.1 + IE11 and above -->
|
|
|
|
|
<meta name="msapplication-config" content="/browserconfig.xml" />
|
2017-11-08 00:54:42 +01:00
|
|
|
|
2018-11-16 21:39:36 +01:00
|
|
|
${firaTag}
|
|
|
|
|
<script defer src="${assets.get('app.js')}"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<noscript>
|
|
|
|
|
<div class="noscript">
|
|
|
|
|
<h2>${state.translate('javascriptRequired')}</h2>
|
|
|
|
|
<p>
|
|
|
|
|
<a
|
|
|
|
|
class="link"
|
|
|
|
|
href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript"
|
|
|
|
|
>
|
|
|
|
|
${state.translate('whyJavascript')}
|
|
|
|
|
</a>
|
|
|
|
|
</p>
|
|
|
|
|
<p>${state.translate('enableJavascript')}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</noscript>
|
|
|
|
|
${body} ${initScript(state)}
|
|
|
|
|
</html>
|
2017-08-24 23:54:02 +02:00
|
|
|
`;
|
|
|
|
|
};
|
