YetAnotherLinktree/script.js at main · BITVEL22/YetAnotherLinktree · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
(() => {
  const config = window.SITE_CONFIG || {};
  const $ = (selector) => document.querySelector(selector);

  const setText = (selector, value) => {
    const el = $(selector);
    if (el && value != null) el.textContent = value;
  };

  setText("#profileName", config.name || "Your Name");
  setText("#profileBio", config.bio || "");
  setText("#footerText", config.footer || "YetAnotherLinktree");

  document.title = config.name ? `${config.name} — YetAnotherLinktree` : "YetAnotherLinktree";

  if (config.primary) {
    document.documentElement.style.setProperty("--md-primary", config.primary);
    // A light Material-You-inspired container tint.
    document.documentElement.style.setProperty("--md-primary-container", `${config.primary}22`);
    document.documentElement.style.setProperty("--md-on-primary-container", config.primary);
  }

  const avatar = $("#avatar");
  if (config.avatar) {
    avatar.innerHTML = `<img src="${config.avatar}" alt="${config.name || "Profile"}">`;
  } else {
    avatar.textContent = (config.name || "Y").trim().charAt(0).toUpperCase();
  }

  const links = $("#links");
  (config.links || []).forEach((item) => {
    if (!item?.url || !item?.title) return;

    const a = document.createElement("a");
    a.className = "link-card";
    a.href = item.url;
    a.target = "_blank";
    a.rel = "noopener noreferrer";
    a.setAttribute("aria-label", item.title);

    const icon = document.createElement("span");
    icon.className = "link-icon";

    if (item.iconImage) {
      const img = document.createElement("img");
      img.src = item.iconImage;
      img.alt = "";
      icon.appendChild(img);
    } else {
      icon.textContent = item.icon || item.title.slice(0, 2).toUpperCase();
    }

    const copy = document.createElement("span");
    copy.className = "link-copy";

    const title = document.createElement("span");
    title.className = "link-title";
    title.textContent = item.title;

    copy.appendChild(title);

    if (item.description) {
      const description = document.createElement("span");
      description.className = "link-description";
      description.textContent = item.description;
      copy.appendChild(description);
    }

    const arrow = document.createElement("span");
    arrow.className = "link-arrow";
    arrow.setAttribute("aria-hidden", "true");
    arrow.textContent = "›";

    a.append(icon, copy, arrow);
    links.appendChild(a);
  });
})();