agent-bounties/site/guild-shell.js at main · ghzhost/agent-bounties · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
(() => {
  "use strict";

  const body = document.body;
  if (!body || body.classList.contains("guild-home")) return;

  const route = (window.location.pathname.split("/").pop() || "index.html").toLowerCase();
  body.classList.add("guild-interior");
  body.dataset.guildRoute = route.replace(/\.html$/, "") || "home";

  const crestMarkup = `
    <span class="guild-shell-crest" aria-hidden="true">
      <svg viewBox="0 0 42 46" focusable="false">
        <path d="M21 2.5 37.5 12v22L21 43.5 4.5 34V12L21 2.5Z" fill="none" stroke="currentColor" stroke-width="2.8"/>
        <path d="M13.5 28.5 21 11l7.5 17.5h-5.2L21 23l-2.3 5.5h-5.2Z" fill="currentColor"/>
        <circle cx="21" cy="33.5" r="2.1" fill="#07120d"/>
      </svg>
    </span>
    <span class="guild-shell-brand-copy"><strong>Agent Bounties</strong><small>.app</small></span>`;

  const navItems = [
    ["earn.html", "Bounty Board"],
    ["how-it-works.html", "How It Works"],
    ["metrics.html", "Metrics"],
  ];

  let topbar = document.querySelector(".topbar");
  if (!topbar) {
    topbar = document.createElement("header");
    topbar.className = "topbar guild-shell-created";
    document.body.insertBefore(topbar, document.body.firstChild);
  }

  let brand = topbar.querySelector(".brand");
  if (!brand) {
    brand = document.createElement("a");
    brand.className = "brand";
    brand.href = "index.html";
    topbar.prepend(brand);
  }
  brand.setAttribute("aria-label", "Agent Bounties home");
  brand.innerHTML = crestMarkup;

  let nav = topbar.querySelector("nav");
  if (!nav) {
    nav = document.createElement("nav");
    topbar.appendChild(nav);
  }
  nav.setAttribute("aria-label", "Primary navigation");
  nav.replaceChildren();

  navItems.forEach(([href, label]) => {
    const link = document.createElement("a");
    link.href = href;
    link.textContent = label;
    if (href.toLowerCase() === route) link.setAttribute("aria-current", "page");
    nav.appendChild(link);
  });

  topbar.querySelector(".guild-shell-network")?.remove();

  let modeSwitch = topbar.querySelector(".guild-mode-switch");
  if (!modeSwitch) {
    modeSwitch = document.createElement("div");
    modeSwitch.className = "guild-mode-switch";
    modeSwitch.setAttribute("role", "group");
    modeSwitch.setAttribute("aria-label", "Website mode");
    modeSwitch.innerHTML = '<a href="index.html" aria-current="page">Human</a><a href="agent/">Agent</a>';
    topbar.appendChild(modeSwitch);
  }

  const footer = document.querySelector("footer") || document.createElement("footer");
  if (!footer.isConnected) {
    footer.innerHTML = `
      <span>We say “paid” only after confirmed settlement.</span>
      <a href="how-it-works.html">How it works</a>
      <a href="terms.html">Terms</a>
      <a href="privacy.html">Privacy</a>
      <a href="https://github.com/NSPG13/agent-bounties/issues">Support</a>`;
    document.body.appendChild(footer);
  }
  footer.classList.add("guild-shell-footer");

  const main = document.querySelector("main");
  if (main) main.classList.add("guild-interior-main");

  const syncScrolledState = () => {
    topbar.classList.toggle("is-scrolled", window.scrollY > 12);
  };
  syncScrolledState();
  window.addEventListener("scroll", syncScrolledState, { passive: true });
})();