sirius/js/site-footer.js

// Injects the Sirius.X site footer into the current page. Every page in
// site-sirius-x/ ships an empty <footer id="site-footer"></footer> and a
// `<script defer src=".../js/site-footer.js">` include — this file paints
// the four-column layout, meta row, and CSS once, so nav changes stay
// single-source.
//
// Base URL detection: the nav's brand link is already set with the right
// relative path per page (./ at root, ../ in subdirs). Reuse it as the base
// for every same-site href, so root pages and subdir pages both link to the
// right destinations without the script needing to know its own depth.

(() => {
  const mount = document.getElementById("site-footer");
  if (!mount) return;

  const brand = document.querySelector(".topnav .brand");
  const base = (brand?.getAttribute("href") || "./").replace(/index\.html$/, "");

  // Same-site link builder — prefixes the current-page base so ./docs/ becomes
  // ./docs/ from root and ../docs/ from a subdir.
  const s = (path) => base + path;

  mount.className = "site-footer";
  mount.innerHTML = `
    <div class="cols">
      <div class="brand-col">
        <div class="mark"><svg width="56" height="56" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg></div>
        <h4>Sirius<span class="g">.X</span></h4>
        <p>The home for names on Bitcoin Cash. Register a TLD, register a name, verify anything against the chain.</p>
      </div>
      <div>
        <h5>Product</h5>
        <ul>
          <li><a href="${s("#search-input")}">✏️ Register a name</a></li>
          <li><a href="${s("tld.html")}">🌐 Register a TLD</a></li>
          <li><a href="${s("market/")}">🛒 Names for sale</a></li>
          <li><a href="${s("portal.html")}">🔑 My names portal</a></li>
          <li><a href="${s("theseus/")}">🧭 Theseus browser</a></li>
        </ul>
      </div>
      <div>
        <h5>Learn</h5>
        <ul>
          <li><a href="${s("docs/")}">📚 Docs</a></li>
          <li><a href="${s("#roadmap")}">🗺 Roadmap</a></li>
          <li><a href="${s("#pantheon")}">🏛 The Pantheon</a></li>
          <li><a href="${s("brand/")}">🎨 Brand kit</a></li>
        </ul>
      </div>
      <div>
        <h5>Silent Mode</h5>
        <ul>
          <li><a href="https://silentmode.st/" rel="noopener">silentmode.st <span class="ext">↗</span></a></li>
          <li><a href="https://silentmode.st/tlds/" rel="noopener">TLD registry <span class="ext">↗</span></a></li>
          <li><a href="https://silentmode.st/bns/theseus.x/" rel="noopener">theseus.x downloads <span class="ext">↗</span></a></li>
          <li><a href="https://silentmode.st/bns/hephaestus.x/" rel="noopener">hephaestus.x forge <span class="ext">↗</span></a></li>
        </ul>
      </div>
    </div>
    <div class="meta">
      <span><span class="footer-badge">Alpha</span>Chipnet only. You hold your own keys; verify everything against the chain.</span>
      <span>© 2026 · MIT-licensed content · <a href="${s("brand/")}">brand assets</a></span>
    </div>
  `;

  // Inline CSS — kept out of every page's <style> block so the footer stays
  // single-source and consistent. Uses the CSS variables every page already
  // sets on :root (so any page's palette applies automatically).
  if (!document.getElementById("site-footer-css")) {
    const css = document.createElement("style");
    css.id = "site-footer-css";
    css.textContent = `
      footer.site-footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015));
           border-top:1px solid var(--line);padding:3.2rem 1.2rem 2rem;margin-top:3rem;color:var(--mut)}
      footer.site-footer .cols{max-width:980px;margin:0 auto;display:grid;
           grid-template-columns:1.4fr repeat(3,1fr);gap:2.2rem}
      @media (max-width:760px){ footer.site-footer .cols{grid-template-columns:1fr 1fr;gap:1.6rem} }
      @media (max-width:440px){ footer.site-footer .cols{grid-template-columns:1fr} }
      footer.site-footer .brand-col .mark{font-size:26px;line-height:1;margin-bottom:.4rem}
      footer.site-footer .brand-col h4{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 .35rem;letter-spacing:.2px}
      footer.site-footer .brand-col h4 .g{color:var(--acid)}
      footer.site-footer .brand-col p{font-size:12.5px;color:var(--dim);max-width:260px;margin:0}
      footer.site-footer h5{color:var(--ink);font-size:11.5px;font-weight:600;text-transform:uppercase;
           letter-spacing:.6px;margin:0 0 .8rem}
      footer.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
      footer.site-footer ul a{color:var(--mut);text-decoration:none;font-size:13.5px;transition:color .1s}
      footer.site-footer ul a:hover{color:var(--acid)}
      footer.site-footer ul a .ext{color:var(--dim);font-size:11px;margin-left:2px}
      footer.site-footer .meta{max-width:980px;margin:2.4rem auto 0;padding-top:1.4rem;
           border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;
           font-size:12px;color:var(--dim);justify-content:space-between;align-items:center}
      footer.site-footer .meta a{color:var(--mut);text-decoration:none}
      footer.site-footer .meta a:hover{color:var(--acid)}
      footer.site-footer .footer-badge{display:inline-block;padding:2px 8px;border-radius:999px;
           background:rgba(255,199,95,.13);color:var(--warn);font-size:10.5px;font-weight:600;
           text-transform:uppercase;letter-spacing:.4px;margin-right:.5rem}
    `;
    document.head.appendChild(css);
  }
})();