bigtech-sucks/packages/web/public/oath.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Ranch Oath — bigtech.sucks</title>
<style>
  :root{
    --ink:#0d0f0e;
    --bone:#e8e2d4;
    --dim:#8a8272;
    --amber:#d9a441;
    --good:#7fae7a;
    --bad:#c9563f;
    --rule:#2a2d2a;
  }
  *{box-sizing:border-box}
  body{
    margin:0;padding:3rem 1.25rem 6rem;
    background:var(--ink);color:var(--bone);
    font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    font-size:15px;line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  .sheet{max-width:62rem;margin:0 auto}
  pre{overflow-x:auto;margin:0;font-size:clamp(7px,1.35vw,13px);line-height:1.15;color:var(--dim)}
  .book{text-align:center;margin:0 0 .5rem}
  .book pre{display:inline-block;text-align:left;color:var(--bone);
    font-size:clamp(8px,1.6vw,15px);line-height:1.22;letter-spacing:0}
  h1{
    text-align:center;font-size:clamp(1.1rem,3vw,1.75rem);letter-spacing:.42em;
    font-weight:400;margin:1.5rem 0 .35rem;text-transform:uppercase;
  }
  .sub{text-align:center;color:var(--dim);letter-spacing:.18em;font-size:.72rem;text-transform:uppercase;margin-bottom:2.5rem}
  .rule{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
  .oath{max-width:44rem;margin:0 auto;font-size:clamp(.86rem,1.5vw,1.02rem)}
  .oath p{margin:0 0 1.15rem}
  .oath .open{color:var(--dim)}
  .oath .vow{color:var(--bone)}
  .oath .coda{
    text-align:center;margin:2.25rem 0 0;letter-spacing:.06em;
  }
  .oath .coda strong{font-weight:400;color:var(--amber)}
  .swear{
    text-align:center;margin:2.5rem 0 0;font-size:clamp(1rem,2.4vw,1.35rem);
    letter-spacing:.12em;color:var(--bone);
  }
  .subpoena{
    text-align:center;color:var(--dim);font-size:.8rem;letter-spacing:.14em;
    text-transform:uppercase;margin-top:.6rem;
  }
  .seal{
    max-width:44rem;margin:3rem auto 0;padding:1.25rem 1.35rem;
    border:1px solid var(--rule);background:rgba(255,255,255,.015);
  }
  .seal dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:0;font-size:.82rem}
  .seal dt{color:var(--dim);white-space:nowrap}
  .seal dd{margin:0;word-break:break-all}
  .status{margin:1.1rem 0 0;padding-top:1rem;border-top:1px dashed var(--rule);font-size:.82rem}
  .status .tag{letter-spacing:.16em;font-weight:700}
  .ok{color:var(--good)}
  .bad{color:var(--bad)}
  .unknown{color:var(--dim)}
  .note{max-width:44rem;margin:2.5rem auto 0;color:var(--dim);font-size:.8rem;line-height:1.6}
  a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.35)}
  a:hover{border-bottom-color:var(--amber)}
</style>
</head>
<body>
<div class="sheet">

  <div class="book"><pre id="crest"></pre></div>

  <h1>The Ranch Oath</h1>
  <div class="sub">Taken at bigtech.sucks &middot; over a living database</div>

  <hr class="rule" />

  <div class="oath">
    <p class="open">I, Christian Sass, of sound mind and sober judgment, do solemnly swear, with my hand on the Book:</p>

    <p class="vow">That every number published on this site is a number we measured, and that every measurement names the artifact it came from.</p>

    <p class="vow">That where we could not prove a thing, we have said so in the same size type as the things we could.</p>

    <p class="vow">That no claim here rests on our word alone.</p>

    <p class="vow">That we would rather publish a lower number than a comfortable one.</p>

    <p class="vow">That when we are shown to be wrong, the correction is published with its date and the original stays visible.</p>
  </div>

  <div class="swear">the truth, the whole truth, and nothing but the truth</div>
  <div class="subpoena">so help me God</div>

  <div class="seal">
    <dl>
      <dt>Sworn by</dt><dd>Christian Sass, Binary Ranch</dd>
      <dt>On</dt><dd id="sworn-on">&mdash;</dd>
      <dt>By the method</dt><dd id="method">&mdash;</dd>
      <dt>Over the digest</dt><dd id="digest">&mdash;</dd>
      <dt>Covering</dt><dd id="coverage">&mdash;</dd>
    </dl>
    <p class="status"><span class="tag" id="verdict">CHECKING</span> <span id="verdict-detail">&nbsp;</span></p>
  </div>

  <p class="note">
    This page recomputes the SHA-256 of the catalog the site is serving, in your browser, and compares it to
    the digest printed above. Nothing is trusted in transit. If the two disagree, the oath has been broken and
    you are reading a promise that has gone stale: the data changed and the words did not.
    Verification is a plain <code>crypto.subtle.digest</code> over <code>catalog.json</code>, and you can repeat it
    yourself with <code>sha256sum catalog.json</code>.
  </p>

</div>

<script>
  // The crest. A Bible, patriarchal cross on the cover.
  const CREST = String.raw`
            ______________________
           /                     /|
          /        _|_          / |
         /          |          /  |
        /        __|__        /   |
       /           |         /    |
      /            |        /     |
     /_____________________/      |
     |                     |      |
     |                     |     /
     |                     |    /
     |                     |   /
     |_____________________| /
                            |/
`;
  document.getElementById('crest').textContent = CREST.trim('\n');

  const $ = (id) => document.getElementById(id);

  async function verify() {
    try {
      const [oathRes, catalogRes] = await Promise.all([
        fetch('oath.json', { cache: 'no-store' }),
        fetch('catalog.json', { cache: 'no-store' }),
      ]);
      if (!oathRes.ok || !catalogRes.ok) throw new Error('artifacts missing');

      const oath = await oathRes.json();
      const bytes = await catalogRes.arrayBuffer();
      const hash = await crypto.subtle.digest('SHA-256', bytes);
      const hex = Array.from(new Uint8Array(hash))
        .map((b) => b.toString(16).padStart(2, '0'))
        .join('');

      $('sworn-on').textContent = oath.rebuilt_at.replace('T', ' ').replace(/\..*$/, ' UTC');
      $('method').textContent = oath.method_version;
      $('digest').textContent = hex;
      $('coverage').textContent =
        `${oath.assessed} of ${oath.products} products assessed, ${oath.byte_length.toLocaleString()} bytes`;

      const verdict = $('verdict');
      const detail = $('verdict-detail');
      if (hex === oath.digest) {
        verdict.textContent = 'VERIFIED';
        verdict.className = 'tag ok';
        detail.textContent = `The catalog you are reading hashes to the digest this oath was sworn over.`;
      } else {
        verdict.textContent = 'BROKEN';
        verdict.className = 'tag bad';
        detail.textContent =
          `MISMATCH. Sworn over ${oath.digest.slice(0, 16)}… but serving ${hex.slice(0, 16)}…. This oath is stale.`;
      }
    } catch (err) {
      $('verdict').textContent = 'UNVERIFIED';
      $('verdict').className = 'tag unknown';
      $('verdict-detail').textContent = String(err && err.message ? err.message : err) +
        '. The artifacts this oath is bound to could not be read.';
    }
  }

  verify();
</script>
</body>
</html>