scuroneko.dev/js/stack.js

const getExperienceLevel = (years) => {
  if (years >= 7) return "Core";
  if (years >= 4) return "Strong";
  return "Growing";
};

const loadStackForProject = (keys) => {
  const stacks = stackList.filter((stack) => keys.includes(stack.key));
  const output = {};

  stacks.forEach((stack) => {
    output[stack.key] = stack;
  });

  return output;
};

const loadStack = async () => {
  const stackContainer = document.getElementById("stack");

  if (!stackContainer) {
    return;
  }

  stackList = await fetchJson("./data/stack.json");
  const stackCards = stackList.map(buildStackCard).filter(Boolean);
  stackContainer.replaceChildren(...stackCards);
};

const buildStackCard = (stack) => {
  if (stack?.hide === true) {
    return null;
  }

  const card = document.createElement("div");
  card.classList.add("stack-card", `tone-${stack.tone ?? "mint"}`);

  const badge = document.createElement("div");
  badge.classList.add("stack-card__badge");
  badge.textContent = stack.key;
  loadIcon(stack.key).then((svg) => (badge.innerHTML = svg));

  const body = document.createElement("div");
  body.classList.add("stack-card__body");

  const eyebrow = document.createElement("p");
  eyebrow.classList.add("stack-card__eyebrow");
  eyebrow.textContent = getExperienceLevel(stack.years);

  const name = document.createElement("h3");
  name.classList.add("stack-card__title");
  name.textContent = stack.name;

  const footer = document.createElement("div");
  footer.classList.add("stack-card__footer");

  const years = document.createElement("span");
  years.textContent = `${stack.years}+ years`;
  footer.append(years);

  if (stack.tags) {
    footer.append(
      ...stack.tags.map((tag) => {
        const badge = document.createElement("span");
        badge.textContent = tag;
        return badge;
      }),
    );
  }

  body.append(eyebrow, name, footer);
  card.append(badge, body);

  return card;
};