index.html

<!--
  Created by Jacob Strieb.
  Fall 2024 - Spring 2025
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spreadsheet</title>

    <!-- TODO: other meta tags -->

    <!--
      Prefer rectangular opengraph photo, so use it first and last. Applications
      may pick the square one if they prefer that resolution, but shouldn't pick
      it based on ordering.
    -->
    <meta
      property="og:image"
      content="https://jstrieb.github.io/code-grid/opengraph.png"
    />
    <meta property="og:image:alt" content="Code Grid" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image"
      content="https://jstrieb.github.io/code-grid/favicon-512.png"
    />
    <meta property="og:image:alt" content="Code Grid" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />
    <meta
      property="og:image"
      content="https://jstrieb.github.io/code-grid/opengraph.png"
    />
    <meta property="og:image:alt" content="Code Grid" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- 
      Favicons seem to be picked from last to first, so put the best ones last.
    -->
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="512x512"
      href="/favicon-512.png"
    />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="/manifest.json" />
  </head>
  <body></body>
  <script type="module">
    import { mount } from "svelte";

    import "./src/global.css";
    import App from "./src/App.svelte";
    import { decompressText } from "./src/compress.js";

    // Decompression must be async, so we wait until it's complete to initialize
    // and mount the main component. The globals object is created when the App
    // is initialized, and relies on the decompressed data.
    decompressText(window.location.hash.slice(1))
      .catch((e) => {
        console.error(e);
        return undefined;
      })
      .then((urlData) => {
        const app = mount(App, {
          target: document.body,
          props: { urlData },
        });
      });
  </script>
</html>