@agent-cms/agentcms 0.0.0-stage → 0.1.0

package/dist/theme-assets/portfolio-filters.js

@@ -0,0 +1,104 @@
+/**
+ * Portfolio theme — runtime project filters.
+ *
+ * Wires the [data-cms-portfolio-filters] chip cloud on the home page
+ * (and any other page that ships filterable cards). Source of truth
+ * is the rendered DOM:
+ *   - Every project card carries `data-cms-category="<slug>"`.
+ *   - The chip cloud already has an "All" chip with
+ *     `data-cms-filter="*"` baked in by the template.
+ *
+ * On boot we:
+ *   1. Read every unique category slug present on the page.
+ *   2. Append one button[data-cms-filter="<slug>"] per slug to the
+ *      filter host, labelled from the first card carrying that slug
+ *      via its category meta (the meta is uppercase already).
+ *   3. Wire click handlers that toggle `is-active` on the buttons
+ *      and show/hide cards (display:none) by matching
+ *      `data-cms-category`.
+ *
+ * The implementation is purposefully without animation — the design
+ * system rejects transitions on layout to keep the architectural
+ * feel. The card list reflows instantly.
+ */
+(function () {
+  "use strict";
+
+  function init() {
+    var host = document.querySelector("[data-cms-portfolio-filters]");
+    if (!host) return;
+    var cards = Array.prototype.slice.call(
+      document.querySelectorAll("[data-cms-category]"),
+    );
+    if (cards.length === 0) {
+      host.setAttribute("hidden", "");
+      return;
+    }
+
+    // Gather unique slugs + their human label (taken from the
+    // first card's `.project-card__meta` text — the "CATEGORY / 2024"
+    // string. We split on " / " and use the leading word.)
+    var slugToLabel = {};
+    cards.forEach(function (card) {
+      var slug = card.getAttribute("data-cms-category");
+      if (!slug) return;
+      if (slugToLabel[slug]) return;
+      var metaEl = card.querySelector(".project-card__meta");
+      var rawMeta = metaEl ? metaEl.textContent || "" : "";
+      var label = rawMeta.split(" / ")[0].trim();
+      slugToLabel[slug] = label || slug.toUpperCase();
+    });
+
+    var slugs = Object.keys(slugToLabel).sort();
+    if (slugs.length === 0) {
+      host.setAttribute("hidden", "");
+      return;
+    }
+
+    // Append a chip button per slug. The "All" chip (data-cms-filter="*")
+    // is already in the DOM from the template.
+    slugs.forEach(function (slug) {
+      var chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "portfolio-btn-outline";
+      chip.setAttribute("data-cms-filter", slug);
+      chip.textContent = slugToLabel[slug];
+      host.appendChild(chip);
+    });
+
+    function applyFilter(slug) {
+      var showAll = slug === "*" || !slug;
+      cards.forEach(function (card) {
+        if (showAll) {
+          card.style.display = "";
+          return;
+        }
+        var cardSlug = card.getAttribute("data-cms-category");
+        card.style.display = cardSlug === slug ? "" : "none";
+      });
+      // Update active state on the chips.
+      host.querySelectorAll("[data-cms-filter]").forEach(function (btn) {
+        var thisSlug = btn.getAttribute("data-cms-filter");
+        if (thisSlug === slug || (showAll && thisSlug === "*")) {
+          btn.classList.add("is-active");
+        } else {
+          btn.classList.remove("is-active");
+        }
+      });
+    }
+
+    host.addEventListener("click", function (event) {
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      var btn = target.closest("[data-cms-filter]");
+      if (!btn) return;
+      applyFilter(btn.getAttribute("data-cms-filter"));
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/dist/theme-assets/portfolio-menu.js

@@ -0,0 +1,240 @@
+/**
+ * Storefront theme — runtime menu loader.
+ *
+ * Same contract as default / magazine / corporate: fetches /data/menu.json
+ * and paints every `[data-cms-menu]` container on the page. The storefront
+ * header ships TWO such containers — the inline horizontal nav (visible
+ * md+) and the off-canvas burger overlay (always present, opens on
+ * burger-toggle click). The storefront bottom-nav links also pick up the
+ * `aria-current="page"` state via the same `samePath` helper.
+ *
+ * Differences vs corporate:
+ *   - Branding logo gets `h-8 w-auto` to fit the storefront header (h-16).
+ *   - Burger menu links use the editorial serif + sage active color.
+ */
+(function () {
+  "use strict";
+
+  // ─── Base path ────────────────────────────────────────────────────
+  // Sites served from a sub-folder (e.g. GitHub Pages project sites)
+  // carry <meta name="x-cms-base" content="/repo/"> in <head>; no meta
+  // means the site lives at the domain root. URLs built at runtime from
+  // JSON data go through withBase() so they land under that folder.
+  var BASE = (function () {
+    var meta = document.querySelector('meta[name="x-cms-base"]');
+    var b = (meta && meta.getAttribute("content")) || "/";
+    if (b.charAt(0) !== "/") b = "/" + b;
+    if (b.charAt(b.length - 1) !== "/") b += "/";
+    return b;
+  })();
+
+  function withBase(url) {
+    if (BASE === "/" || !url) return url;
+    // Absolute URLs (http:, mailto:, data:, …), protocol-relative and
+    // fragment-only links pass through.
+    if (/^([a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url)) return url;
+    if (url.indexOf(BASE) === 0 || url === BASE.slice(0, -1)) return url;
+    return BASE + (url.charAt(0) === "/" ? url.slice(1) : url);
+  }
+
+  function fetchMenu() {
+    return fetch(withBase("/data/menu.json"), { credentials: "omit" })
+      .then(function (res) {
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        return res.json();
+      })
+      .catch(function (err) {
+        console.warn("[cms] menu.json load failed:", err);
+        return null;
+      });
+  }
+
+  function samePath(href) {
+    try {
+      var url = new URL(href, window.location.origin);
+      var here = window.location.pathname.replace(/\/index\.html$/, "/");
+      var there = url.pathname.replace(/\/index\.html$/, "/");
+      return here === there;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  // Picks the per-language label from item.labels (set by the admin
+  // in the menu builder) based on <html lang>, with a region-stripped
+  // fallback so "en-US" matches "en". Mono-lingual sites just return
+  // item.label.
+  function pickLabel(item) {
+    var lang = (document.documentElement.getAttribute("lang") || "").trim();
+    if (lang && item.labels && typeof item.labels[lang] === "string" && item.labels[lang]) {
+      return item.labels[lang];
+    }
+    if (lang && lang.indexOf("-") > 0) {
+      var base = lang.split("-")[0];
+      if (item.labels && typeof item.labels[base] === "string" && item.labels[base]) {
+        return item.labels[base];
+      }
+    }
+    return item.label || "";
+  }
+
+  function renderBurgerItem(item) {
+    var li = document.createElement("li");
+    var a = document.createElement("a");
+    a.href = withBase(item.href) || "#";
+    a.textContent = pickLabel(item);
+    if (samePath(a.href)) a.setAttribute("aria-current", "page");
+    li.appendChild(a);
+    if (item.children && item.children.length) {
+      var sub = document.createElement("ul");
+      sub.className = "menu-children";
+      item.children.forEach(function (child) {
+        sub.appendChild(renderBurgerItem(child));
+      });
+      li.appendChild(sub);
+    }
+    return li;
+  }
+
+  function renderInlineItem(item) {
+    var a = document.createElement("a");
+    a.href = withBase(item.href) || "#";
+    a.textContent = pickLabel(item);
+    // Portfolio nav uses the `nav-link` component class declared in
+    // theme.css — the active-state pink dot lives there. No
+    // Tailwind-specific styling per link here so the theme can change
+    // typography without rebuilding the loader.
+    a.className = "nav-link";
+    var active = samePath(a.href);
+    if (active) {
+      a.setAttribute("aria-current", "page");
+      a.classList.add("is-active");
+    }
+    return a;
+  }
+
+  function paint(menu) {
+    if (!menu) return;
+    document.querySelectorAll("[data-cms-menu]").forEach(function (host) {
+      var key = host.getAttribute("data-cms-menu");
+      var items = (menu && menu[key]) || [];
+      var inline = host.hasAttribute("data-cms-menu-inline");
+
+      if (inline) {
+        host.innerHTML = "";
+        items.forEach(function (item) {
+          host.appendChild(renderInlineItem(item));
+        });
+      } else {
+        var list = host.querySelector("ul");
+        if (!list) return;
+        list.innerHTML = "";
+        items.forEach(function (item) {
+          list.appendChild(renderBurgerItem(item));
+        });
+      }
+
+      // Hide empty inline / footer hosts so they don't reserve
+      // whitespace. Skip #burger-menu: it's `position: fixed` (no
+      // layout impact) AND any `hidden` attribute would `display:
+      // none` the panel, which the `.burger-menu.is-open { transform:
+      // translate(0) }` rule can never override — the burger toggle
+      // would open an invisible panel. Visibility of the burger UI is
+      // gated by the burger TOGGLE button below instead.
+      var isBurgerMenu = host.id === "burger-menu";
+      if (items.length === 0 && !isBurgerMenu) host.setAttribute("hidden", "");
+      else host.removeAttribute("hidden");
+    });
+    // Hide the burger TOGGLE button when the header menu has no
+    // items — otherwise users see a button that opens an empty
+    // off-canvas panel and conclude "the burger is broken".
+    var headerItems = (menu && menu.header) || [];
+    document.querySelectorAll(".burger-toggle").forEach(function (toggle) {
+      if (headerItems.length === 0) toggle.setAttribute("hidden", "");
+      else toggle.removeAttribute("hidden");
+    });
+    paintBranding(menu);
+  }
+
+  // Swap the wordmark for an <img> when the theme has a logo
+  // configured. Falls back to the static text in every other case.
+  function paintBranding(menu) {
+    var branding = menu && menu.branding;
+    var logoUrl = branding && branding.logoUrl;
+    if (!logoUrl) return;
+    document.querySelectorAll("[data-cms-brand]").forEach(function (host) {
+      var alt = host.textContent || "";
+      var img = document.createElement("img");
+      img.src = withBase(logoUrl);
+      img.alt = alt;
+      img.className = "h-8 w-auto";
+      img.loading = "lazy";
+      host.innerHTML = "";
+      host.appendChild(img);
+    });
+  }
+
+  function ensureCloseButton(menu) {
+    if (menu.querySelector(".burger-close")) return menu.querySelector(".burger-close");
+    var close = document.createElement("button");
+    close.type = "button";
+    close.className = "burger-close";
+    close.setAttribute("aria-label", "Close menu");
+    close.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+    menu.insertBefore(close, menu.firstChild);
+    return close;
+  }
+
+  function ensureBackdrop() {
+    var existing = document.querySelector(".burger-backdrop");
+    if (existing) return existing;
+    var backdrop = document.createElement("div");
+    backdrop.className = "burger-backdrop";
+    backdrop.setAttribute("aria-hidden", "true");
+    document.body.appendChild(backdrop);
+    return backdrop;
+  }
+
+  function wireBurger() {
+    var toggle = document.querySelector(".burger-toggle");
+    var menu = document.getElementById("burger-menu");
+    if (!toggle || !menu) return;
+    var close = ensureCloseButton(menu);
+    var backdrop = ensureBackdrop();
+    function setOpen(open) {
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      menu.classList.toggle("is-open", open);
+      backdrop.classList.toggle("is-open", open);
+      document.body.classList.toggle("burger-open", open);
+    }
+    toggle.addEventListener("click", function () {
+      var isOpen = toggle.getAttribute("aria-expanded") === "true";
+      setOpen(!isOpen);
+    });
+    close.addEventListener("click", function () { setOpen(false); });
+    backdrop.addEventListener("click", function () { setOpen(false); });
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") setOpen(false);
+    });
+    menu.addEventListener("click", function (e) {
+      if (e.target.tagName === "A") setOpen(false);
+    });
+    document.addEventListener("pointerdown", function (e) {
+      if (toggle.getAttribute("aria-expanded") !== "true") return;
+      if (menu.contains(e.target)) return;
+      if (toggle.contains(e.target)) return;
+      setOpen(false);
+    });
+  }
+
+  function ready(fn) {
+    if (document.readyState !== "loading") fn();
+    else document.addEventListener("DOMContentLoaded", fn);
+  }
+
+  ready(function () {
+    wireBurger();
+    fetchMenu().then(paint);
+  });
+})();