freealberta/mkdocs/site/javascripts/github-widget.js

let widgetsInitialized = new Set();

function initializeGitHubWidgets() {
  const widgets = document.querySelectorAll('.github-widget');
  
  widgets.forEach(widget => {
    // Skip if already initialized
    const widgetId = widget.dataset.repo + '-' + Math.random().toString(36).substr(2, 9);
    if (widget.dataset.initialized) return;
    
    widget.dataset.initialized = 'true';
    const repo = widget.dataset.repo;
    
    // Auto-generate data file path from repo name
    const dataFile = `/assets/repo-data/${repo.replace('/', '-')}.json`;
    const showDescription = widget.dataset.showDescription !== 'false';
    const showLanguage = widget.dataset.showLanguage !== 'false';
    const showLastUpdate = widget.dataset.showLastUpdate !== 'false';
    
    // Show loading state
    widget.innerHTML = `
      <div class="github-widget-loading">
        <div class="loading-spinner"></div>
        <span>Loading ${repo}...</span>
      </div>
    `;
    
    // Fetch repository data from pre-generated JSON file
    fetch(dataFile)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Could not load data for ${repo}`);
        }
        return response.json();
      })
      .then(data => {
        const lastUpdate = new Date(data.updated_at).toLocaleDateString();
        const language = data.language || 'Not specified';
        
        widget.innerHTML = `
          <div class="github-widget-container">
            <div class="github-widget-header">
              <div class="github-widget-title">
                <svg class="github-icon" viewBox="0 0 16 16" width="16" height="16">
                  <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
                </svg>
                <a href="${data.html_url}" target="_blank" rel="noopener noreferrer" class="repo-link">
                  ${data.full_name}
                </a>
              </div>
              <div class="github-widget-stats">
                <span class="stat-item" title="Stars">
                  <svg viewBox="0 0 16 16" width="14" height="14">
                    <path fill="currentColor" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
                  </svg>
                  ${data.stars_count.toLocaleString()}
                </span>
                <span class="stat-item" title="Forks">
                  <svg viewBox="0 0 16 16" width="14" height="14">
                    <path fill="currentColor" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25V5.372a2.25 2.25 0 10-1.5 0v.878A.75.75 0 0110.25 7H5.75A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
                  </svg>
                  ${data.forks_count.toLocaleString()}
                </span>
                <span class="stat-item" title="Open Issues">
                  <svg viewBox="0 0 16 16" width="14" height="14">
                    <path fill="currentColor" d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
                    <path fill="currentColor" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/>
                  </svg>
                  ${data.open_issues_count.toLocaleString()}
                </span>
              </div>
            </div>
            ${showDescription && data.description ? `
              <div class="github-widget-description">
                ${data.description}
              </div>
            ` : ''}
            <div class="github-widget-footer">
              ${showLanguage ? `
                <span class="language-info">
                  <span class="language-dot" style="background-color: ${getLanguageColor(language)}"></span>
                  ${language}
                </span>
              ` : ''}
              ${showLastUpdate ? `
                <span class="last-update">Updated ${lastUpdate}</span>
              ` : ''}
              ${data.license ? `
                <span class="license-info">${data.license.spdx_id || data.license.name}</span>
              ` : ''}
            </div>
          </div>
        `;
      })
      .catch(error => {
        console.error('Error loading repository data:', error);
        widget.innerHTML = `
          <div class="github-widget-error">
            <svg viewBox="0 0 16 16" width="16" height="16">
              <path fill="currentColor" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"/>
            </svg>
            <span>Failed to load ${repo}</span>
            <small>${error.message}</small>
          </div>
        `;
      });
  });
}

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', initializeGitHubWidgets);

// Watch for DOM changes (MkDocs Material dynamic content)
const observer = new MutationObserver((mutations) => {
  let shouldReinitialize = false;
  
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      // Check if any github-widget elements were added
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === 1 && // Element node
            (node.classList?.contains('github-widget') || 
             node.querySelector?.('.github-widget'))) {
          shouldReinitialize = true;
        }
      });
    }
  });
  
  if (shouldReinitialize) {
    // Small delay to ensure DOM is stable
    setTimeout(initializeGitHubWidgets, 100);
  }
});

// Start observing
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// Language color mapping (simplified version)
function getLanguageColor(language) {
  const colors = {
    'JavaScript': '#f1e05a',
    'TypeScript': '#2b7489',
    'Python': '#3572A5',
    'Java': '#b07219',
    'C++': '#f34b7d',
    'C': '#555555',
    'C#': '#239120',
    'PHP': '#4F5D95',
    'Ruby': '#701516',
    'Go': '#00ADD8',
    'Rust': '#dea584',
    'Swift': '#ffac45',
    'Kotlin': '#F18E33',
    'Scala': '#c22d40',
    'Shell': '#89e051',
    'HTML': '#e34c26',
    'CSS': '#563d7c',
    'Vue': '#2c3e50',
    'React': '#61dafb',
    'Dockerfile': '#384d54'
  };
  return colors[language] || '#586069';
}