Site/site/blog.vto

---
layout: text.vto
title: B L O G
---

<!-- God, this page sucks. CSS was a mistake.-->

<h1 class="flex" style="overflow-wrap:anywhere">
Blog Articles

<span class="whitespace-nowrap overflow-hidden text-sm font-[ecrou]">
  <a id="matrix" href="/blog.rss">rss</a>
  <a id="matrix" href="/blog.json">json</a>
</span>
</h1>

<p>Here is where I dump all my schizophenic and sometimes coherent ramblings. Take a look!</p>

<style>ul * { overflow-wrap:anywhere !important; }</style>
<ul>
  {{ for entry of search.pages("url^=/blog/ url!=/blog/ unlisted!=true", "order=asc date=desc")}}
  <li class="flex">
    <a id="matrix" class="text-right font-mono" style="margin-right:calc(var(--spacing)*2)" href="{{ entry.url }}">
      {{ entry.date.toISOString().slice(2, 10).replaceAll("-", " ") }}
    </a>

    {{ entry.title |> md }}
  </li>
  {{ /for }}
</ul>

<script>
  {
    let typed = "";
    const target = "mat";

    document.addEventListener("keydown", (event) => {
      typed += event.key.toLowerCase();

      if (typed.length > target.length) typed = typed.slice(-target.length);

      if (typed === target) {
        toggle();
        typed = "";
      }
    });

    let data = null;

    const toggle = () => {
      if (data) {
        Object.values(data).forEach(({ interval, element, original }) => {
          clearInterval(interval);

          element.innerHTML = original;

          element.style.color = "";
          element.style.textShadow = "";
          element.style.filter = "";
        });

        data = null;
        return;
      }

      data = {};

      document.querySelectorAll("#matrix").forEach((element, index) => {
        const original = element.textContent;

        const randomize = () => {
          const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;

          const color     = dark ? "#00ff00" : "#00cc00";
          const glowColor = dark ? "#00ff00" : "#00ff00";

          element.style.color = color;
          element.style.filter = `drop-shadow(0 0 5px ${glowColor})`;

          element.innerHTML = original.replace(/\d/g, () => `<span${Math.random() > 0.5 ? "" : ` style="text-shadow: 0 0 2px ${glowColor}"`}>${Math.floor(Math.random() * 10)}</span>`);
        };

        randomize();
        const interval = setInterval(randomize, 100);

        data[index] = { interval, element, original };
      });
    };
  }
</script>

<script>
{
    let typed = "";
    const target = "rix";

    document.addEventListener("keydown", (event) => {
      typed += event.key.toLowerCase();

      if (typed.length > target.length) typed = typed.slice(-target.length);

      if (typed === target) {
        toggle();
        typed = "";
      }
    });

    const randomStrip = () => ({
      xFactor: Math.random() * 0.90 + (1 - 0.90) / 2,
      y:       Math.random() * -window.innerHeight - 100,
      deltaY:  Math.random() * 1.7 + 1,
      size:    Math.floor(Math.random() * 16) + 8,
    });

    const strips = Array.from({ length: 60 }, () => randomStrip());

    let data = null;

    const toggle = () => {
      if (data) {
        cancelAnimationFrame(data.animationFrameId);
        data.canvas.remove();

        window.removeEventListener("resize", data.handleResize);

        data = null;
        return;
      }

      data = {};

      data.canvas = document.body.appendChild(document.createElement("canvas"));
      const { canvas } = data;
      canvas.style.position      = "fixed";
      canvas.style.top           = "0";
      canvas.style.left          = "0";
      canvas.style.width         = "100%";
      canvas.style.height        = "100%";
      canvas.style.zIndex        = "999999999";
      canvas.style.pointerEvents = "none";

      data.context = canvas.getContext("2d");
      const { context } = data;
      context.globalCompositeOperation = "lighter";

      const handleResize = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      };

      handleResize();
      window.addEventListener("resize", handleResize);
      data.handleResize = handleResize;

      const animate = () => {
        const { canvas, context } = data;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 8;
        context.shadowColor = "#94f475";
        context.textBaseline = "top";
        context.textAlign = "center";

        for (const strip of strips) {
          context.font = `${strip.size}px sans`;

          if (strip.y > canvas.height + (strip.size * 40)) {
            Object.assign(strip, randomStrip());
          }

          let { y: yCopy } = strip;
          for (let i = 0; i < 20; i += 1) {
            switch (true) {
              case i < 1:  context.fillStyle = "#cefbe4"; break;
              case i < 2:  context.fillStyle = "#81ec72"; break;
              case i < 4:  context.fillStyle = "#5cd646"; break;
              case i < 8:  context.fillStyle = "#54d13c"; break;
              case i < 14: context.fillStyle = "#4ccc32"; break;
              case i < 18: context.fillStyle = "#43c728"; break;
            }

            const characters = ["诶", "比", "西", "迪", "伊", "吉", "艾", "杰", "开", "哦", "屁", "提", "维"];
            const character = characters[Math.floor(Math.random() * characters.length)];

            context.fillText(character, strip.xFactor * canvas.width, yCopy);

            // Deterministic but still random.
            yCopy -= strips[i].size;
          }

          strip.y += strip.deltaY;
        }

        data.animationFrameId = requestAnimationFrame(animate);
      };

      animate();
    };
  }
</script>