supernav.js

/* AgenTrust super-navigation, injected into all agentrust-io.com properties
 *
 * Colours come from design-system.css custom properties, which every property
 * loads, so the bar follows the editorial theme (and the MkDocs light/dark
 * scheme) without carrying a palette of its own. The literals are fallbacks
 * for any page that somehow renders without the stylesheet.
 */
(function () {
  'use strict';

  var SITES = [
    { id: 'home',       label: 'agentrust-io', url: 'https://agentrust-io.com',            ext: false },
    { id: 'verify',     label: 'Verify',       url: 'https://agentrust-io.com/verify/',    ext: false },
    { id: 'wcm',        label: 'WCM',          url: 'https://wcm.agentrust-io.com',        ext: false },
    { id: 'manifest',   label: 'Manifest',     url: 'https://manifest.agentrust-io.com',   ext: false },
    { id: 'cmcp',       label: 'cMCP',         url: 'https://cmcp.agentrust-io.com',       ext: false },
    { id: 'ca2a',       label: 'cA2A',         url: 'https://ca2a.agentrust-io.com',       ext: false },
    { id: 'trace',      label: 'TRACE',        url: 'https://trace.agentrust-io.com',      ext: false },
    { id: 'governance', label: 'Governance',   url: 'https://governance.agentrust-io.com', ext: false },
    { id: 'search',     label: 'Search',       url: 'https://agentrust-io.com/search/',    ext: false },
    { id: 'github',     label: 'GitHub',       url: 'https://github.com/agentrust-io',     ext: true  }
  ];

  var HOST = location.hostname;
  var PATH = location.pathname;
  // One link per property, in chain order. Everything else under the apex host
  // (quickstart, demos, telemetry, registry, marketplace, community, /go/)
  // highlights agentrust-io; /verify and the cA2A extension page have their own
  // links. The /wcm branch stays for the redirect stub still served at
  // agentrust-io.com/wcm/: it highlights WCM for the instant before the reader is
  // moved to wcm.agentrust-io.com. The conformance suite belongs under TRACE.
  var APEX = HOST === 'agentrust-io.com';
  var CURRENT_ID = (APEX && PATH.indexOf('/verify') === 0) ? 'verify'
    : (APEX && PATH.indexOf('/search') === 0) ? 'search'
    : (APEX && PATH.indexOf('/wcm') === 0) ? 'wcm'
    : (APEX && PATH.indexOf('/extensions/ca2a') === 0) ? 'ca2a'
    : APEX ? 'home'
    : HOST.indexOf('wcm.') === 0         ? 'wcm'
    : HOST.indexOf('manifest.') === 0    ? 'manifest'
    : HOST.indexOf('cmcp.') === 0        ? 'cmcp'
    : HOST.indexOf('ca2a.') === 0        ? 'ca2a'
    : HOST.indexOf('trace.') === 0       ? 'trace'
    : HOST.indexOf('tests.') === 0       ? 'trace'
    : HOST.indexOf('governance.') === 0  ? 'governance'
    : 'home';

  // Search opens on agentrust-io.com. From a docs site it starts filtered to that
  // site; tests. has its own filter even though the bar highlights TRACE there.
  var SEARCH_SITE = APEX ? '' : HOST.split('.')[0];
  if (['wcm', 'manifest', 'cmcp', 'ca2a', 'trace', 'tests', 'governance'].indexOf(SEARCH_SITE) < 0) {
    SEARCH_SITE = '';
  }

  var NAV_ID = 'agt-supernav';
  var STYLE_ID = 'agt-supernav-style';

  var CSS = [
    '#' + NAV_ID + '{',
    '  background:var(--at-paper,#f3f0e8);',
    '  border-bottom:1px solid var(--at-line,rgba(23,23,20,.18));',
    '  height:34px;',
    '  display:flex;',
    '  align-items:stretch;',
    '  padding:0 clamp(.5rem,2vw,1.25rem);',
    '  overflow-x:auto;',
    '  overflow-y:hidden;',
    '  white-space:nowrap;',
    '  position:relative;',
    '  z-index:10000;',
    '  font-family:var(--at-sans,Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);',
    '  font-size:11px;',
    '  scrollbar-width:none;',
    '}',
    '#' + NAV_ID + '::-webkit-scrollbar{display:none}',
    '#' + NAV_ID + ' a{',
    '  display:inline-flex;',
    '  align-items:center;',
    '  padding:0 10px;',
    '  color:var(--at-muted,#66645d);',
    '  text-decoration:none;',
    '  font-weight:650;',
    '  letter-spacing:.07em;',
    '  text-transform:uppercase;',
    '  border-bottom:2px solid transparent;',
    '  transition:color .12s,border-color .12s;',
    '  flex-shrink:0;',
    '}',
    '#' + NAV_ID + ' a:hover{color:var(--at-ink,#171714)}',
    '#' + NAV_ID + ' a.active{',
    '  color:var(--at-ink,#171714);',
    '  font-weight:750;',
    '  border-bottom-color:var(--at-red,#b91c1c);',
    '}',
    '#' + NAV_ID + ' .sep{',
    '  width:1px;',
    '  margin:9px 8px;',
    '  background:var(--at-line,rgba(23,23,20,.18));',
    '  flex-shrink:0;',
    '}',
    '#' + NAV_ID + ' .ext-icon{',
    '  margin-left:4px;opacity:.5;font-size:9px;line-height:1;',
    '}',
    '@media (prefers-reduced-motion:reduce){',
    '  #' + NAV_ID + ' a{transition:none}',
    '}'
  ].join('\n');

  function buildNav() {
    var div = document.createElement('div');
    div.id = NAV_ID;

    var html = '';
    SITES.forEach(function (s, i) {
      // A rule sets the external links apart from the AgenTrust properties.
      if (s.ext && i > 0 && !SITES[i - 1].ext) {
        html += '<span class="sep"></span>';
      }
      var active = s.id === CURRENT_ID ? ' class="active"' : '';
      var url = s.id === 'search' && SEARCH_SITE ? s.url + '?site=' + SEARCH_SITE : s.url;
      var target = s.ext ? ' target="_blank" rel="noopener noreferrer"' : '';
      var extIcon = s.ext ? '<span class="ext-icon">&#8599;</span>' : '';
      html += '<a href="' + url + '"' + active + target + '>'
            + s.label
            + extIcon
            + '</a>';
    });

    div.innerHTML = html;
    return div;
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = CSS;
    document.head.appendChild(style);
  }

  function injectNav() {
    if (document.getElementById(NAV_ID)) return;
    injectStyles();
    var nav = buildNav();
    // Insert at very top of body, before everything
    document.body.insertBefore(nav, document.body.firstChild);
  }

  // "/" opens search on agentrust-io.com pages. The MkDocs sites already bind "/"
  // and "s" to their own search box, so the shortcut is not added there.
  if (APEX) {
    document.addEventListener('keydown', function (event) {
      var el = event.target;
      if (event.key !== '/' || event.ctrlKey || event.metaKey || event.altKey) return;
      if (el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName))) return;
      var box = document.getElementById('search-q');
      event.preventDefault();
      if (box) box.focus();
      else location.href = '/search/';
    });
  }

  // Initial injection
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectNav);
  } else {
    injectNav();
  }

  // Material for MkDocs instant navigation: document$ fires on every page swap
  // Guard: only subscribe if the observable exists (it's set synchronously in Material's bundle)
  function subscribeMaterial() {
    if (typeof window.document$ !== 'undefined' && typeof window.document$.subscribe === 'function') {
      window.document$.subscribe(function () {
        // After a content swap the nav div is still in DOM (header/body persists),
        // but guard in case Material ever removes it.
        if (!document.getElementById(NAV_ID)) {
          injectNav();
        }
      });
    }
  }

  // document$ may not be defined yet when this script runs; defer to after DOMContentLoaded
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', subscribeMaterial);
  } else {
    subscribeMaterial();
  }

})();