fox-send/server/layout.js

90 lines
3.1 KiB
JavaScript
Raw Normal View History

const html = require('choo/html');
const assets = require('../common/assets');
2018-08-07 22:40:17 +00:00
const initScript = require('./initScript');
module.exports = function(state, body = '') {
const custom_css = state.ui.assets.custom_css !== ''
? html`<link rel="stylesheet" type="text/css" href="${state.ui.assets.custom_css}" />`
: ''
return html`
2018-11-16 20:39:36 +00:00
<!DOCTYPE html>
<html lang="${state.locale}">
<head>
2019-02-19 20:52:09 +00:00
<title>${state.title}</title>
<base href="/" />
2019-03-14 20:17:47 +00:00
<meta name="robots" content="${state.robots},noarchive" />
2019-03-14 18:40:01 +00:00
<meta name="google" content="nositelinkssearchbox" />
2018-11-16 20:39:36 +00:00
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
2018-11-16 20:39:36 +00: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" />
2022-04-12 13:58:58 +00:00
<meta property="og:image" content="${state.ui.assets.facebook}" />
<meta name="twitter:image" content="${state.ui.assets.twitter}" />
2018-11-16 20:39:36 +00:00
<meta property="og:url" content="${state.baseUrl}" />
2019-03-10 00:45:17 +00:00
<meta name="theme-color" content="#220033" />
<meta name="msapplication-TileColor" content="#220033" />
2019-02-19 20:52:09 +00:00
<link rel="manifest" href="/app.webmanifest" />
2019-02-14 19:39:28 +00:00
<link rel="stylesheet" type="text/css" href="/inter.css" />
2022-04-12 13:58:58 +00:00
<style nonce=${state.cspNonce}>
:root {
--color-primary: ${state.ui.colors.primary};
--color-primary-accent: ${state.ui.colors.accent};
}
</style>
2018-11-16 20:39:36 +00:00
<link
rel="stylesheet"
type="text/css"
href="${assets.get('app.css')}"
/>
${custom_css}
2018-11-16 20:39:36 +00:00
<link
2019-02-19 20:52:09 +00:00
rel="apple-touch-icon"
sizes="180x180"
2022-04-12 13:58:58 +00:00
href="${state.ui.assets.apple_touch_icon}"
2018-11-16 20:39:36 +00:00
/>
<link
rel="icon"
2019-02-19 20:52:09 +00:00
type="image/png"
sizes="32x32"
2022-04-12 13:58:58 +00:00
href="${state.ui.assets.favicon_32px}"
2018-11-16 20:39:36 +00:00
/>
<link
2019-02-19 20:52:09 +00:00
rel="icon"
type="image/png"
sizes="16x16"
2022-04-12 13:58:58 +00:00
href="${state.ui.assets.favicon_16px}"
2018-11-16 20:39:36 +00:00
/>
<link
2019-02-19 20:52:09 +00:00
rel="mask-icon"
2022-04-12 13:58:58 +00:00
href="${state.ui.assets.safari_pinned_tab}"
2019-02-19 22:14:28 +00:00
color="#838383"
2018-11-16 20:39:36 +00:00
/>
<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>
`;
};