layout.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. const html = require('choo/html');
  2. const assets = require('../common/assets');
  3. const initScript = require('./initScript');
  4. module.exports = function(state, body = '') {
  5. const custom_css = state.ui.assets.custom_css !== ''
  6. ? html`<link rel="stylesheet" type="text/css" href="${state.ui.assets.custom_css}" />`
  7. : ''
  8. return html`
  9. <!DOCTYPE html>
  10. <html lang="${state.locale}">
  11. <head>
  12. <title>${state.title}</title>
  13. <base href="/" />
  14. <meta name="robots" content="${state.robots},noarchive" />
  15. <meta name="google" content="nositelinkssearchbox" />
  16. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  17. <meta charset="utf-8" />
  18. <meta name="viewport" content="width=device-width, initial-scale=1" />
  19. <meta property="og:title" content="${state.title}" />
  20. <meta name="twitter:title" content="${state.title}" />
  21. <meta name="description" content="${state.description}" />
  22. <meta property="og:description" content="${state.description}" />
  23. <meta name="twitter:description" content="${state.description}" />
  24. <meta name="twitter:card" content="summary" />
  25. <meta property="og:image" content="${state.ui.assets.facebook}" />
  26. <meta name="twitter:image" content="${state.ui.assets.twitter}" />
  27. <meta property="og:url" content="${state.baseUrl}" />
  28. <meta name="theme-color" content="#220033" />
  29. <meta name="msapplication-TileColor" content="#220033" />
  30. <link rel="manifest" href="/app.webmanifest" />
  31. <link rel="stylesheet" type="text/css" href="/inter.css" />
  32. <style nonce=${state.cspNonce}>
  33. :root {
  34. --color-primary: ${state.ui.colors.primary};
  35. --color-primary-accent: ${state.ui.colors.accent};
  36. }
  37. </style>
  38. <link
  39. rel="stylesheet"
  40. type="text/css"
  41. href="${assets.get('app.css')}"
  42. />
  43. ${custom_css}
  44. <link
  45. rel="apple-touch-icon"
  46. sizes="180x180"
  47. href="${state.ui.assets.apple_touch_icon}"
  48. />
  49. <link
  50. rel="icon"
  51. type="image/png"
  52. sizes="32x32"
  53. href="${state.ui.assets.favicon_32px}"
  54. />
  55. <link
  56. rel="icon"
  57. type="image/png"
  58. sizes="16x16"
  59. href="${state.ui.assets.favicon_16px}"
  60. />
  61. <link
  62. rel="mask-icon"
  63. href="${state.ui.assets.safari_pinned_tab}"
  64. color="#838383"
  65. />
  66. <script defer src="${assets.get('app.js')}"></script>
  67. </head>
  68. <noscript>
  69. <div class="noscript">
  70. <h2>${state.translate('javascriptRequired')}</h2>
  71. <p>
  72. <a
  73. class="link"
  74. href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript"
  75. >
  76. ${state.translate('whyJavascript')}
  77. </a>
  78. </p>
  79. <p>${state.translate('enableJavascript')}</p>
  80. </div>
  81. </noscript>
  82. ${body} ${initScript(state)}
  83. </html>
  84. `;
  85. };