app.js

/* Renders the grid from `projects` (projects.js) and drives the lightbox.
   No dependencies, no build step.

   A project may carry several images. The lightbox works on a flattened list of
   slides — one per image — but the arrows stay inside the project you opened
   rather than walking on into the next one, so the "2 / 3" counter means what it
   appears to mean. Each project's slides are contiguous in the list, so the
   current project's range is derived from the slide itself: `n` is its 1-based
   position within the project and `of` is that project's slide count. */

(function () {
  "use strict";

  var grid    = document.getElementById("grid");
  var filters = document.getElementById("filters");
  var kinds   = document.getElementById("kind-filters");
  var empty   = document.getElementById("empty");

  var lb      = document.getElementById("lightbox");
  var lbImg   = document.getElementById("lb-img");
  var lbTitle = document.getElementById("lb-title");
  var lbBlurb = document.getElementById("lb-blurb");
  var lbTags  = document.getElementById("lb-tags");
  var lbLink  = document.getElementById("lb-link");
  var lbCount = document.getElementById("lb-count");
  var lbPrev  = document.getElementById("lb-prev");
  var lbNext  = document.getElementById("lb-next");

  var activeTag  = null;  // null = show everything
  var activeKind = null;  // null = show everything
  var slides     = [];    // flattened {project, src, n, of} for the current filter
  var current    = 0;     // index into `slides`

  // A project need not have an image — a write-up or a tool with nothing worth
  // screenshotting still belongs on the page. Returning [] rather than
  // [undefined] is what lets the rest of the code treat that as a real case.
  function imagesOf(p) {
    if (p.images && p.images.length) return p.images;
    return p.image ? [p.image] : [];
  }

  /* ---------------------------------------------------------------- filters */

  function allTags() {
    var seen = [];
    projects.forEach(function (p) {
      (p.tags || []).forEach(function (t) {
        if (seen.indexOf(t) === -1) seen.push(t);
      });
    });
    return seen.sort();
  }

  // Kinds are a small fixed vocabulary, so order them deliberately instead of
  // alphabetically. Anything new appears at the end without needing registering.
  var KIND_ORDER = ["platform", "dashboard", "ui", "hardware", "other"];

  function allKinds() {
    var seen = [];
    projects.forEach(function (p) {
      if (p.kind && seen.indexOf(p.kind) === -1) seen.push(p.kind);
    });
    return seen.sort(function (a, b) {
      var ia = KIND_ORDER.indexOf(a), ib = KIND_ORDER.indexOf(b);
      if (ia === -1) ia = KIND_ORDER.length;
      if (ib === -1) ib = KIND_ORDER.length;
      return ia - ib || a.localeCompare(b);
    });
  }

  function renderChips(container, values, active, onPick) {
    container.textContent = "";
    [null].concat(values).forEach(function (value) {
      var btn = document.createElement("button");
      btn.type = "button";
      btn.className = "chip";
      btn.textContent = value === null ? "All" : value;
      btn.setAttribute("aria-pressed", String(active === value));
      btn.addEventListener("click", function () {
        onPick(active === value ? null : value);
      });
      container.appendChild(btn);
    });
  }

  function renderFilters() {
    renderChips(kinds, allKinds(), activeKind, function (v) {
      activeKind = v;
      renderFilters();
      renderGrid();
    });
    renderChips(filters, allTags(), activeTag, function (v) {
      activeTag = v;
      renderFilters();
      renderGrid();
    });
  }

  /* ------------------------------------------------------------------- grid */

  function makeTag(text) {
    var el = document.createElement("span");
    el.className = "tag";
    el.textContent = text;
    return el;
  }

  // `blurb` is either a plain string, or an array of blocks that can freely mix
  // prose and lists: a string block becomes a paragraph, a nested array becomes
  // a bullet list. So one blurb can run prose, then bullets, then prose again.
  // Every piece of text goes in via textContent, so projects.js can never
  // inject markup into the page.
  function makeBlurb(blurb, cls, opts) {
    var frag   = document.createDocumentFragment();
    var blocks = Array.isArray(blurb) ? blurb : [blurb];

    // Cards show the opening block only — the grid stays scannable and the
    // lightbox carries the depth.
    if (opts && opts.firstOnly) blocks = blocks.slice(0, 1);

    blocks.forEach(function (block) {
      if (Array.isArray(block)) {
        var ul = document.createElement("ul");
        ul.className = cls + " bullets";
        block.forEach(function (line) {
          var li = document.createElement("li");
          li.textContent = line;
          ul.appendChild(li);
        });
        frag.appendChild(ul);
      } else {
        var p = document.createElement("p");
        p.className = cls;
        p.textContent = block;
        frag.appendChild(p);
      }
    });

    return frag;
  }

  function makeCard(project, slideIndex) {
    var imgs = imagesOf(project);

    var card = document.createElement("button");
    card.type = "button";
    card.className = "card";
    // Every card opens — imageless projects get a text-only lightbox rather
    // than sitting inert, since that is where the full blurb lives.
    card.addEventListener("click", function () { openLightbox(slideIndex); });

    var frame = document.createElement("div");
    frame.className = "card-frame";

    if (imgs.length) {
      var img = document.createElement("img");
      img.className = "card-img";
      img.src = project.thumb || imgs[0];
      img.alt = project.title;
      img.loading = "lazy";
      img.decoding = "async";
      frame.appendChild(img);

      if (imgs.length > 1) {
        var badge = document.createElement("span");
        badge.className = "card-badge";
        badge.textContent = imgs.length + " views";
        frame.appendChild(badge);
      }
    } else {
      // Same aspect ratio as .card-img so rows stay aligned in a mixed grid.
      frame.classList.add("card-frame--text");
      var mark = document.createElement("span");
      mark.className = "card-mark";
      mark.textContent = project.kind || "project";
      frame.appendChild(mark);
    }
    card.appendChild(frame);

    var body = document.createElement("div");
    body.className = "card-body";

    var meta = document.createElement("p");
    meta.className = "card-meta";
    meta.textContent = [project.kind, project.year, project.context]
      .filter(Boolean).join(" · ");

    if (project.status) {
      var status = document.createElement("span");
      status.className = "card-status";
      status.textContent = project.status;
      meta.appendChild(status);
    }
    body.appendChild(meta);

    var title = document.createElement("h2");
    title.className = "card-title";
    title.textContent = project.title;
    body.appendChild(title);

    body.appendChild(makeBlurb(project.blurb, "card-blurb", { firstOnly: true }));

    // Signal the truncation, so a shortened card reads as deliberate.
    if (Array.isArray(project.blurb) && project.blurb.length > 1) {
      var more = document.createElement("p");
      more.className = "card-more";
      more.textContent = "Read more →";
      body.appendChild(more);
    }

    var tags = document.createElement("div");
    tags.className = "tags";
    (project.tags || []).forEach(function (t) { tags.appendChild(makeTag(t)); });
    body.appendChild(tags);

    card.appendChild(body);
    return card;
  }

  function renderGrid() {
    var visible = projects.filter(function (p) {
      if (activeKind !== null && p.kind !== activeKind) return false;
      if (activeTag  !== null && (p.tags || []).indexOf(activeTag) === -1) return false;
      return true;
    });

    slides = [];
    grid.textContent = "";

    visible.forEach(function (p) {
      var imgs  = imagesOf(p);
      var first = slides.length;

      if (imgs.length) {
        imgs.forEach(function (src, i) {
          slides.push({ project: p, src: src, n: i + 1, of: imgs.length });
        });
      } else {
        // One slide with no image, so `slides` stays parallel to the cards and
        // the lightbox has something to open.
        slides.push({ project: p, src: null, n: 1, of: 1 });
      }

      grid.appendChild(makeCard(p, first));
    });

    empty.hidden = visible.length > 0;
  }

  /* --------------------------------------------------------------- lightbox */

  function openLightbox(index) {
    if (!slides.length || index < 0) return;
    current = index;
    fillLightbox();
    if (!lb.open) lb.showModal();
  }

  function fillLightbox() {
    var s = slides[current];
    var p = s.project;

    // Assigning a null src would make the browser request the page URL as an
    // image, so drop the attribute entirely when there is nothing to show.
    if (s.src) {
      lbImg.src = s.src;
      lbImg.alt = p.title + (s.of > 1 ? " (view " + s.n + " of " + s.of + ")" : "");
      lbImg.hidden = false;
    } else {
      lbImg.removeAttribute("src");
      lbImg.alt = "";
      lbImg.hidden = true;
    }

    lbTitle.textContent = p.title;
    lbBlurb.textContent = "";
    lbBlurb.appendChild(makeBlurb(p.blurb, "lb-text"));

    // Single-image projects get no counter and no arrows — there is nowhere to go.
    if (s.of > 1) {
      lbCount.textContent = s.n + " / " + s.of;
      lbCount.hidden = false;
    } else {
      lbCount.hidden = true;
    }
    lbPrev.hidden = lbNext.hidden = (s.of < 2);

    lbTags.textContent = "";
    (p.tags || []).forEach(function (t) { lbTags.appendChild(makeTag(t)); });

    if (p.link) {
      lbLink.href = p.link;
      lbLink.hidden = false;
    } else {
      lbLink.removeAttribute("href");
      lbLink.hidden = true;
    }
  }

  function step(delta) {
    var s = slides[current];
    if (!s || s.of < 2) return;
    var start = current - (s.n - 1);                  // first slide of this project
    current = start + ((s.n - 1 + delta + s.of) % s.of);
    fillLightbox();
  }

  document.getElementById("lb-close").addEventListener("click", function () { lb.close(); });
  lbPrev.addEventListener("click", function () { step(-1); });
  lbNext.addEventListener("click", function () { step(1); });

  // Esc is handled natively by <dialog>; wire the arrows ourselves.
  lb.addEventListener("keydown", function (e) {
    if (e.key === "ArrowLeft")  { e.preventDefault(); step(-1); }
    if (e.key === "ArrowRight") { e.preventDefault(); step(1); }
  });

  // Clicking the backdrop closes: the <dialog> is the event target only when
  // the click lands outside its content box.
  lb.addEventListener("click", function (e) {
    if (e.target === lb) lb.close();
  });

  /* ------------------------------------------------------------------- init */

  renderFilters();
  renderGrid();
})();