tyche/index.html at main · corvardt/tyche · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/glyph.svg" />
    <!-- Saved to a home screen, iOS ignores the favicon and will screenshot the
         page unless it is handed one of these. It masks its own rounded corners,
         so this one is drawn square and full bleed with the lot held clear of
         the crop; rounding it here would round it twice and show void at the
         corners. -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- One tag, not one per scheme: the reader's choice is a cookie that can
         disagree with the system, and a media-gated tag cannot see it. The
         inline script below sets it from the medium that actually won, and the
         palette re-reads it from `--c-void` on every change after that. -->
    <meta name="theme-color" content="#0a0a0b" />
    <meta
      name="description"
      content="Tyche. Forty random Ethereum keypairs a roll, read against the chain."
    />
    <title>Tyche</title>

    <!-- What a pasted link renders as. Without it the preview is a grey box
         with a domain in it. Captured from the running instrument by
         `npm run shots`, not drawn, so it cannot claim a page that does not
         exist: the sheet in it is forty keys that were really generated. -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://tyche.corvardt.com/" />
    <meta property="og:title" content="Tyche: forty random Ethereum keys a roll" />
    <meta
      property="og:description"
      content="Random Ethereum keypairs generated in the browser and read against the chain. The odds are one in 2^160; the instrument is what it does while waiting."
    />
    <meta property="og:image" content="https://tyche.corvardt.com/og.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="A rolled batch as a contact sheet of forty identicons on a black tube, beside a panel counting the rolls, the keys checked and the fraction of the keyspace covered."
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://tyche.corvardt.com/og.png" />
    <!-- The two weights the first screen is built from, fetched in parallel
         with the stylesheet that declares them rather than after it. -->
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href="/fonts/ibm-plex-mono-400-latin.woff2"
      crossorigin
    />
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href="/fonts/ibm-plex-mono-600-latin.woff2"
      crossorigin
    />
    <script>
      // Resolve the medium before first paint so the tube never flashes on
      // paper. The cookie is written on `.corvardt.com`, so a choice made on the
      // index or on any other project carries here and back again.
      (function () {
        var m = document.cookie.match(/(?:^|;\s*)corvardt-theme=(dark|light)/);
        var t = m ? m[1] : matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
        document.documentElement.dataset.theme = t;
        // The browser chrome is part of the medium. The stylesheet is not
        // parsed yet at this point, so the two grounds are written out here
        // rather than read back off the palette; a coating that moves the
        // ground further corrects this on the first render.
        document.querySelector('meta[name=theme-color]').content =
          t === 'light' ? '#dedee0' : '#0a0a0b';

        // The coating, for the same reason and one step further: it is this
        // instrument's alone, so it is in localStorage rather than the shared
        // cookie, and reading it here is what stops a chosen tube from
        // flashing grey on every load.
        try {
          var p = localStorage.getItem('palette');
          if (/^(white|oil|crimson|demon)$/.test(p || '')) {
            document.documentElement.dataset.palette = p;
          }
        } catch (e) {
          // Storage disabled; the grey tube is the right fallback.
        }
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>