chore: update docs again (#77)

docs/assets/docs.css

@@ -0,0 +1,213 @@
+/*@media only screen and (min-width: 76.25em) {*/
+/*    .md-main__inner {*/
+/*        max-width: none;*/
+/*    }*/
+/*    .md-sidebar--primary {*/
+/*        left: 0;*/
+/*    }*/
+/*    .md-sidebar--secondary {*/
+/*        right: 0;*/
+/*        margin-left: 0;*/
+/*        -webkit-transform: none;*/
+/*        transform: none;*/
+/*    }*/
+/*}*/
+
+body {
+    --md-code-fg-color: white !important;
+    --md-code-bg-color: rgba(0, 0, 0, .5) !important;
+    --shadow-color: #FF9E9E;
+    --shadow-color-light: white;
+}
+
+#__mermaid_0 {
+    font-size: 16px;
+}
+
+.md-typeset code {
+    border-radius: 5px;
+}
+
+/* Reduce the space between the term and definition in a definition list
+   Reads better for flags and their documention in CLI options lists */
+.md-typeset dd {
+    margin-top: 0.125em;
+}
+
+/* We want syntax highlighting in fenced codeblocks describing shell commands
+   because it's nice to see comments dimmed and quoted strings highlighted. */ 
+.md-typeset .language-bash {
+    /* We don't need to syntax-highlight numbers in bash blocks */
+    --md-code-hl-number-color: var(--md-code-fg-color);
+    /* We don't need to syntax-highlight shell-native functions (like `cd`) in bash blocks */
+    --md-code-hl-constant-color: var(--md-code-fg-color);
+}
+
+.highlight .kc, .highlight .n {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body .md-sidebar--primary .md-sidebar__scrollwrap {
+    border-right: 1px solid #454755;
+}
+
+.md-container {
+    opacity: 1 !important;
+}
+
+@media screen and (min-width: 76.25em) {
+    .md-main::before {
+        content: "";
+
+        background-size: cover !important;
+        background-repeat: no-repeat !important;
+        background-attachment: fixed !important;
+        background-position: center !important;
+
+        position: absolute;
+        z-index: -99999;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: .06;
+
+        animation: changeBg 15s infinite ease-in-out;
+
+        -webkit-transition: background 15s linear;
+        -moz-transition: background 15s linear;
+        -o-transition: background 15s linear;
+        -ms-transition: background 15s linear;
+        transition: background 15s linear;
+
+        animation-duration: 15s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+    }
+}
+
+@keyframes changeBg {
+    0% {
+        background-image: var(--bg1);
+    }
+    25% {
+        background-image: var(--bg2);
+    }
+    50% {
+        background-image: var(--bg3);
+    }
+    75% {
+        background-image: var(--bg4);
+    }
+    100% {
+        background-image: var(--bg1);
+    }
+}
+
+.md-header {
+    background-color: rgba(14, 20, 24, 0.9) !important;
+}
+
+.md-tabs {
+    background-color: rgba(14, 20, 24, 0.6) !important;
+}
+
+@media screen and (min-width: 76.25em) {
+    .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
+        background: none;
+        box-shadow: none;
+    }
+}
+
+.md-nav__toggle.md-toggle--indeterminate~.md-nav, .md-nav__toggle:checked~.md-nav, .md-nav__toggle~.md-nav {
+    -webkit-transition-property: none;
+    -moz-transition-property: none;
+    -o-transition-property: none;
+    transition-property: none;
+}
+
+@media screen and (min-width: 60em) {
+    .md-nav--secondary .md-nav__title {
+        background: none;
+        box-shadow: none;
+    }
+}
+
+/*add a subtle breathing effect to admonitions border*/
+.admonition {
+    animation: pulsate 10s infinite;
+    border-radius: 7px;
+}
+
+@keyframes pulsate {
+    0% {
+        -webkit-box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+        -moz-box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+        box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+    }
+    50% {
+        border-color: rgba(255, 255, 255, .5);
+        -webkit-box-shadow: inset 0 0 .075rem rgba(255, 255, 255, .5);
+        -moz-box-shadow: inset 0 0 .075rem rgba(255, 255, 255, .5);
+        box-shadow: inset 0 0 .075rem rgba(255, 255, 255, .5);
+    }
+    100% {
+        -webkit-box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+        -moz-box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+        box-shadow: inset 0 0 .075rem rgb(138, 163, 255);
+    }
+}
+
+/*pop code elements a tad*/
+code {
+    border: .075rem solid rgba(0, 0, 0, .3);
+}
+
+img {
+    border-radius: 10px;
+}
+
+.neon {
+    color: white;
+    animation: neon 3s infinite;
+    margin: calc(50vh - 40px) auto 0 auto;
+    font-size: 25px;
+    text-transform: uppercase;
+    font-family: "Archivo Black", "Archivo", sans-serif;
+    font-weight: normal;
+    display: block;
+    height: auto;
+    text-align: center;
+}
+
+@keyframes neon {
+  0% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+    0 0 30px var(--shadow-color), 0 0 20px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 35px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 25px var(--shadow-color);
+  }
+  50% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
+    0 0 40px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 30px var(--shadow-color), 0 0 30px var(--shadow-color);
+  }
+  100% {
+    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
+    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
+    0 0 30px var(--shadow-color), 0 0 20px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 35px var(--shadow-color), 0 0 25px var(--shadow-color), 0 0 25px var(--shadow-color);
+  }
+}
+
+.md-nav__item--section>.md-nav__link[for] {
+    color: white;
+}
+
+/* this is the top nav item side left */
+.md-nav--lifted>.md-nav__list>.md-nav__item>[for] {
+    color: white;
+    position: absolute; /* otherwise scroll overflow does not look great */
+}
+
+.md-nav__link--active {
+    color: white !important;
+}

docs/assets/docs.js

@@ -0,0 +1,261 @@
+const backgrounds = [
+  "/assets/bg.png",
+  "/assets/bg2.png",
+  "/assets/bg3.png",
+  "/assets/bg4.png",
+];
+
+// this is to preload the images so the transition is smooth.
+// otherwise, on transition image will flicker without smooth transition.
+
+var hiddenContainer           = document.createElement('div');
+hiddenContainer.style.display = 'none';
+document.body.appendChild(hiddenContainer);
+
+let index = 1;
+for (let bg of backgrounds) {
+  let img        = [];
+  img[index]     = new Image();
+  img[index].src = bg;
+
+  hiddenContainer.appendChild(img[index]);
+  index++;
+}
+
+function shuffleBackgrounds() {
+  let images = []; // preload
+  let index  = 1;
+  for (let bg of shuffle(backgrounds)) {
+    document.body.style.setProperty("--bg" + index, "url(" + bg + ")");
+    index++;
+  }
+}
+
+function shuffle(array) {
+  let currentIndex = array.length, randomIndex;
+
+  // While there remain elements to shuffle.
+  while (currentIndex !== 0) {
+
+    // Pick a remaining element.
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex], array[currentIndex]];
+  }
+
+  return array;
+}
+
+shuffleBackgrounds();
+
+window.onload = function () {
+  onLoad();
+};
+
+let origOpen                  = XMLHttpRequest.prototype.open;
+XMLHttpRequest.prototype.open = function () {
+  let url = arguments[1]; // The second argument is the URL
+
+  this.addEventListener('loadend', function (e) {
+    if (url.includes("https://codeserver.sq.dev/api/v1/health")) {
+      return;
+    }
+
+    console.log(url);
+
+    // make sure we have a full render before calling onLoad
+    setTimeout(() => {
+      onLoad();
+    }, 100);
+  });
+  origOpen.apply(this, arguments);
+};
+
+let healthCheckTimer = null;
+
+function onLoad() {
+
+  console.log("onLoad");
+  let interactiveCodePage = false;
+  document.querySelectorAll("a").forEach((e) => {
+    if (e.innerText === "Run Code") {
+      interactiveCodePage = true;
+    }
+  });
+
+  if (interactiveCodePage) {
+    document.querySelectorAll("code").forEach((e) => {
+      e.style.maxHeight = "40vh";
+    });
+  }
+
+  if (healthCheckTimer) {
+    console.log("clearing health check timer");
+    clearInterval(healthCheckTimer);
+  }
+
+  healthCheckTimer = setInterval(() => {
+    // if the tab is not visible, don't check
+    if (document.hidden) {
+      return;
+    }
+
+    // check if https://codeserver.sq.dev/api/v1/health is up
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", "https://codeserver.sq.dev/api/v1/health", true);
+    xhr.send();
+    xhr.timeout            = 1000;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          document.querySelectorAll("a").forEach((e) => {
+            if (e.innerText === "Code Server is down") {
+              e.innerText = "Run Code";
+              e.onclick   = function () {
+              };
+            }
+          });
+        } else {
+          document.querySelectorAll("a").forEach((e) => {
+            if (e.innerText === "Run Code") {
+              e.innerText = "Code Server is down";
+              e.onclick   = function () {
+                alert("Code Server is down.\n\nRun\n\nsq dev up codeserver\n\nto start the code server in your local development environment.");
+                return false;
+              };
+            }
+          });
+        }
+      }
+    };
+  }, 1000);
+}
+
+let codeServerRequestLoading = false;
+
+// register button listener
+// this is for code running examples
+document.addEventListener("click", function (e) {
+  if (e.target.innerText !== "Run Code") {
+    return;
+  }
+
+  if (codeServerRequestLoading) {
+    alert("Please wait for the previous request to finish.");
+    return;
+  }
+
+//  console.log("e", e.target);
+//  console.log("parent", e.target.parentElement);
+//  console.log("parent pu", getPreviousUntil(e.target.parentElement, '.tabbed-block'));
+//  console.log("parent > 1", e.target.parentElement.previousElementSibling);
+//  console.log("parent > 2", e.target.parentElement.previousElementSibling.previousElementSibling);
+//  console.log("parent > tabbed-block", e.target.parentElement.previousElementSibling.previousElementSibling);
+//  console.log("parent > tabbed-block", e.target.parentElement.previousElementSibling.previousElementSibling.querySelectorAll('.tabbed-block'));
+
+  // const codeClass = e.target.parentElement.previousElementSibling.previousElementSibling.querySelectorAll('.tabbed-block');
+  const codeClass = getPreviousUntil(e.target.parentElement, '.tabbed-content')[0].querySelectorAll('.tabbed-block');
+
+//  console.log("ele", codeClass);
+
+  let language = "";
+  codeClass.forEach((e) => {
+    console.log(window.getComputedStyle(e).display);
+    // this is the visible code block
+    if (window.getComputedStyle(e).display === "block") {
+      console.log(e);
+      const codeBlock = e.querySelector('code');
+      if (codeBlock) {
+        language = codeBlock.closest('div').className.split(" ")[0].split("-")[1];
+
+        console.log("code block", codeBlock);
+        console.log(codeBlock.closest('div'));
+      }
+    }
+  });
+
+//  console.log("Language", language);
+
+  document.getElementById("loader")?.remove();
+  document.getElementById("output")?.remove();
+  document.getElementById("output-error")?.remove();
+
+  const output     = document.createElement("pre");
+  output.id        = "loader";
+  output.innerHTML = "<code style='border: .075rem solid white'>Loading...</code>";
+  e.target.parentElement.appendChild(output);
+
+  const code = e.target.parentElement.previousSibling.previousSibling.querySelector('.language-' + CSS.escape(language));
+  if (code) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", "https://codeserver.sq.dev/api/v1/code/" + language + "/run", true);
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    xhr.send(code.innerText);
+
+    codeServerRequestLoading = true;
+    xhr.onreadystatechange   = function () {
+      document.getElementById("loader")?.remove();
+
+      if (xhr.readyState === 4) {
+
+        if (xhr.status === 200) {
+
+          // code result
+          const output     = document.createElement("div");
+          output.id        = "output";
+          output.innerHTML = "<h4>" + toTitleCase(language) + " Execution</h4><pre><code style='border: .075rem solid green'>" + xhr.responseText + "</code></pre>";
+          e.target.parentElement.appendChild(output);
+          output.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
+        } else {
+          console.log("Error", xhr.statusText);
+          const output     = document.createElement("pre");
+          output.id        = "output-error";
+          output.innerHTML = "<code style='border: solid 1px red'>" + xhr.responseText + "</code>";
+          e.target.parentElement.appendChild(output);
+          output.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
+        }
+      }
+
+      codeServerRequestLoading = false;
+
+    };
+  }
+
+  // do something
+});
+
+function toTitleCase(str) {
+  return str.replace(
+    /\w\S*/g,
+    function (txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    }
+  );
+}
+
+const getPreviousUntil = function (elem, selector) {
+
+  // Setup siblings array and get previous sibling
+  const siblings = [];
+  let prev       = elem.previousElementSibling;
+
+  // Loop through all siblings
+  while (prev) {
+
+    // If the matching item is found, quit
+    if (selector && prev.matches(selector)) break;
+
+    // Otherwise, push to array
+    siblings.push(prev);
+
+    // Get the previous sibling
+    prev = prev.previousElementSibling;
+
+  }
+
+  return siblings;
+
+};