app.js

/* Dominant — Skills Navigator. Renders NAV_DATA, filters, copy-clone. */
(function () {
  "use strict";
  var D = window.NAV_DATA;
  var GH = "https://github.com/" + D.owner;

  document.getElementById("brand").textContent = D.brand;
  document.getElementById("intro").textContent = D.intro;
  document.getElementById("motto").textContent = D.motto || D.tagline;
  document.getElementById("footMotto").textContent = D.tagline;
  document.getElementById("yr").textContent = new Date().getFullYear();
  document.getElementById("ghLink").href = GH;
  var fg = document.getElementById("footGh");
  fg.href = GH;
  fg.textContent = "github.com/" + D.owner;

  var allProjects = [];
  D.categories.forEach(function (c) {
    c.projects.forEach(function (p) { allProjects.push(p); });
  });

  function cloneCmd(repo) { return "git clone " + GH + "/" + repo + ".git"; }

  function toast(msg) {
    var t = document.getElementById("toast");
    t.textContent = msg;
    t.classList.add("show");
    clearTimeout(t._t);
    t._t = setTimeout(function () { t.classList.remove("show"); }, 1900);
  }

  function copy(text, label) {
    navigator.clipboard.writeText(text).then(
      function () { toast(label || "copied to clipboard"); },
      function () { toast("copy failed"); }
    );
  }

  /* category nav */
  var nav = document.getElementById("catnav");
  D.categories.forEach(function (c) {
    var a = document.createElement("a");
    a.href = "#cat-" + c.id;
    a.dataset.cat = c.id;
    a.textContent = c.icon + "  " + c.title;
    nav.appendChild(a);
  });

  /* render */
  var main = document.getElementById("main");
  function render(query) {
    main.innerHTML = "";
    var q = (query || "").trim().toLowerCase();
    var shown = 0;

    D.categories.forEach(function (c) {
      var matches = c.projects.filter(function (p) {
        if (!q) return true;
        var hay = (p.name + " " + p.uk + " " + p.tag + " " + p.desc + " " +
          p.stack.join(" ") + " " + c.title).toLowerCase();
        return hay.indexOf(q) !== -1;
      });
      if (!matches.length) return;

      var sec = document.createElement("section");
      sec.className = "cat";
      sec.id = "cat-" + c.id;
      sec.innerHTML =
        '<div class="cat-head"><span class="cat-ic">' + c.icon + "</span>" +
        '<h2 class="cat-title">' + esc(c.title) + "</h2></div>" +
        '<div class="cat-blurb">' + esc(c.blurb) + "</div>";

      var grid = document.createElement("div");
      grid.className = "grid";
      matches.forEach(function (p) {
        shown++;
        grid.appendChild(card(p));
      });
      sec.appendChild(grid);
      main.appendChild(sec);
    });

    if (!shown) {
      main.innerHTML = '<p style="color:var(--fg-faint);font-family:var(--mono);' +
        'padding:40px 0">no projects match "' + esc(q) + '"</p>';
    }
    document.getElementById("count").textContent =
      shown + " / " + allProjects.length + " projects";
    syncNav();
  }

  function card(p) {
    var el = document.createElement("article");
    el.className = "card";
    var hasRepo = !!p.repo;
    var repoUrl = hasRepo ? GH + "/" + p.repo : "";
    el.innerHTML =
      '<div class="c-top"><div><span class="c-name">' + esc(p.name) + "</span>" +
      '<span class="c-uk">' + esc(p.uk) + "</span></div>" +
      '<span class="badge ' + esc(p.status) + '" data-s="' + esc(p.status) + '">' +
      esc(p.status) + "</span></div>" +
      '<div class="c-tag">// ' + esc(p.tag) + "</div>" +
      '<div class="c-desc">' + esc(p.desc) + "</div>" +
      '<div class="c-stack">' +
      p.stack.map(function (s) { return '<span class="chip">' + esc(s) + "</span>"; }).join("") +
      "</div><div class=\"c-actions\">" +
      (hasRepo
        ? '<a href="' + repoUrl + '" target="_blank" rel="noopener">▸ repo</a>'
        : '<span class="disabled">▸ repo</span>') +
      (p.live
        ? '<a href="' + esc(p.live) + '" target="_blank" rel="noopener">↗ live</a>'
        : "") +
      (hasRepo
        ? '<button class="clone" title="copy clone command"><code>' +
          esc(cloneCmd(p.repo)) + "</code></button>"
        : "") +
      "</div>";
    var cb = el.querySelector(".clone");
    if (cb) cb.addEventListener("click", function () {
      copy(cloneCmd(p.repo), "clone command copied");
    });
    return el;
  }

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (m) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[m];
    });
  }

  /* search */
  var searchEl = document.getElementById("search");
  searchEl.addEventListener("input", function () { render(searchEl.value); });

  /* clone-all */
  document.getElementById("copyAll").addEventListener("click", function () {
    var cmds = allProjects.filter(function (p) { return p.repo; })
      .map(function (p) { return cloneCmd(p.repo); }).join("\n");
    copy(cmds, "all clone commands copied");
  });

  /* active category on scroll */
  function syncNav() {
    var links = nav.querySelectorAll("a");
    var secs = [].slice.call(document.querySelectorAll(".cat"));
    function upd() {
      var y = window.scrollY + 90;
      var cur = secs[0];
      secs.forEach(function (s) { if (s.offsetTop <= y) cur = s; });
      links.forEach(function (l) {
        l.classList.toggle("active", cur && l.dataset.cat === cur.id.replace("cat-", ""));
      });
    }
    window.removeEventListener("scroll", window._navUpd);
    window._navUpd = upd;
    window.addEventListener("scroll", upd, { passive: true });
    upd();
  }

  render("");
})();