index.html

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Event" lang="en">
  <head>
    <base href="{{ basepath }}" />
    <meta charset="utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
      name="viewport"
    />
    <meta content="{{ description }}" name="description" />
    <meta content="{{ keywords }}" name="keywords" />
    <meta content="{{ organizer.name }}" name="author" />
    <meta content="Project Hoverboard" name="generator" />

    <title>{{ title }}</title>

    <!-- Config from compilation step -->
    <meta content="{{ url }}" name="config-url" />
    <meta content="{{ basepath }}" name="config-basepath" />
    <meta content="{{ googleMapApiKey }}" name="config-google-maps-api-key" />

    <link href="{{ url }}" rel="canonical" />

    <link href="images/favicon.ico" rel="icon" />

    <meta content="{{ webapp.themeColor }}" name="theme-color" />
    <link href="manifest.json" rel="manifest" />

    <!-- Add to homescreen for Chrome on Android -->
    <meta content="yes" name="mobile-web-app-capable" />
    <!-- fallback for manifest.json -->
    <meta content="{{ title }}" name="application-name" />

    <!-- Add to homescreen for Safari on iOS -->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" />
    <meta content="{{ title }}" name="apple-mobile-web-app-title" />

    <!-- Homescreen icons. -->
    <link href="images/manifest/icon-48.png" rel="apple-touch-icon" />
    <link href="images/manifest/icon-72.png" rel="apple-touch-icon" sizes="72x72" />
    <link href="images/manifest/icon-96.png" rel="apple-touch-icon" sizes="96x96" />
    <link href="images/manifest/icon-144.png" rel="apple-touch-icon" sizes="144x144" />
    <link href="images/manifest/icon-192.png" rel="apple-touch-icon" sizes="192x192" />

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta content="images/manifest/icon-144.png" name="msapplication-TileImage" />
    <meta content="#00aba9" name="msapplication-TileColor" />
    <meta content="no" name="msapplication-tap-highlight" />

    <!-- Facebook sharing meta data -->
    <meta content="{{ title }}" property="og:title" />
    <meta content="{{ title }}" property="og:site_name" />
    <meta content="website" property="og:type" />
    <meta content="{{ url }}" property="og:url" />
    <meta content="{{ description }}" property="og:description" />
    <meta content="Event" property="og:type" />
    <meta content="{{ image }}" property="og:image" />
    <meta content="image/jpeg" property="og:image:type" />

    <!-- Twitter meta data -->
    <meta content="summary_large_image" name="twitter:card" />
    <meta content="@{{ organizer.twitter }}" name="twitter:creator" />
    <meta content="{{ title }}" name="twitter:title" />
    <meta content="{{ description }}" name="twitter:description" />
    <meta content="{{ image }}" name="twitter:image" />
    <meta name="twitter:label1" value="{{ location.label }}" />
    <meta name="twitter:data1" value="{{ location.name }}" />
    <meta name="twitter:label2" />
    <meta name="twitter:data2" />

    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link href="https://firestore.googleapis.com" rel="preconnect" />

    <script>
      // https://stackoverflow.com/a/50407571/26406
      window.process = {
        env: {
          NODE_ENV: '{{ NODE_ENV }}',
        },
      };

      window.Polymer = {
        rootPath: '{{ basepath }}',
      };

      // prettier-ignore
      {{ webVitalsPolyfill | safe }}

      // Capture the config object from /__/firebase/init.js for src/firebase.ts
      window.firebase = {
        initializeApp: (config) => {
          window.firebaseConfig = config;
          // Delete fake Firebase global
          delete window.firebase;
        },
      };
    </script>
    <script src="/__/firebase/init.js"></script>
    <script src="./src/hoverboard-app.ts" type="module"></script>
    <script src="./src/components/app-install.ts" type="module"></script>
    <script src="./src/service-worker-registration.ts" type="module"></script>

    <style>
      html,
      body {
        min-height: 100%;
        height: 100%;
      }

      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
          sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        font-size: 16px;
        line-height: 1.5;
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
      }

      /* styling for render while resources are loading */
      hoverboard-app[unresolved] {
        padding: 0 16px;
        display: block;
        line-height: 68px;
        text-align: center;
        font-weight: 600;
        letter-spacing: 0.3em;
        color: #202020;
        overflow: visible;
      }
    </style>
  </head>

  <body>
    <hoverboard-app unresolved>{{ title }}</hoverboard-app>

    <noscript>Please enable JavaScript to view this website.</noscript>
  </body>
</html>