layout.pug

doctype html
html(lang=locale).h-100
  head
    block meta
      meta(charset="utf-8")
      meta(http-equiv="x-ua-compatible", content="ie=edge")
      title= meta.title
      meta(name="description", content=meta.description)
      meta(name="viewport", content="width=device-width, initial-scale=1")

      //- languages supported
      //- <https://support.google.com/webmasters/answer/189077?hl=en>
      //- <https://support.google.com/webmasters/answer/182192?hl=en>
      link(rel="alternate", href=`${config.urls.web}${ctx.pathWithoutLocale}`, hreflang="x-default")
      each language in availableLanguages
        link(rel="alternate", href=`${config.urls.web}/${language.locale}${ctx.pathWithoutLocale}`, hreflang=language.locale)

      //- generated with https://realfavicongenerator.net
      link(rel="apple-touch-icon", sizes="152x152", href=manifest('img/apple-touch-icon.png'), integrity=manifest('img/apple-touch-icon.png', 'integrity'), crossorigin='anonymous')
      link(rel="icon", type="image/png", href=manifest('img/favicon-32x32.png'), sizes="32x32", integrity=manifest('img/favicon-32x32.png', 'integrity'), crossorigin='anonymous')
      link(rel="icon", type="image/png", href=manifest('img/favicon-16x16.png'), sizes="16x16", integrity=manifest('img/favicon-16x16.png', 'integrity'), crossorigin='anonymous')
      link(rel="manifest", href=manifest('site.webmanifest'), integrity=manifest('site.webmanifest', 'integrity'), crossorigin='anonymous')
      link(rel="mask-icon", href=manifest('img/safari-pinned-tab.svg'), integrity=manifest('img/safari-pinned-tab.svg', 'integrity'), color=config.appColor, crossorigin='anonymous')
      meta(name="apple-mobile-web-app-title", content=config.appName)
      meta(name="application-name", content=config.appName)
      meta(name="msapplication-TileColor", content=config.appColor)
      meta(name="theme-color", content="#ffffff")

      //- csrf token
      meta(name="csrf-token", content=ctx.csrf)
      script.
        window._csrf = "#{ctx.csrf}";

      //- associate with wikipedia
      script(type='application/ld+json').
        {
          "@context": "http://schema.org",
          "@type": "Organization",
          "url": "https://forwardemail.net",
          "name": "Forward Email",
          "legalName": "Forward Email",
          "logo": "https://forwardemail.net/img/social.png",
          "sameAs" : [ "https://en.wikipedia.org/wiki/Forward_Email" ]
        }

    //- add opengraph tags to your structured data pages
    block opengraph
      link(rel='image_src', type='image/png', href=manifest('img/social.png'), integrity=manifest('img/social.png', 'integrity'), crossorigin='anonymous')
      meta(property='og:title', content=meta.title)
      meta(property='og:url', content=`${config.urls.web}${ctx.pathWithoutLocale}`)
      meta(property='og:description', content=meta.description)
      meta(property='og:image', content=`${config.urls.web}/img/social.png`)
      meta(name='twitter:card', content='summary_large_image')
      meta(name='twitter:site', content=config.twitter)
      meta(name='twitter:title', content=meta.title)
      meta(name='twitter:description', content=meta.description)
      meta(name='twitter:image:src', content=`${config.urls.web}/img/twitter.png`)

    //- css file
    block stylesheets
      link(rel="stylesheet", href=manifest('css/app.css'), integrity=manifest('css/app.css', 'integrity'), crossorigin='anonymous')

    //- preload and prefetch content
    //- <https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content>
    //- <https://developers.google.com/speed/pagespeed/insights/>
    block preload
      each asset in [ 'fonts/fa-brands-400.woff', 'fonts/fa-solid-900.woff' ]
        //- integrity attribute not currently supported
        //- <https://crbug.com/981419>
        link(rel='preload', href=manifest(asset), as='font', crossorigin='anonymous')

    block prefetch
      each asset in ['img/github-logo.svg', 'img/google-logo.svg']
        link(rel='prefetch', href=manifest(asset), as='image', crossorigin='anonymous')
      each asset in [ 'fonts/fa-brands-400.ttf', 'fonts/fa-solid-900.ttf' ]
        //- integrity attribute not currently supported
        //- <https://crbug.com/981419>
        link(rel='prefetch', href=manifest(asset), as='font', crossorigin='anonymous')

  body(role='document').d-flex.flex-column.min-h-100

    - const isHelp = ctx.pathWithoutLocale === '/help'
    - const isRegisterOrLogin = ['/register', config.loginRoute].includes(ctx.pathWithoutLocale)

    //- spinner
    block spinner
      include spinner/spinner
    //- navigation
    block navigation
      include _nav

    //- body
    main(role='main').flex-grow-1.d-flex.flex-column.flex-grow-1
      block body

    //- footer
    block footer
      include _footer

    //- scripts
    block scripts
      //- flash messaging (with koa-better-flash and sweetalert2)
      script.
        window._types = {
          success: "#{ t('Success') }",
          error: "#{ t('Error') }",
          info: "#{ t('Info') }",
          warning: "#{ t('Warning') }",
          question: "#{ t('Question') }"
        };
        window._messages = !{json(flash(), null, null)};

      //- set defaults for sweetalert2
      //- <https://github.com/limonte/sweetalert2/issues/763>
      script.
        window._swalDefaults = {
          confirmButtonText: "#{ t('OK') }",
          cancelButtonText: "#{ t('Cancel') }",
          closeButtonAriaLabel: "#{ t('Close this dialog') }",
          reverseButtons: true
        };

      //- set defaults for confirm prompt sweetalert2 modal
      script.
        window._confirmPromptTitle = "#{ t('Are you sure?') }";
        window._confirmPromptHTML = "#{ t('Please confirm if you wish to continue.') }";

      //- set the locale to be used by front-end assets
      script.
        window.LOCALE = "#{locale}";

      //- set the API endpoint to be used by front-end assets
      script.
        window.API_URL = "#{config.urls.api}";

      //- set the user and API key to be used by CabinJS
      if user
        script.
          window.USER = {
            id: "#{user.id}",
            name: "#{user[config.passport.fields.displayName]}",
            email: "#{user.email}"
          };
          window.API_TOKEN = "#{user[config.userFields.apiToken]}";
      else
        script.
          window.USER = {
            id: "#{ctx.sessionId}"
          };

      //- build
      if !isBot(ctx.get('User-Agent'))
        script(async, src=manifest('js/build.js'), integrity=manifest('js/build.js', 'integrity'), crossorigin='anonymous')