neon-dev/contributors.html

## contributors.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub contributors</title>
  <style>
    :root {
      font-family: "Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
      color-scheme: dark;
      background: #0d1117;
      color: #e6edf3;
      text-align: center;
    }
    a {
      color: #4493f8;
      text-decoration: none;
    }
    h1 > a {
      color: #e6edf3;
    }
    #contributor-list {
      padding: 0;
      list-style: none;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .contributor img {
      margin: 0 auto;
      padding-bottom: 5px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: block;
    }
  </style>
</head>
<body>
  <h1><a id="title">GitHub contributors</a></h1>
  <ul id="contributor-list"><li>loading...</li></ul>
  <script>
    const urlParams = new URLSearchParams(window.location.search);
    const repo = urlParams.get('repo');
    if (!repo) {
      document.body.innerHTML = "URL parameters: <code>repo</code>, <code>title</code>";
    } else {
      if (urlParams.has('title')) {
        document.title = urlParams.get('title');
      } else if (repo) {
        document.title = repo.substring(repo.indexOf('/') + 1) + ' contributors';
      }
      document.getElementById('title').textContent = document.title;
      document.getElementById('title').href = 'https://github.com/' + repo + '/contributors';
      const contributorList = document.getElementById('contributor-list');
      const limit = 100;
      fetch('https://api.github.com/repos/' + repo + '/contributors?anon=1&per_page=' + limit)
        .then(response => response.ok ? response.json() : Promise.reject('HTTP ' + response.status))
        .then(data => {
          const defaultAvatarUrl = "https://avatars.githubusercontent.com/u/10137?v=4";
          contributorList.innerHTML = '';
          data.forEach(contributor => {
            const contributorName = contributor.login || contributor.name;
            const listItem = document.createElement('li');
            listItem.classList.add('contributor');

            const avatarImg = document.createElement('img');
            avatarImg.src = contributor.avatar_url || defaultAvatarUrl;
            avatarImg.alt = 'avatar';

            const nameParagraph = document.createElement('a');
            nameParagraph.href = 'https://github.com/' + repo + '/commits?author=' + encodeURIComponent(contributor.login || contributor.email);
            nameParagraph.appendChild(avatarImg);
            nameParagraph.innerHTML += contributorName;

            listItem.appendChild(nameParagraph);
            contributorList.appendChild(listItem);
          });
          if (data.length == limit) {
            document.body.innerHTML += "(showing a maximum of 100 contributors)";
          }
        })
        .catch(error => {
          console.error('Error fetching contributors:', error);
          contributorList.firstChild.textContent = 'Failed to load contributors';
        });
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GitHub contributors</title>
	<style>
	:root {
	font-family: "Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
	color-scheme: dark;
	background: #0d1117;
	color: #e6edf3;
	text-align: center;
	}
	a {
	color: #4493f8;
	text-decoration: none;
	}
	h1 > a {
	color: #e6edf3;
	}
	#contributor-list {
	padding: 0;
	list-style: none;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
	}
	.contributor img {
	margin: 0 auto;
	padding-bottom: 5px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: block;
	}
	</style>
	</head>
	<body>
	<h1><a id="title">GitHub contributors</a></h1>
	<ul id="contributor-list"><li>loading...</li></ul>
	<script>
	const urlParams = new URLSearchParams(window.location.search);
	const repo = urlParams.get('repo');
	if (!repo) {
	document.body.innerHTML = "URL parameters: <code>repo</code>, <code>title</code>";
	} else {
	if (urlParams.has('title')) {
	document.title = urlParams.get('title');
	} else if (repo) {
	document.title = repo.substring(repo.indexOf('/') + 1) + ' contributors';
	}
	document.getElementById('title').textContent = document.title;
	document.getElementById('title').href = 'https://github.com/' + repo + '/contributors';
	const contributorList = document.getElementById('contributor-list');
	const limit = 100;
	fetch('https://api.github.com/repos/' + repo + '/contributors?anon=1&per_page=' + limit)
	.then(response => response.ok ? response.json() : Promise.reject('HTTP ' + response.status))
	.then(data => {
	const defaultAvatarUrl = "https://avatars.githubusercontent.com/u/10137?v=4";
	contributorList.innerHTML = '';
	data.forEach(contributor => {
	const contributorName = contributor.login \|\| contributor.name;
	const listItem = document.createElement('li');
	listItem.classList.add('contributor');

	const avatarImg = document.createElement('img');
	avatarImg.src = contributor.avatar_url \|\| defaultAvatarUrl;
	avatarImg.alt = 'avatar';

	const nameParagraph = document.createElement('a');
	nameParagraph.href = 'https://github.com/' + repo + '/commits?author=' + encodeURIComponent(contributor.login \|\| contributor.email);
	nameParagraph.appendChild(avatarImg);
	nameParagraph.innerHTML += contributorName;

	listItem.appendChild(nameParagraph);
	contributorList.appendChild(listItem);
	});
	if (data.length == limit) {
	document.body.innerHTML += "(showing a maximum of 100 contributors)";
	}
	})
	.catch(error => {
	console.error('Error fetching contributors:', error);
	contributorList.firstChild.textContent = 'Failed to load contributors';
	});
	}
	</script>
	</body>
	</html>