I tried to find an answer to this question for a long time, and I did find some but none of them worked with the current version of GitHub API. It took me some time to figure it out myself, but I did and I am verry happy with the result that I achieved. So, I thought I should share it here for someone who might also be finding an answer to this. So, read my answer below.
First, You can have a glimpse of what the final result is like by clicking here for Repositories and here for Gists.
Click here to view the repository that has the JavaScript file. There, you will find all the details on how to use it.
If you liked my implementation of this in my GitHub Page website, its source code is here
In short, here is how to list all GitHub Repositories of a User (Mine in this Example):
listrepos("HiDe-Techno-Tips", document.getElementById("pin")).then(reposcount => {
// In this section, variable reposcount stores the total number of Repositories.
}); svg {
display: inline-block;
vertical-align: middle;
padding-bottom: 3px;
}
a {
text-decoration: none;
}
.box {
border: 2px solid black;
padding: 25px;
margin: 20px;
}
.box div {
margin: 5px;
}
.box p {
color: black;
}
.controls {
display: flex;
}
.horizontalspace {
flex-grow: 1;
}
.stats {
display: inline-flex;
align-items: center;
}
.buttons * {
margin-left: 5px;
}
.stats *:not(svg) {
margin-right: 5px;
}
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script src="https://gitlist.himdek.com/GitHubList.js"></script>
</head>
<body>
<div id="pin"></div>
</body>
</html>