index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Bee Artifact Content</title>
    <link rel="preload" href="/fonts/IBMPlexSans-Regular.woff2" as="font" crossorigin type="font/woff2">
    <link rel="preload" href="/fonts/IBMPlexSans-SemiBold.woff2" as="font" crossorigin type="font/woff2">
    <% preloadItems.forEach(item => { %>
      <% if(item.contentType === "application/vnd.pypi.simple.v1+json") { %>
        <script>fetch("<%= item.url %>", { headers: { "Accept": "<%= item.contentType %>, */*;q=0.01", "Accept-Encoding": null } })</script>
      <% } else { %>
        <link rel="preload" href="<%= item.url %>" as="fetch" type="<%= item.contentType %>" crossorigin>
      <% } %>
    <% }); %>

    <link rel="stylesheet" href="src/styles/style.scss" />
  </head>

  <body class="cds--white">
    <div id="root"></div>
    <div id="loading">
      <div class="backdrop"></div>
      <svg class="spinner" width="100" height="100">
        <circle cx="50" cy="50" r="44" stroke="#0f62fe" stroke-width="10" fill="none" stroke-dasharray="235">
          <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/>
        </circle>
      </svg>
    </div>
    <script src="/<%= stlitePath %>/stlite.js"></script>
    <script src="src/entry.ts" type="module"></script>
  </body>
</html>