initial commit

js/links.js

@@ -0,0 +1,48 @@
+const loadLinks = async () => {
+  const linkContainer = document.getElementById("links");
+
+  if (!linkContainer) {
+    return;
+  }
+
+  linksList = await fetchJson("./data/links.json");
+  const linkCards = linksList.map(buildLinkCard);
+  linkContainer.replaceChildren(...linkCards);
+};
+
+const buildLinkCard = (item, index) => {
+  const card = document.createElement("a");
+  card.classList.add("link-card", `tone-${item.tone ?? "mint"}`);
+  card.href = item.url;
+  card.target = "_blank";
+  card.rel = "noreferrer";
+
+  const indexBadge = document.createElement("span");
+  indexBadge.classList.add("link-card__index");
+  indexBadge.textContent = formatIndex(index);
+
+  const badge = document.createElement("span");
+  badge.classList.add("link-card__badge");
+  badge.textContent = item.key;
+  loadIcon(item.key).then((svg) => (badge.innerHTML = svg));
+
+  const body = document.createElement("span");
+  body.classList.add("link-card__body");
+
+  const name = document.createElement("span");
+  name.classList.add("link-card__name");
+  name.textContent = item.name;
+
+  const label = document.createElement("span");
+  label.classList.add("link-card__label");
+  label.textContent = item.label;
+
+  const arrow = document.createElement("span");
+  arrow.classList.add("link-card__arrow");
+  arrow.textContent = "open";
+
+  body.append(name, label);
+  card.append(indexBadge, badge, body, arrow);
+
+  return card;
+};