VersionSwitcher.astro

---
// Detect environment and branch
const isDev = import.meta.env.DEV;
const isMainBranch = import.meta.env.BASE_URL?.includes('/main/');

// No base prefix — versions live at the domain root (/0.1/, /0.2/, /main/)
const basePrefix = '';

// Extract version from BASE_URL (e.g., "/0.1/" -> "0.1")
const versionMatch = (import.meta.env.BASE_URL || '/').match(/\/(\d+\.\d+)\//);
const currentVersion = versionMatch ? versionMatch[1] : 'unknown';
---

<div class="version-switcher" data-base-prefix={basePrefix}>
  {isDev ? (
    <!-- Development: Show dev badge -->
    <div class="version-badge">
      <span class="version-current">dev</span>
    </div>
  ) : isMainBranch ? (
    <!-- Main branch: Show main badge -->
    <div class="version-badge">
      <span class="version-current">main</span>
    </div>
  ) : (
    <!-- Production: Show interactive dropdown -->
    <>
      <button class="version-button" id="version-button" aria-label="Switch documentation version">
        <span class="version-current">v{currentVersion}</span>
        <svg class="version-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>

      <div class="version-dropdown" id="version-dropdown" hidden>
        <div class="version-dropdown-content">
          <div class="version-loading">Loading versions...</div>
        </div>
      </div>
    </>
  )}
</div>

<script>
  (() => {
    // Only run in production (when button exists)
    const button = document.getElementById('version-button');
    if (!button) return;

    const dropdown = document.getElementById('version-dropdown');
    const versionSwitcher = document.querySelector('.version-switcher');
    let isOpen = false;
    let versionsLoaded = false;

    // Toggle dropdown
    button?.addEventListener('click', async (e) => {
      e.stopPropagation();
      isOpen = !isOpen;

      if (isOpen) {
        button.setAttribute('aria-expanded', 'true');
        dropdown?.removeAttribute('hidden');

        // Load versions on first open
        if (!versionsLoaded) {
          await loadVersions();
          versionsLoaded = true;
        }
      } else {
        button.setAttribute('aria-expanded', 'false');
        dropdown?.setAttribute('hidden', '');
      }
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
      const target = e.target as Node;
      if (isOpen && !versionSwitcher?.contains(target)) {
        isOpen = false;
        button?.setAttribute('aria-expanded', 'false');
        dropdown?.setAttribute('hidden', '');
      }
    });

    // Prevent dropdown clicks from closing
    dropdown?.addEventListener('click', (e) => {
      e.stopPropagation();
    });

    async function loadVersions() {
      const content = dropdown?.querySelector('.version-dropdown-content');
      if (!content) return;

      try {
        // Get base prefix from data attribute (set at build time from workflow env vars)
        const basePrefix = versionSwitcher?.getAttribute('data-base-prefix') || '';
        const currentPath = window.location.pathname;

        // Fetch versions.json from repo root
        const fetchUrl = `${basePrefix}/versions.json`;
        console.log('[VersionSwitcher] Fetching versions from:', fetchUrl);

        const response = await fetch(fetchUrl);
        if (!response.ok) {
          console.error('[VersionSwitcher] Fetch failed:', response.status, response.statusText);
          throw new Error('Failed to fetch versions');
        }

        const data = await response.json();
        const versions = data.versions || [];

        console.log('[VersionSwitcher] Loaded versions:', versions);

        if (versions.length === 0) {
          content.innerHTML = '<div class="version-error">No versions available</div>';
          return;
        }

        // Extract current version from path (e.g., /icp-cli/0.1/ -> "0.1")
        const versionPattern = new RegExp(`${basePrefix.replace(/\//g, '\\/')}\\/(\\d+\\.\\d+)\\/`);
        const currentVersionMatch = currentPath.match(versionPattern);
        const currentVersion = currentVersionMatch ? currentVersionMatch[1] : versions.find(v => v.latest)?.version;

        console.log('[VersionSwitcher] Current version:', currentVersion, 'from path:', currentPath);

        // Render version list
        content.innerHTML = versions.map(v => {
          const isCurrent = v.version === currentVersion;
          const label = v.latest ? `${v.version} (latest)` : v.version;
          const href = `${basePrefix}/${v.version}/`;

          return `
            <a
              href="${href}"
              class="version-item ${isCurrent ? 'version-current-item' : ''}"
              ${isCurrent ? 'aria-current="page"' : ''}
            >
              <span class="version-label">${label}</span>
              ${isCurrent ? '<span class="version-check">✓</span>' : ''}
            </a>
          `;
        }).join('');
      } catch (error) {
        console.error('[VersionSwitcher] Error loading versions:', error);
        content.innerHTML = '<div class="version-error">Failed to load versions</div>';
      }
    }
  })();
</script>

<style>
  /* Static component styles (scoped) */
  .version-switcher {
    position: relative;
    display: inline-block;
  }

  .version-button,
  .version-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--sl-color-gray-6);
    color: var(--sl-color-white);
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .version-button {
    cursor: pointer;
  }

  .version-badge {
    cursor: default;
  }

  .version-button:hover {
    background: var(--sl-color-gray-5);
    border-color: var(--sl-color-gray-4);
    transform: translateY(-1px);
  }

  .version-button:active {
    transform: translateY(0);
  }

  .version-button[aria-expanded="true"] {
    background: var(--sl-color-gray-5);
  }

  .version-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .version-button[aria-expanded="true"] .version-chevron {
    transform: rotate(180deg);
  }

  .version-button:hover .version-chevron {
    transform: translateY(1px);
  }

  .version-button[aria-expanded="true"]:hover .version-chevron {
    transform: rotate(180deg) translateY(-1px);
  }

  .version-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 12rem;
    background: var(--sl-color-bg-nav);
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: dropdown-appear 0.15s ease-out;
  }

  @keyframes dropdown-appear {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .version-dropdown[hidden] {
    display: none;
  }

  .version-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem;
  }

  .version-loading,
  .version-error,
  .version-info {
    padding: 0.75rem;
    text-align: center;
    color: var(--sl-color-gray-3);
    font-size: 0.875rem;
  }

  .version-error {
    color: var(--sl-color-red);
  }

  .version-info {
    color: var(--sl-color-gray-2);
    font-style: italic;
  }

  /* Light theme overrides */
  :root[data-theme='light'] .version-button,
  :root[data-theme='light'] .version-badge {
    background: var(--sl-color-gray-5);
    border-color: var(--sl-color-gray-4);
  }

  :root[data-theme='light'] .version-button:hover {
    background: var(--sl-color-gray-6);
    border-color: var(--sl-color-gray-5);
  }

  /* Dynamically generated content styles (global) */
  /* These must be global because they're created with innerHTML */
  :global(.version-dropdown-content .version-item) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    color: var(--sl-color-white);
    text-decoration: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background: transparent;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
  }

  :global(.version-dropdown-content .version-item:hover) {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--sl-color-gray-4);
    text-decoration: none;
  }

  :global(.version-dropdown-content .version-item:active) {
    background: rgba(255, 255, 255, 0.03);
  }

  /* Current version styling - subtle with left indicator */
  :global(.version-dropdown-content .version-current-item) {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--sl-color-gray-2);
    font-weight: 500;
  }

  :global(.version-dropdown-content .version-current-item:hover) {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: var(--sl-color-gray-1);
  }

  /* Version label and check */
  :global(.version-dropdown-content .version-label) {
    flex: 1;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  :global(.version-dropdown-content .version-current-item .version-label) {
    font-weight: 500;
  }

  :global(.version-dropdown-content .version-check) {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--sl-color-gray-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Light theme for dynamic content */
  :root[data-theme='light'] :global(.version-dropdown-content .version-item) {
    color: var(--sl-color-gray-1);
  }

  :root[data-theme='light'] :global(.version-dropdown-content .version-item:hover) {
    background: var(--sl-color-gray-6);
    border-left-color: var(--sl-color-gray-3);
    color: var(--sl-color-gray-1);
  }

  :root[data-theme='light'] :global(.version-dropdown-content .version-current-item) {
    background: var(--sl-color-gray-5);
    border-left-color: var(--sl-color-gray-2);
    color: var(--sl-color-gray-1);
  }

  :root[data-theme='light'] :global(.version-dropdown-content .version-current-item:hover) {
    background: var(--sl-color-gray-4);
    border-left-color: var(--sl-color-gray-1);
    color: var(--sl-color-gray-1);
  }

  :root[data-theme='light'] :global(.version-dropdown-content .version-check) {
    color: var(--sl-color-gray-2);
  }
</style>