github-activity.html

---
title: "OpenElections GitHub Activity"
layout: default
description: "Recent commits and activity across OpenElections repositories"
footer_script_include: "github-activity-scripts.html"
hide_default_heading: true
---

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <!-- Page Header -->
      <div class="activity-header mb-5">
        <div class="row align-items-center">
          <div class="col-md-8">
            <h1 class="display-5 mb-2">
              <i class="fab fa-github me-3"></i>
              OpenElections Activity
            </h1>
            <p class="lead text-muted">
              Recent commits, updates, and development activity across all OpenElections repositories.
            </p>
          </div>
          <div class="col-md-4 text-end">
            <a href="https://github.com/openelections" class="btn btn-primary" target="_blank" rel="noopener">
              <i class="fab fa-github me-2"></i>View on GitHub
            </a>
          </div>
        </div>
      </div>

      <!-- Activity Stats -->
      <div class="row mb-5">
        <div class="col-md-3">
          <div class="card text-center">
            <div class="card-body">
              <h5 class="card-title text-primary" id="total-repos">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </h5>
              <p class="card-text small text-muted">Total Repositories</p>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-center">
            <div class="card-body">
              <h5 class="card-title text-info" id="recent-commits">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </h5>
              <p class="card-text small text-muted">Recent Commits</p>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-center">
            <div class="card-body">
              <h5 class="card-title text-success" id="active-repos">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </h5>
              <p class="card-text small text-muted">Active Repositories</p>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card text-center">
            <div class="card-body">
              <h5 class="card-title text-warning" id="contributors">
                <div class="spinner-border spinner-border-sm" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </h5>
              <p class="card-text small text-muted">Contributors</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Filter and Search -->
      <div class="row mb-4">
        <div class="col-md-6">
          <div class="input-group">
            <span class="input-group-text">
              <i class="fas fa-search"></i>
            </span>
            <input type="text" class="form-control" id="activity-search" placeholder="Search commits, repositories, or authors...">
          </div>
        </div>
        <div class="col-md-3">
          <select class="form-select" id="repository-filter">
            <option value="">All Repositories</option>
            <option value="data">Data Repositories</option>
            <option value="code">Code Repositories</option>
            <option value="docs">Documentation</option>
          </select>
        </div>
        <div class="col-md-3">
          <select class="form-select" id="time-filter">
            <option value="24h">Last 24 Hours</option>
            <option value="7d" selected>Last 7 Days</option>
            <option value="30d">Last 30 Days</option>
            <option value="all">All Time</option>
          </select>
        </div>
      </div>

      <!-- Activity Feed -->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="mb-0">
                <i class="fas fa-code-branch me-2"></i>Recent Activity
              </h5>
              <button class="btn btn-outline-secondary btn-sm" id="refresh-activity">
                <i class="fas fa-sync-alt me-1"></i>Refresh
              </button>
            </div>
            <div class="card-body p-0">
              <!-- Loading State -->
              <div id="activity-loading" class="text-center p-5">
                <div class="spinner-border text-primary mb-3" role="status">
                  <span class="visually-hidden">Loading activity...</span>
                </div>
                <p class="text-muted">Fetching recent GitHub activity...</p>
              </div>

              <!-- Error State -->
              <div id="activity-error" class="text-center p-5 d-none">
                <div class="alert alert-warning mb-3">
                  <i class="fas fa-exclamation-triangle me-2"></i>
                  <strong>Unable to load GitHub activity</strong>
                  <p class="mb-0 mt-2">Please check your internet connection and try again.</p>
                </div>
                <button class="btn btn-primary" onclick="retryLoadActivity()">
                  <i class="fas fa-retry me-1"></i>Try Again
                </button>
              </div>

              <!-- Activity List -->
              <div id="activity-list" class="d-none">
                <!-- Activity items will be dynamically inserted here -->
              </div>

              <!-- Load More -->
              <div id="load-more-container" class="text-center p-3 d-none">
                <button class="btn btn-outline-primary" id="load-more-btn">
                  <i class="fas fa-chevron-down me-1"></i>Load More Activity
                </button>
              </div>

              <!-- No Activity -->
              <div id="no-activity" class="text-center p-5 d-none">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No Recent Activity</h5>
                <p class="text-muted">No commits found for the selected filters.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Repository Overview -->
      <div class="row mt-5">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">
                <i class="fas fa-folder me-2"></i>Repository Overview
              </h5>
            </div>
            <div class="card-body">
              <div id="repository-overview">
                <!-- Repository grid will be loaded here -->
                <div class="text-center p-4">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading repositories...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Configuration Script -->


<!-- Include GitHub Activity JavaScript -->
<script src="{{ '/js/github-activity.js' | relative_url }}"></script>

<!-- Initialize Activity Page -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  if (typeof GitHubActivityPage !== 'undefined') {
    window.activityPage = new GitHubActivityPage();
    window.activityPage.initialize();
  } else {
    console.error('GitHub Activity JavaScript not loaded');
    document.getElementById('activity-error').classList.remove('d-none');
    document.getElementById('activity-loading').classList.add('d-none');
  }
});

// Global retry function
function retryLoadActivity() {
  if (window.activityPage) {
    window.activityPage.retry();
  }
}
</script>