SchOS/docs/Website/app.js

/* SPDX-License-Identifier: Apache-2.0
 *
 * Two behaviours, no framework:
 *   1. the hero console types a real boot log
 *   2. sections fade in once, as they arrive
 *
 * Both are decoration. If this file fails to load the page is still complete
 * and still readable, which is the test any script on a documentation site
 * should have to pass.
 */
(function () {
  "use strict";

  var reduced = window.matchMedia &&
                window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  /* ---- 1. the boot log ------------------------------------------------
   * These are real lines from a real boot, not invented ones. The timer
   * calibration line in particular is there because of what it cost: the
   * clock ran seven times slow until a graphics driver was made to
   * acknowledge its own interrupt. See docs/history/kernel.md.
   */
  var LINES = [
    { t: "[    0.000]", k: "SchIFT",     s: " 64-bit, 2 cpus" },
    { t: "[    0.004]", k: "cpu0",       s: ": lapic timer 999941980 Hz, tsc 3792 MHz" },
    { t: "[    0.049]", k: "virtio-gpu", s: ": 1280x800, 4000 KB framebuffer" },
    { t: "[    0.088]", k: "e1000",      s: ": 52:54:00:12:34:56, link up, irq 11" },
    { t: "[    0.143]", k: "schfs",      s: ": mounted 'schos', generation 2" },
    { t: "[    0.169]", k: "net",        s: ": eth0 10.0.2.15/255.255.255.0" },
    { t: "[    0.204]", k: "schinit",    s: ": ready (pid 1)" },
    { t: "[    0.212]", k: "schinitd",   s: ": 2 job(s) loaded, generation 1", g: true },
    { t: "",            k: "",           s: "# " }
  ];

  var out = document.getElementById("bootlog");

  function span(cls, text) {
    var e = document.createElement("span");
    if (cls) e.className = cls;
    e.textContent = text;
    return e;
  }

  function emit(line) {
    if (line.t) {
      out.appendChild(span("t", line.t + " "));
      out.appendChild(span("k", line.k));
    }
    out.appendChild(span(line.g ? "g" : "", line.s));
    out.appendChild(document.createTextNode("\n"));
  }

  function cursor() {
    var c = document.createElement("i");
    c.className = "cursor";
    out.appendChild(c);
  }

  if (!out) {
    /* nothing to do */
  } else if (reduced) {
    LINES.forEach(emit);          // the whole log at once, no animation
    cursor();
  } else {
    var i = 0;
    (function step() {
      if (i >= LINES.length) { cursor(); return; }
      emit(LINES[i++]);
      /* Uneven on purpose: a boot that ticks out at a metronome's pace reads
         as a progress bar rather than as a machine doing different work. */
      setTimeout(step, 180 + Math.random() * 220);
    })();
  }

  /* ---- 2. reveal on scroll ------------------------------------------ */

  var targets = document.querySelectorAll(".reveal");

  if (reduced || !("IntersectionObserver" in window)) {
    Array.prototype.forEach.call(targets, function (el) { el.classList.add("in"); });
    return;
  }

  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      entry.target.classList.add("in");
      io.unobserve(entry.target);      // once, not on every scroll past
    });
  }, { rootMargin: "0px 0px -12% 0px", threshold: 0.05 });

  Array.prototype.forEach.call(targets, function (el) { io.observe(el); });
})();