index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Repo Index</title>
    <style>
      :root {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color-scheme: dark light;
      }
      body {
        margin: 0;
        padding: 1.25rem;
        background: #050608;
        color: #f5f5f5;
      }
      .wrap {
        max-width: 960px;
        margin: 0 auto;
      }
      h1 {
        margin: 0 0 0.25rem;
        font-size: 1.5rem;
      }
      .sub {
        margin: 0 0 1rem;
        color: #9ca3af;
        font-size: 0.9rem;
      }
      .card {
        border-radius: 14px;
        border: 1px solid #1f2933;
        background: radial-gradient(circle at top left, #111827, #020617);
        padding: 1rem;
      }
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
      }
      input {
        width: 320px;
        max-width: 100%;
        padding: 0.4rem 0.6rem;
        border-radius: 999px;
        border: 1px solid #374151;
        background: #020617;
        color: inherit;
      }
      input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
      }
      .status {
        font-size: 0.85rem;
        color: #9ca3af;
        margin: 0.25rem 0 0.75rem;
      }
      .status.error {
        color: #f97373;
      }
      .tree {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.85rem;
        line-height: 1.6;
      }
      .tree ul {
        list-style: none;
        margin: 0;
        padding-left: 1.1rem;
        border-left: 1px dashed #1f2937;
      }
      .item {
        display: flex;
        gap: 0.4rem;
        align-items: center;
        padding: 0.05rem 0;
      }
      a {
        color: #e5e7eb;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .dir a {
        color: #a5b4fc;
      }
      .muted {
        opacity: 0.5;
        font-size: 0.75rem;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h1>Static scripts catalog</h1>
      <p class="sub">This UI reads <code>/directory-index.json</code> generated by GitHub Actions.</p>

      <div class="card">
        <div class="row">
          <div class="muted">Directories first, then files. A-Z.</div>
          <input id="q" type="search" placeholder="Filter (path contains)..." autocomplete="off" />
        </div>

        <div id="status" class="status">Loading...</div>
        <div id="tree" class="tree"></div>
      </div>
    </div>

    <script>
      const statusEl = document.getElementById("status");
      const treeEl = document.getElementById("tree");
      const qEl = document.getElementById("q");

      let full = null;

      async function load() {
        try {
          const res = await fetch("directory-index.json", { cache: "no-store" });
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          full = await res.json();
          statusEl.textContent = "Loaded.";
          render(full, "");
        } catch (e) {
          console.error(e);
          statusEl.textContent = "Failed to load directory-index.json. Check Actions + that the file exists at repo root.";
          statusEl.classList.add("error");
        }
      }

      function hasMatch(node, needle) {
        const p = (node.path || "").toLowerCase();
        if (p.includes(needle)) return true;
        if (!Array.isArray(node.children)) return false;
        return node.children.some((c) => hasMatch(c, needle));
      }

      function render(tree, filter) {
        treeEl.innerHTML = "";
        const needle = filter.trim().toLowerCase();

        const ul = document.createElement("ul");

        function walk(node, parentUl) {
          const isDir = node.type === "directory";
          const children = Array.isArray(node.children) ? node.children : [];

          // skip the virtual root label
          if (node.path === "/" && !node.name) {
            children.forEach((c) => walk(c, parentUl));
            return;
          }

          if (needle && !hasMatch(node, needle)) return;

          const li = document.createElement("li");
          li.className = isDir ? "dir" : "file";

          const row = document.createElement("div");
          row.className = "item";

          const icon = document.createElement("span");
          icon.textContent = isDir ? "\uD83D\uDCC1" : "\uD83D\uDCC4";

          const a = document.createElement("a");
          a.href = node.path;
          a.textContent = node.name || "/";

          const meta = document.createElement("span");
          meta.className = "muted";
          meta.textContent = ` ${node.path}`;

          row.appendChild(icon);
          row.appendChild(a);
          row.appendChild(meta);
          li.appendChild(row);

          if (children.length) {
            const childUl = document.createElement("ul");
            children.forEach((c) => walk(c, childUl));
            li.appendChild(childUl);
          }

          parentUl.appendChild(li);
        }

        walk(tree, ul);
        treeEl.appendChild(ul);
      }

      qEl.addEventListener("input", () => {
        if (!full) return;
        render(full, qEl.value);
      });

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