List or pin the GitHub Repositories or Gists in a webpage using GitHub API
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://gitlist.himdek.com/GitHubList.js"></script>Inserts a particular repo or gist into the HTMLDOMELement.
apiurl: api url of the repo or gist. Example: "https://api.github.com/repos/HimDek/GitHub-List-Repositories-HTML" is the api url of this repo.type: "repo" or "gist"HTMLDOMElement: The HTML DOM Element to insert into. Example:document.getElementById("myID"). To set Id of HTML Element:<div id="myID"></div>gitpin("https://api.github.com/repos/Username/Reponame", "repo", document.getElementById("IdOfTheHTMLElement"));
Inserts a list of repos belonging to Username into the HTMLDOMELement.
Username: GitHub username. Example:"HimDek"is my username.HTMLDOMElement: The HTML DOM Element to insert into. Example:document.getElementById("myID"). To set Id of HTML Element:<div id="myID"></div>showProfile: default=falseset totrueto show the profile repo i.e. "Username/Username"showPagesHome: default=falseset totrueto show the User's GitHub pages Home page repo i.e. "Username/Username.github.io"exclude: default=[], To exclude a repo, put a "," separated list of repo names to be excluded enclosed in""inside the[]. Example:["reponame-1", "reponame-2"]
- Pin all the repos of a User except the profile and pages Home repo:
listrepos("Username", document.getElementById("IdOfTheHTMLElement")).then(reposcount => { // In this section, variable reposcount stores the total number of Repositories. });- Pin all the repos of a User:
listrepos("Username", document.getElementById("IdOfTheHTMLElement"), showProfile=true, showPagesHome=true).then(reposcount => { // In this section, variable reposcount stores the total number of Repositories. });- Pin all the repos of a User excluding "repo-1" and "repo-2":
listrepos("Username", document.getElementById("IdOfTheHTMLElement"), showProfile=true, showPagesHome=true, exclude=["repo-1", "repo-2"]).then(reposcount => { // In this section, variable reposcount stores the total number of Repositories. });
Inserts a list of all the gists belonging to Username into the HTMLDOMELement.
Username: GitHub username. Example:"HimDek"is my username.HTMLDOMElement: The HTML DOM Element to insert into. Example:document.getElementById("myID"). To set Id of HTML Element:<div id="myID"></div>listgists("Username", document.getElementById("IdOfTheHTMLElement")).then(gistscount => { // In this section, variable gistscount stores the total number of Gists. });
From the examples below,
- Replace
Usernamewith a real GitHub Username. - Replace
Reponamewith the name of a GitHub Repository of the GitHub User specified in the first step. - Replace
GistIDwith the ID of a GitHub Gist of the GitHub User specified in the first step. - Replace
IdOfTheHTMLElementwith the ID of the HTML Element that you want to put the entry in.- For Example, create a HTML
divelement with anidattribute wherever you want it to be in your HTML file.In the above case, replace<div id="ElementId"></div>IdOfTheHTMLElementfrom the below examples withElementId.
- For Example, create a HTML
<script> gitpin("https://api.github.com/repos/Username/Reponame", "repo", document.getElementById("IdOfTheHTMLElement")); </script>
<script> gitpin("https://api.github.com/gists/GistID", "gist", document.getElementById("IdOfTheHTMLElement")); </script>
<script> listrepos("Username", document.getElementById("IdOfTheHTMLElement"), showProfile=true, showPagesHome=true).then(reposcount => { // In this section, variable reposcount stores the total number of Repositories. }); </script>
<script> listgists("Username", document.getElementById("IdOfTheHTMLElement")).then(gistscount => { // In this section, variable gistscount stores the total number of Gists. }); </script>
Put the following lines inside the <head></head> of you HTML file. These very basic CSS styles. You can customize them to match the theme of your website. See Generated HTML structure to know the HTML Structure of the pin and list elements generated by this script.
<style>
svg {
vertical-align: middle;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.box {
border: 1px solid black;
padding: 25px;
margin: 20px;
}
.stats span {
display: inline-block;
margin-right: 10px;
}
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
</style>
-
Repo pin box:
<div class="repo card"> <div class="card-title"> <a href="{repo url}"><h4><svg></svg>{repo name}</h4></a> </div> <div class="card-content"> <p>{description}</p> </div> <div class="card-footer"> <span class="stats"> <span><svg></svg>{Language name}</span> <span><a href="{stars url}"><svg></svg>{number of stars}</a></span> <span><a href="{forks url}"><svg></svg>{number of forks}</a></span> <span><svg></svg>{license name}</span> </span> </div> </div>
-
Gist pin box:
<div class="gist card"> <div class="card-title"> <a href="{gist url}"><h2>{gist name}</h2></a> </div> <div class="card-content"> <p>Description</p> </div> <div class="card-footer"> <span class="stats"> <span><a href="{gist url}"><svg></svg>{number of files} file</a></span> <span><a href="{forks url}"><svg></svg>{number of forks} forks</a></span> <span><a href="{comments url}"><svg></svg>{number of comments} comments</a></span> </span> </div> </div>