index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>__META_TITLE__</title>
    <base href="/" />
    <meta name="keywords" content="video, comedian, standup, humour" />
    <meta charset="UTF-8" />
    <meta name="description" content="__META_DESCRIPTION__" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" />
    <meta property="og:site_name" content="Comedy Collection" />
    <meta property="og:url" content="__META_URL__" />
    <meta property="og:title" content="__META_TITLE__" />
    <meta property="og:description" content="__META_DESCRIPTION__" />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="https://storage.googleapis.com/comedy-collection.appspot.com/imgs/standup-waiting.png"
    />
    <meta property="og:image:width" content="192" />
    <meta property="og:image:height" content="192" />

    <style>
      :root {
        --base-font-size: 1.4rem;
        --title-font: 'Quicksand';
        --subtitle-font: 'Quicksand';
      }
      html {
        font-size: 62.5%;
      }
      body {
        background: #0d334d;
        font-size: var(--base-font-size);
      }
      .splash-screen svg {
        height: max(25vw, 200px);
        width: max(25vw, 200px);
      }
      .splash-screen {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .splash-screen .content {
        text-align: center;
      }
      .splash-screen .logo {
        animation: zoomin 10s ease-out;
        animation-fill-mode: forwards;
      }
      .splash-screen .title {
        font-family: var(--title-font), sans-serif;
        font-size: 1.4em;
        color: #ffffff;
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="splash-screen">
        <div class="content">
          <div class="logo">
            <svg
              version="1.0"
              xmlns="http://www.w3.org/2000/svg"
              width="1200.000000pt"
              height="1200.000000pt"
              viewBox="0 0 1200.000000 1200.000000"
              preserveAspectRatio="xMidYMid meet"
            >
              <g transform="translate(0.000000,1200.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
                <path
                  d="M5715 10239 c-471 -33 -934 -143 -1362 -325 -297 -126 -467 -219
                  -728 -395 -539 -364 -991 -850 -1312 -1409 -199 -346 -361 -758 -448 -1140
                  -150 -652 -150 -1288 0 -1940 87 -382 249 -794 448 -1140 267 -466 652 -909
                  1080 -1243 531 -414 1179 -705 1832 -823 590 -107 1159 -94 1745 41 382 87
                  794 249 1140 448 559 321 1045 773 1409 1312 176 261 269 431 395 728 194 457
                  297 910 328 1439 25 427 -34 946 -153 1363 -93 322 -240 673 -402 955 -321
                  559 -773 1045 -1312 1409 -261 176 -431 269 -728 395 -603 256 -1279 370
                  -1932 325z m646 -265 c684 -65 1303 -285 1873 -667 579 -389 1072 -959 1369
                  -1587 397 -839 492 -1774 271 -2680 -158 -646 -488 -1256 -945 -1746 -408
                  -437 -845 -743 -1395 -979 -449 -193 -1014 -305 -1534 -305 -1209 0 -2344 544
                  -3109 1490 -361 447 -630 988 -765 1540 -157 643 -155 1296 5 1935 162 651
                  493 1258 947 1739 412 436 841 736 1388 972 325 139 769 250 1159 288 195 19
                  536 19 736 0z"
                />
                <path
                  d="M5740 9934 c-551 -47 -986 -163 -1448 -384 -237 -114 -446 -242 -678
                  -417 -263 -197 -539 -470 -730 -724 -277 -367 -455 -694 -604 -1111 -90 -251
                  -159 -549 -196 -848 -26 -205 -26 -695 0 -900 80 -637 291 -1216 628 -1716
                  170 -253 288 -400 476 -591 205 -209 364 -341 637 -525 419 -283 904 -484
                  1405 -582 302 -59 428 -70 770 -70 342 0 468 11 770 70 399 78 815 232 1173
                  435 193 109 486 318 656 468 262 229 474 474 689 795 279 415 479 900 576
                  1396 59 302 70 428 70 770 0 342 -11 468 -70 770 -78 399 -232 815 -435 1173
                  -109 193 -318 486 -468 656 -229 262 -474 474 -795 689 -493 331 -1062 542
                  -1681 623 -143 19 -622 34 -745 23z m760 -94 c359 -48 610 -114 946 -248 966
                  -386 1760 -1180 2146 -2146 135 -339 200 -586 250 -956 19 -143 22 -209 22
                  -490 0 -281 -3 -347 -22 -490 -50 -370 -115 -617 -250 -956 -386 -966 -1180
                  -1760 -2146 -2146 -339 -135 -586 -200 -956 -250 -143 -19 -209 -22 -490 -22
                  -281 0 -347 3 -490 22 -370 50 -617 115 -956 250 -717 287 -1337 793 -1782
                  1455 -269 401 -473 890 -567 1357 -56 285 -69 429 -69 780 0 351 13 495 69
                  780 135 674 470 1323 954 1848 632 687 1514 1131 2426 1221 61 6 126 13 145
                  15 19 2 166 3 325 1 224 -3 325 -8 445 -25z"
                />
                <path
                  d="M5730 9820 c-1358 -98 -2552 -899 -3159 -2120 -211 -425 -330 -840
                  -383 -1330 -15 -148 -15 -592 0 -740 53 -490 172 -905 383 -1330 193 -387 418
                  -700 723 -1006 306 -305 619 -530 1006 -723 425 -211 840 -330 1330 -383 148
                  -15 592 -15 740 0 490 53 905 172 1330 383 387 193 700 418 1006 723 305 306
                  530 619 723 1006 211 425 330 840 383 1330 15 148 15 592 0 740 -53 490 -172
                  905 -383 1330 -457 919 -1250 1609 -2226 1936 -231 78 -560 147 -823 174 -149
                  15 -502 20 -650 10z m-238 -2496 c117 -32 134 -42 191 -103 87 -93 150 -219
                  129 -258 -7 -12 -4 -24 10 -44 17 -23 21 -47 25 -170 3 -79 1 -162 -4 -184 -5
                  -22 -5 -58 -1 -80 16 -81 36 -1028 27 -1245 -7 -157 -32 -275 -66 -313 -11
                  -12 -31 -42 -45 -67 -36 -61 -82 -103 -153 -138 -98 -49 -138 -56 -300 -56
                  -160 0 -225 14 -294 63 -16 12 -37 21 -46 21 -19 0 -104 86 -145 149 -17 25
                  -40 77 -52 115 -19 64 -22 102 -27 406 -9 503 -2 890 15 890 18 0 18 10 -3 51
                  -14 27 -18 66 -21 199 -5 305 33 503 121 622 27 36 119 105 166 124 63 25 172
                  42 279 43 83 1 121 -4 194 -25z m2694 17 c16 -5 63 -19 103 -32 59 -17 86 -32
                  123 -67 92 -86 172 -238 149 -281 -7 -11 -5 -21 5 -32 9 -10 19 -46 24 -80 11
                  -72 11 -249 1 -294 -4 -16 -3 -50 2 -75 4 -25 10 -147 12 -272 2 -126 6 -232
                  9 -237 3 -5 6 -191 6 -412 0 -321 -3 -418 -15 -474 -22 -104 -33 -136 -53
                  -159 -10 -12 -31 -42 -45 -68 -67 -117 -202 -184 -397 -195 -155 -8 -257 11
                  -360 70 -14 8 -38 21 -53 28 -42 20 -142 149 -167 216 -12 31 -26 94 -31 138
                  -7 58 -15 1052 -10 1183 1 6 8 12 16 12 19 0 19 9 -2 51 -15 29 -18 65 -20
                  234 -3 372 46 542 189 650 69 53 108 70 203 89 82 16 269 20 311 7z m-4078
                  -26 c151 -36 264 -127 335 -269 62 -124 89 -356 48 -407 -18 -22 -26 -24 -163
                  -27 -126 -4 -146 -2 -158 13 -9 11 -16 55 -20 129 -7 117 -22 164 -64 199 -96
                  80 -250 56 -304 -48 -26 -50 -31 -191 -33 -888 -1 -637 -2 -668 -20 -691 -23
                  -30 -23 -32 -1 -38 16 -5 20 -19 25 -86 9 -140 58 -200 169 -209 84 -7 129 8
                  167 56 46 58 54 88 52 182 -3 108 11 167 42 174 12 3 83 2 157 -2 128 -8 135
                  -9 146 -32 19 -38 12 -273 -11 -346 -41 -131 -122 -233 -244 -305 -64 -38 -84
                  -45 -181 -58 -100 -14 -119 -14 -211 1 -244 40 -401 202 -432 447 -12 101 -14
                  553 -2 631 5 31 4 49 -4 53 -15 10 -15 178 0 193 9 9 9 20 -1 43 -17 41 -5
                  785 14 877 14 63 38 113 56 113 6 0 10 19 10 41 0 53 27 96 84 137 63 45 188
                  103 255 118 78 17 214 16 289 -1z m2750 0 c152 -36 261 -123 333 -266 47 -94
                  73 -222 67 -331 -5 -100 -8 -102 -181 -106 -125 -4 -145 -2 -157 13 -9 11 -16
                  56 -21 129 -7 118 -22 165 -63 199 -96 80 -249 56 -304 -48 -26 -50 -31 -180
                  -33 -883 -1 -640 -2 -674 -20 -696 -23 -30 -23 -32 -1 -38 16 -5 20 -19 25
                  -86 9 -140 58 -200 169 -209 84 -7 129 8 167 56 46 57 53 85 54 214 2 155 -5
                  149 181 141 97 -4 145 -11 155 -20 18 -16 25 -199 11 -284 -25 -163 -116 -295
                  -262 -382 -61 -36 -83 -43 -178 -56 -100 -14 -119 -14 -211 1 -174 29 -298
                  114 -371 254 -41 78 -55 122 -64 213 -10 87 -9 555 1 603 5 25 4 46 -4 61 -9
                  15 -11 52 -7 112 3 49 4 98 4 109 -1 11 -1 202 0 424 3 450 10 527 57 568 18
                  16 25 32 25 59 0 71 55 126 198 198 40 20 101 43 135 50 84 19 218 19 295 1z"
                />
                <path
                  d="M5269 7040 c-127 -22 -179 -95 -179 -252 0 -27 -7 -63 -16 -80 -13
                  -26 -14 -35 -4 -51 14 -23 18 -109 21 -492 3 -244 1 -273 -15 -297 -17 -25
                  -16 -28 4 -69 21 -40 23 -61 29 -368 8 -377 9 -384 89 -423 57 -27 158 -36
                  205 -18 44 18 85 57 97 96 12 34 -4 1388 -19 1684 -7 139 -10 160 -34 206 -21
                  42 -32 52 -59 57 -18 4 -42 8 -53 11 -11 2 -41 0 -66 -4z"
                />
                <path
                  d="M8019 7040 c-126 -22 -179 -95 -179 -252 0 -27 -7 -63 -16 -80 -13
                  -25 -14 -36 -5 -50 14 -22 19 -133 22 -498 3 -238 1 -268 -15 -292 -17 -25
                  -16 -28 5 -70 21 -41 22 -58 26 -343 2 -165 9 -321 14 -347 13 -59 55 -102
                  114 -117 126 -32 231 5 265 93 8 22 8 229 0 780 -13 904 -19 1045 -48 1102
                  -11 22 -26 45 -34 50 -12 10 -91 35 -99 33 -2 -1 -25 -5 -50 -9z"
                />
                <path
                  d="M4248 4882 c-10 -2 -18 -8 -18 -13 0 -13 27 -11 35 2 9 13 4 16 -17
                  11z"
                />
                <path
                  d="M6998 4882 c-10 -2 -18 -8 -18 -13 0 -13 27 -11 35 2 9 13 4 16 -17
11z"
                />
              </g>
            </svg>
          </div>
          <h1 class="title">Comedy Collection</h1>
        </div>
      </div>
    </div>
    <script>
      function loadScript(src) {
        return new Promise(function (resolve, reject) {
          var s;
          s = document.createElement('script');
          s.src = src;
          s.onload = resolve;
          s.onerror = reject;
          document.head.appendChild(s);
        });
      }
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      function initAnalytics(measurementId) {
        gtag('js', new Date());
        gtag('config', measurementId);
      }

      // Initalize google analytics
      // NOTE: lookup before modifying
      const measurementId = null;
      if (measurementId) {
        const src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
        loadScript(src).then(() => initAnalytics(measurementId));
      }
    </script>
    <script>
      (() => {
        // Using HTML Webpack Plugin generated chunks list
        const files = `<%= htmlWebpackPlugin.files.js %>`;
        const names = files.split(',');
        const obj = {
          'react-libs': null,
          'common-libs': null,
          'app-index': null,
          'caching-configs.register': null
        };
        Object.keys(obj).forEach((key) => {
          const value = names.find((x) => x.includes(key));
          obj[key] = value;
        });

        // LOAD SCRIPTS
        loadScript(obj['caching-configs.register']);
        // ORDER
        // fetch recommendation and react libs
        // post getting recommendation, init app
        Promise.all([loadScript(obj['react-libs']), loadScript(obj['common-libs'])]).then(() => {
          loadScript(obj['app-index']);
        });
      })();
    </script>
  </body>
</html>