Create script.js

script.js

@@ -0,0 +1,304 @@
+(() => {
+  document.addEventListener("DOMContentLoaded", () => {
+    const bg = document.querySelector(".background");
+
+    // ---- Inject realistic clouds into .background ----
+    if (bg && !bg.querySelector(".cloud")) {
+      const isMobile = window.matchMedia("(max-width:768px)").matches;
+      if (!isMobile && !document.getElementById("cloud-fluff")) {
+        const defs = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        defs.setAttribute("width", "0");
+        defs.setAttribute("height", "0");
+        defs.setAttribute("aria-hidden", "true");
+        defs.style.position = "absolute";
+        defs.innerHTML =
+          '<filter id="cloud-fluff" x="-150%" y="-150%" width="400%" height="400%">' +
+          '<feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="4" seed="11" result="noise"/>' +
+          '<feDisplacementMap in="SourceGraphic" in2="noise" scale="120"/>' +
+          "</filter>";
+        document.body.appendChild(defs);
+      }
+      const cloudCount = isMobile ? 2 : 4;
+      for (let i = 1; i <= cloudCount; i++) {
+        const cloud = document.createElement("div");
+        cloud.className = "cloud cloud-" + i;
+        cloud.setAttribute("aria-hidden", "true");
+        bg.appendChild(cloud);
+      }
+    }
+
+    // ---- Grass strip along the bottom of the viewport ----
+    if (!document.querySelector(".grass")) {
+      const NS = "http://www.w3.org/2000/svg";
+      const W = isMobile ? 1200 : 2400;
+      const H = 70;
+      const svg = document.createElementNS(NS, "svg");
+      svg.setAttribute("class", "grass");
+      svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+      svg.setAttribute("preserveAspectRatio", "xMidYMax slice");
+      svg.setAttribute("aria-hidden", "true");
+
+      // soft ground shading under the blades
+      svg.innerHTML =
+        '<defs><linearGradient id="grass-base" x1="0" y1="1" x2="0" y2="0">' +
+        '<stop offset="0" stop-color="#3e7a46" stop-opacity="0.55"/>' +
+        '<stop offset="1" stop-color="#3e7a46" stop-opacity="0"/>' +
+        "</linearGradient></defs>" +
+        '<rect x="0" y="' + (H - 16) + '" width="' + W + '" height="16" fill="url(#grass-base)"/>';
+
+      const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
+      const layers = isMobile
+  ? [
+      { count: 50, hMin: 18, hMax: 32, colors: ["#4f9854"], opacity: 0.9 },
+      { count: 40, hMin: 24, hMax: 42, colors: ["#63ad64"], opacity: 1 },
+    ]
+  : [
+      { count: 190, hMin: 18, hMax: 36, colors: ["#3e7a46","#457f4b","#4a8a50"], opacity: 0.8 },
+      { count: 160, hMin: 26, hMax: 52, colors: ["#4f9854","#57a05a","#63ad64","#6db36e"], opacity: 1 },
+    ];
+
+      const layerEls = [];
+      layers.forEach((layer) => {
+        const g = document.createElementNS(NS, "g");
+        g.setAttribute("opacity", layer.opacity);
+        g.style.transformBox = "fill-box";
+        g.style.transformOrigin = "50% 100%";
+        layerEls.push(g);
+        for (let i = 0; i < layer.count; i++) {
+          const x = Math.random() * W;
+          const h = layer.hMin + Math.random() * (layer.hMax - layer.hMin);
+          const lean = (Math.random() - 0.5) * 16;
+          const w = 3 + Math.random() * 3;
+          const color = layer.colors[(Math.random() * layer.colors.length) | 0];
+          const blade = document.createElementNS(NS, "path");
+          blade.setAttribute(
+            "d",
+            "M " + x + " " + H +
+              " Q " + (x + lean * 0.2) + " " + (H - h * 0.6) + " " + (x + lean) + " " + (H - h) +
+              " Q " + (x + lean * 0.6 + w * 0.5) + " " + (H - h * 0.55) + " " + (x + w) + " " + H + " Z"
+          );
+          blade.setAttribute("fill", color);
+          blade.style.transformBox = "fill-box";
+          blade.style.transformOrigin = "50% 100%";
+          // stagger by x so a gust appears to travel across the lawn
+          if (!isMobile) {
+            blade.style.animation =
+              "blade-sway " + (2.6 + Math.random() * 2.4).toFixed(2) + "s ease-in-out " +
+              (-(x / W) * 3 - Math.random()).toFixed(2) + "s infinite alternate";
+          }
+          g.appendChild(blade);
+        }
+        svg.appendChild(g);
+      });
+
+      document.body.appendChild(svg);
+
+      // ---- Scroll physics: scrolling down squashes the grass toward the
+      // ground, scrolling up stretches it, and a damped spring makes it
+      // boing back upright ----
+      if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        let squash = 0; // offset from natural height (scaleY = 1 + squash)
+        let squashVel = 0;
+        let lastY = window.scrollY;
+        let raf = null;
+
+        const settle = () => {
+          squashVel -= squash * 0.06; // spring pull toward natural height
+          squashVel *= 0.88;          // damping
+          squash += squashVel;
+          const s = Math.max(-0.3, Math.min(0.14, squash));
+          layerEls.forEach((g, i) => {
+            // back layer reacts less than the front for depth
+            const depth = i === 0 ? 0.55 : 1;
+            g.style.transform = "scaleY(" + (1 + s * depth).toFixed(4) + ")";
+          });
+          if (Math.abs(squash) > 0.001 || Math.abs(squashVel) > 0.001) {
+            raf = requestAnimationFrame(settle);
+          } else {
+            layerEls.forEach((g) => (g.style.transform = ""));
+            raf = null;
+          }
+        };
+
+        const impulse = (v) => {
+          squashVel += v;
+          if (!raf) raf = requestAnimationFrame(settle);
+        };
+
+        window.addEventListener(
+          "scroll",
+          () => {
+            const y = window.scrollY;
+            // scroll down -> stretch, scroll up -> duck
+            impulse(Math.max(-0.08, Math.min(0.08, (y - lastY) * 0.0015)));
+            lastY = y;
+          },
+          { passive: true }
+        );
+
+        // wheel fallback so short pages that can't scroll still react
+        window.addEventListener(
+          "wheel",
+          (e) => {
+            if (document.documentElement.scrollHeight <= window.innerHeight + 4) {
+              impulse(Math.max(-0.05, Math.min(0.05, e.deltaY * 0.0005)));
+            }
+          },
+          { passive: true }
+        );
+      }
+    }
+
+    // ---- Copy buttons on <pre> ----
+    document.querySelectorAll("pre").forEach((pre) => {
+      if (pre.querySelector(".copy-btn")) return;
+      const code = pre.querySelector("code") || pre;
+      const btn = document.createElement("button");
+      btn.className = "copy-btn";
+      btn.textContent = "Copy";
+      btn.addEventListener("click", async () => {
+        try {
+          await navigator.clipboard.writeText(code.innerText);
+          btn.textContent = "Copied!";
+          setTimeout(() => (btn.textContent = "Copy"), 1200);
+        } catch {
+          btn.textContent = "Error";
+          setTimeout(() => (btn.textContent = "Copy"), 1200);
+        }
+      });
+      pre.appendChild(btn);
+    });
+
+    // ---- Article-only features: sidebar + collapsible code ----
+    const article = document.querySelector(".article");
+    if (!article) return;
+
+    // Collect headings for TOC
+    const headings = article.querySelectorAll("h1, h2, h3");
+    const codeBlocks = article.querySelectorAll("pre");
+
+    // Determine filenames from preceding h2
+    const codeFiles = [];
+    codeBlocks.forEach((pre, idx) => {
+      let name = null;
+      let el = pre.previousElementSibling;
+      while (el) {
+        if (el.tagName === "H2" || el.tagName === "H3") {
+          const text = el.textContent.trim();
+          if (text.match(/\.\w{1,5}$/) || text.match(/\.\w{1,5}\s/)) {
+            name = text.replace(/\s*\(.*\)/, "").trim();
+          }
+          break;
+        }
+        el = el.previousElementSibling;
+      }
+      if (!name) name = `code-block-${idx + 1}.txt`;
+      codeFiles.push({ name, pre });
+    });
+
+    // Make code blocks collapsible
+    codeBlocks.forEach((pre, idx) => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "code-collapsible";
+
+      const toggle = document.createElement("button");
+      toggle.className = "code-toggle";
+      const fileName = codeFiles[idx].name;
+      toggle.innerHTML = `<span class="code-toggle-arrow">▶</span> <span class="code-toggle-name">${fileName}</span>`;
+      toggle.setAttribute("aria-expanded", "false");
+
+      pre.parentNode.insertBefore(wrapper, pre);
+      wrapper.appendChild(toggle);
+      wrapper.appendChild(pre);
+      pre.classList.add("collapsed");
+
+      toggle.addEventListener("click", () => {
+        const expanded = pre.classList.toggle("collapsed");
+        toggle.setAttribute("aria-expanded", !expanded);
+        toggle.querySelector(".code-toggle-arrow").textContent = expanded ? "▶" : "▼";
+      });
+    });
+
+    // Build sidebar
+    const sidebar = document.createElement("nav");
+    sidebar.className = "article-sidebar";
+
+    // TOC section
+    const tocTitle = document.createElement("div");
+    tocTitle.className = "sidebar-title";
+    tocTitle.textContent = "Contents";
+    sidebar.appendChild(tocTitle);
+
+    const tocList = document.createElement("ul");
+    tocList.className = "sidebar-toc";
+
+    headings.forEach((h, i) => {
+      if (!h.id) h.id = "heading-" + i;
+      const li = document.createElement("li");
+      li.className = "toc-" + h.tagName.toLowerCase();
+      const a = document.createElement("a");
+      a.href = "#" + h.id;
+      a.textContent = h.textContent;
+      a.addEventListener("click", (e) => {
+        e.preventDefault();
+        h.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+      li.appendChild(a);
+      tocList.appendChild(li);
+    });
+    sidebar.appendChild(tocList);
+
+    // Files section
+    if (codeFiles.length > 0) {
+      const filesTitle = document.createElement("div");
+      filesTitle.className = "sidebar-title";
+      filesTitle.textContent = "Files";
+      sidebar.appendChild(filesTitle);
+
+      const fileList = document.createElement("ul");
+      fileList.className = "sidebar-files";
+
+      codeFiles.forEach(({ name, pre }) => {
+        const li = document.createElement("li");
+        const btn = document.createElement("button");
+        btn.className = "sidebar-file-btn";
+        btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> ${name}`;
+
+        btn.addEventListener("click", () => {
+          const code = pre.querySelector("code") || pre;
+          const text = code.innerText;
+          const blob = new Blob([text], { type: "text/plain" });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = name;
+          a.click();
+          URL.revokeObjectURL(url);
+        });
+
+        li.appendChild(btn);
+        fileList.appendChild(li);
+      });
+      sidebar.appendChild(fileList);
+    }
+
+    document.body.appendChild(sidebar);
+
+    // Highlight active TOC item on scroll
+    const tocLinks = tocList.querySelectorAll("a");
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            tocLinks.forEach((l) => l.classList.remove("active"));
+            const link = tocList.querySelector(`a[href="#${entry.target.id}"]`);
+            if (link) link.classList.add("active");
+          }
+        });
+      },
+      { rootMargin: "-80px 0px -70% 0px" }
+    );
+    headings.forEach((h) => observer.observe(h));
+  });
+})();