initial commit

js/stack.js

@@ -0,0 +1,75 @@
+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;
+};