Last active
May 16, 2024 17:38
-
-
Save peckjon/a5f40981d536faf467666df82fe4dfad to your computer and use it in GitHub Desktop.
show github public repos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>GitHub Repositories</title> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" referrerpolicy="no-referrer"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
<style> | |
body { | |
background-color: #121212; | |
color: #f0f0f0; | |
font-family: 'Courier New', Courier, monospace; | |
} | |
.container { | |
margin-top: 50px; | |
} | |
.card { | |
background-color: #1e1e1e; | |
border: none; | |
} | |
.card-body { | |
border: 1px solid #333; | |
border-radius: 10px; | |
} | |
.form-control, .btn { | |
border-radius: 20px; | |
} | |
.btn { | |
background: linear-gradient(45deg, #007BFF, #00C851); | |
color: white; | |
} | |
.btn:hover { | |
background: linear-gradient(45deg, #0056b3, #007E33); | |
} | |
.repo-list { | |
list-style: none; | |
padding: 0; | |
} | |
.repo-list li { | |
padding: 15px; | |
margin: 10px 0; | |
background: #282828; | |
border: 1px solid #444; | |
border-radius: 10px; | |
display: flex; | |
flex-direction: column; | |
} | |
.repo-list a { | |
text-decoration: none; | |
color: #1E90FF; | |
font-weight: bold; | |
font-size: 1.2em; | |
} | |
.repo-list a:hover { | |
text-decoration: underline; | |
} | |
.repo-metadata { | |
font-size: 0.9em; | |
color: #aaa; | |
margin-top: 5px; | |
} | |
.repo-metadata i { | |
margin-right: 5px; | |
} | |
.repo-description { | |
margin-top: 10px; | |
color: #ccc; | |
} | |
.repo-metadata i[data-bs-toggle="tooltip"] { | |
cursor: pointer; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="card"> | |
<div class="card-body text-center"> | |
<h1 class="card-title">GitHub Repositories</h1> | |
<a class="btn btn-primary btn-block mb-3" id="github-login"> | |
<i class="fab fa-github"></i> Login with GitHub | |
</a> | |
<div class="form-group"> | |
<input type="text" id="username" class="form-control" value="peckjon" placeholder="Enter GitHub username"> | |
</div> | |
<button class="btn btn-primary btn-block" onclick="getRepos()">Get Repositories</button> | |
<ul id="repo-list" class="repo-list mt-4"></ul> | |
</div> | |
</div> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.6.0.min.js" referrerpolicy="no-referrer"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js" referrerpolicy="no-referrer"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" referrerpolicy="no-referrer"></script> | |
<script> | |
const CLIENT_ID = 'Ov23ctv4Zy3vxQQv5jsH'; | |
// Function to get the current page URL | |
function getCurrentPageURL() { | |
return window.location.href; | |
} | |
// Set the GitHub login URL dynamically | |
document.getElementById('github-login').href = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=repo user&redirect_uri=${encodeURIComponent(getCurrentPageURL())}`; | |
// Function to get the access token from the URL hash | |
function getAccessToken() { | |
const hash = window.location.hash; | |
const token = hash.split('&').find(elem => elem.includes('access_token')); | |
if (token) { | |
return token.split('=')[1]; | |
} | |
return null; | |
} | |
// Function to fetch user repos with the access token | |
async function getRepos() { | |
const accessToken = getAccessToken(); | |
if (!accessToken) { | |
alert('Please login with GitHub first'); | |
return; | |
} | |
const username = document.getElementById('username').value; | |
if (!username) { | |
alert('Please enter a GitHub username'); | |
return; | |
} | |
const response = await fetch(`https://api.github.com/users/${username}/repos?access_token=${accessToken}`); | |
const repos = await response.json(); | |
const repoList = document.getElementById('repo-list'); | |
repoList.innerHTML = ''; | |
if (response.ok) { | |
for (const repo of repos) { | |
const listItem = document.createElement('li'); | |
const link = document.createElement('a'); | |
link.href = repo.html_url; | |
link.textContent = repo.name; | |
link.target = '_blank'; | |
const metadata = document.createElement('div'); | |
metadata.className = 'repo-metadata'; | |
metadata.innerHTML = ` | |
<i class="fas fa-star" data-bs-toggle="tooltip" title="Stars"></i> ${repo.stargazers_count} | |
<i class="fas fa-code-branch" data-bs-toggle="tooltip" title="Forks"></i> ${repo.forks_count} | |
<i class="fas fa-circle" style="color: ${getLanguageColor(repo.language)}" data-bs-toggle="tooltip" title="Language"></i> ${repo.language || 'N/A'} | |
`; | |
if (repo.fork) { | |
const parentResponse = await fetch(repo.url); | |
const parentRepo = await parentResponse.json(); | |
metadata.innerHTML += `<i class="fas fa-code-fork" data-bs-toggle="tooltip" title="Forked from"></i> <a href="${parentRepo.parent.html_url}" target="_blank">${parentRepo.parent.full_name}</a>`; | |
} | |
const description = document.createElement('div'); | |
description.className = 'repo-description'; | |
description.textContent = repo.description || 'No description provided'; | |
listItem.appendChild(link); | |
listItem.appendChild(metadata); | |
listItem.appendChild(description); | |
repoList.appendChild(listItem); | |
} | |
// Initialize Bootstrap tooltips | |
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { | |
return new bootstrap.Tooltip(tooltipTriggerEl); | |
}); | |
} else { | |
repoList.innerHTML = `<li>Error: ${repos.message}</li>`; | |
} | |
} | |
function getLanguageColor(language) { | |
const colors = { | |
"JavaScript": "#f1e05a", | |
"Python": "#3572A5", | |
"Java": "#b07219", | |
"Ruby": "#701516", | |
"PHP": "#4F5D95", | |
"C++": "#f34b7d", | |
"C#": "#178600", | |
"Go": "#00ADD8", | |
"TypeScript": "#2b7489", | |
"Shell": "#89e051", | |
"Swift": "#ffac45", | |
"Kotlin": "#F18E33", | |
"Rust": "#DEA584", | |
"Scala": "#c22d40" | |
}; | |
return colors[language] || '#ccc'; | |
} | |
// Handle OAuth redirect | |
window.onload = function() { | |
const token = getAccessToken(); | |
if (token) { | |
history.replaceState(null, null, ' '); // Remove token from URL | |
} | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment