layout.js 2.8 KB

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