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

document.addEventListener('DOMContentLoaded', function() {
  const widgets = document.querySelectorAll('.gitea-widget');
  
  widgets.forEach(widget => {
    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="gitea-widget-loading">
        <div class="loading-spinner"></div>
        <span>Loading ${repo}...</span>
      </div>
    `;
    
    // Fetch repository data
    fetch(dataFile)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Could not load data for ${repo}`);
        }
        return response.json();
      })
      .then(data => {
        renderWidget(widget, data, { showDescription, showLanguage, showLastUpdate });
      })
      .catch(error => {
        renderError(widget, repo, error.message);
      });
  });
});

function renderWidget(widget, data, options) {
  const lastUpdate = new Date(data.updated_at).toLocaleDateString();
  const language = data.language || 'Not specified';
  
  widget.innerHTML = `
    <div class="gitea-widget-container">
      <div class="gitea-widget-header">
        <div class="gitea-widget-title">
          <svg class="gitea-icon" viewBox="0 0 16 16" width="16" height="16">
            <path fill="currentColor" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>
          </svg>
          <a href="${data.html_url}" target="_blank" rel="noopener noreferrer" class="repo-link">
            ${data.full_name}
          </a>
        </div>
        <div class="gitea-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>
      ${options.showDescription && data.description ? `
        <div class="gitea-widget-description">
          ${data.description}
        </div>
      ` : ''}
      <div class="gitea-widget-footer">
        ${options.showLanguage ? `
          <span class="language-info">
            <span class="language-dot" style="background-color: ${getLanguageColor(language)}"></span>
            ${language}
          </span>
        ` : ''}
        ${options.showLastUpdate ? `
          <span class="last-update">Updated ${lastUpdate}</span>
        ` : ''}
      </div>
    </div>
  `;
}

function renderError(widget, repo, error) {
  widget.innerHTML = `
    <div class="gitea-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}</small>
    </div>
  `;
}

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',
    'Markdown': '#083fa1'
  };
  return colors[language] || '#586069';
}