| document.addEventListener('DOMContentLoaded', () => { |
| const repoForm = document.getElementById('repoForm'); |
| const loading = document.getElementById('loading'); |
| const results = document.getElementById('results'); |
|
|
| repoForm.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const username = document.getElementById('username').value.trim(); |
| const repo = document.getElementById('repo').value.trim(); |
| |
| if (!username || !repo) { |
| alert('Please enter both GitHub username and repository name'); |
| return; |
| } |
|
|
| |
| loading.classList.remove('hidden'); |
| results.classList.add('hidden'); |
| |
| try { |
| const response = await fetch(`https://api.github.com/repos/${username}/${repo}`); |
| if (!response.ok) { |
| throw new Error('Repository not found or API rate limit exceeded'); |
| } |
| |
| const data = await response.json(); |
| displayResults(data, username, repo); |
| |
| |
| const readmeResponse = await fetch(`https://api.github.com/repos/${username}/${repo}/readme`, { |
| headers: { |
| 'Accept': 'application/vnd.github.v3.raw' |
| } |
| }); |
| |
| if (readmeResponse.ok) { |
| const readmeContent = await readmeResponse.text(); |
| displayReadme(readmeContent); |
| } |
| |
| } catch (error) { |
| results.innerHTML = ` |
| <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i data-feather="alert-circle" class="text-red-500"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-red-800">Error fetching repository</h3> |
| <div class="mt-2 text-sm text-red-700"> |
| <p>${error.message}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| feather.replace(); |
| } finally { |
| loading.classList.add('hidden'); |
| results.classList.remove('hidden'); |
| } |
| }); |
|
|
| function displayResults(data, username, repo) { |
| results.innerHTML = ` |
| <div class="mb-8"> |
| <div class="flex items-start"> |
| <img src="${data.owner.avatar_url}" alt="Avatar" class="w-16 h-16 rounded-full mr-4"> |
| <div> |
| <h2 class="text-2xl font-bold text-gray-800">${data.name}</h2> |
| <p class="text-gray-600 mb-2">${data.description || 'No description'}</p> |
| <div class="flex flex-wrap gap-4 text-sm"> |
| <span class="flex items-center text-gray-600"> |
| <i data-feather="star" class="w-4 h-4 mr-1"></i> ${data.stargazers_count} |
| </span> |
| <span class="flex items-center text-gray-600"> |
| <i data-feather="eye" class="w-4 h-4 mr-1"></i> ${data.watchers_count} |
| </span> |
| <span class="flex items-center text-gray-600"> |
| <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> ${data.forks_count} |
| </span> |
| <span class="flex items-center text-gray-600"> |
| <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> ${data.open_issues_count} |
| </span> |
| <a href="${data.html_url}" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View on GitHub |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-gray-700 mb-2">Repository Details</h3> |
| <ul class="space-y-2"> |
| <li class="flex"><span class="text-gray-600 w-32">Language</span> ${data.language || 'Not specified'}</li> |
| <li class="flex"><span class="text-gray-600 w-32">License</span> ${data.license?.name || 'Not specified'}</li> |
| <li class="flex"><span class="text-gray-600 w-32">Created</span> ${new Date(data.created_at).toLocaleDateString()}</li> |
| <li class="flex"><span class="text-gray-600 w-32">Last Updated</span> ${new Date(data.updated_at).toLocaleDateString()}</li> |
| <li class="flex"><span class="text-gray-600 w-32">Size</span> ${Math.round(data.size / 1024)} MB</li> |
| <li class="flex"><span class="text-gray-600 w-32">Default Branch</span> ${data.default_branch}</li> |
| </ul> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-semibold text-gray-700 mb-2">Quick Links</h3> |
| <div class="space-y-2"> |
| <a href="${data.html_url}/archive/refs/heads/${data.default_branch}.zip" class="flex items-center text-blue-600 hover:text-blue-800"> |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> Download as ZIP |
| </a> |
| <a href="${data.html_url}/blob/${data.default_branch}/README.md" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800"> |
| <i data-feather="file-text" class="w-4 h-4 mr-2"></i> View README |
| </a> |
| <a href="${data.html_url}/issues" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800"> |
| <i data-feather="alert-circle" class="w-4 h-4 mr-2"></i> View Issues |
| </a> |
| <a href="${data.html_url}/pulls" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800"> |
| <i data-feather="git-pull-request" class="w-4 h-4 mr-2"></i> View Pull Requests |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div id="readme-container" class="mb-8"> |
| <h3 class="font-semibold text-gray-700 mb-4">README</h3> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div id="readme-content" class="prose max-w-none"> |
| Loading README... |
| </div> |
| </div> |
| </div> |
| `; |
| feather.replace(); |
| } |
| |
| function displayReadme(content) { |
| const readmeContainer = document.getElementById('readme-content'); |
| if (content) { |
| |
| let htmlContent = content |
| .replace(/^#\s(.+)$/gm, '<h1>$1</h1>') |
| .replace(/^##\s(.+)$/gm, '<h2>$1</h2>') |
| .replace(/^###\s(.+)$/gm, '<h3>$1</h3>') |
| .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') |
| .replace(/\*(.+?)\*/g, '<em>$1</em>') |
| .replace(/`(.+?)`/g, '<code>$1</code>') |
| .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">') |
| .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>'); |
| |
| readmeContainer.innerHTML = htmlContent; |
| } else { |
| readmeContainer.innerHTML = '<p class="text-gray-500">No README found for this repository.</p>'; |
| } |
| } |
| }); |
