test-github-integration.html

<!DOCTYPE html>
<html>
<head>
  <title>GitHub Integration Test</title>
  <style>
    body {
      font-family: monospace;
      padding: 20px;
      background: #1e1e1e;
      color: #fff;
    }
    .repo {
      margin: 10px 0;
      padding: 10px;
      background: #2d2d2d;
      border-radius: 5px;
    }
    .loading { color: #888; }
    .error { color: #f44; }
    .success { color: #4f4; }
  </style>
</head>
<body>
  <h1>GitHub Integration Test - ItsOrv</h1>
  <div id="status" class="loading">Loading...</div>
  <div id="results"></div>

  <script type="module">
    const username = 'ItsOrv';
    const statusEl = document.getElementById('status');
    const resultsEl = document.getElementById('results');

    async function testGitHubAPI() {
      try {
        statusEl.textContent = 'Fetching repositories...';
        statusEl.className = 'loading';

        const response = await fetch(
          `https://api.github.com/users/${username}/repos?per_page=10&sort=updated&type=all`,
          {
            headers: {
              'Accept': 'application/vnd.github.v3+json',
            },
          }
        );

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const repos = await response.json();
        const publicRepos = repos.filter(repo => 
          !repo.private && 
          !repo.archived && 
          !repo.disabled
        );

        statusEl.textContent = `✅ Success! Found ${publicRepos.length} public repositories`;
        statusEl.className = 'success';

        resultsEl.innerHTML = publicRepos.map(repo => `
          <div class="repo">
            <h3>${repo.name}</h3>
            <p>${repo.description || 'No description'}</p>
            <p>Language: ${repo.language || 'N/A'} | Stars: ${repo.stargazers_count} | Forks: ${repo.forks_count}</p>
            <p><a href="${repo.html_url}" target="_blank">${repo.html_url}</a></p>
            <p>Topics: ${repo.topics?.join(', ') || 'None'}</p>
          </div>
        `).join('');

      } catch (error) {
        statusEl.textContent = `❌ Error: ${error.message}`;
        statusEl.className = 'error';
        resultsEl.innerHTML = `<pre>${error.stack}</pre>`;
      }
    }

    testGitHubAPI();
  </script>
</body>
</html>