/GitHub-List-Repositories-HTML

List or pin all GitHub Repositories or Gists of a User in a HTML webpage using this JavaScript which uses GitHub API.

Primary LanguageJavaScriptMIT LicenseMIT

GitHub List Repositories

List or pin the GitHub Repositories or Gists in a webpage using GitHub API

GitHub issues GitHub pull requests GitHub license GitHub forks GitHub stars



Usage:

First, put these lines inside the <head></head> of your HTML file:

<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>

Functions:

gitpin(apiurl, type, HTMLDOMElement);

 Inserts a particular repo or gist into the HTMLDOMELement.

Parameters:

Example:

gitpin("https://api.github.com/repos/Username/Reponame", "repo", document.getElementById("IdOfTheHTMLElement"));

listrepos(Username, HTMLDOMELement, showProfile=false, showPagesHome=false, exclude=[])

 Inserts a list of repos belonging to Username into the HTMLDOMELement.

Parameters:

  • 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=false set to true to show the profile repo i.e. "Username/Username"
  • showPagesHome: default=false set to true to 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"]

Example:

  • 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.
});

listgists(Username, HTMLDOMELement)

 Inserts a list of all the gists belonging to Username into the HTMLDOMELement.

Parameters:

  • 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>

Example:

listgists("Username", document.getElementById("IdOfTheHTMLElement")).then(gistscount => {
  // In this section, variable gistscount stores the total number of Gists.
});

More Examples:

From the examples below,

  • Replace Username with a real GitHub Username.
  • Replace Reponame with the name of a GitHub Repository of the GitHub User specified in the first step.
  • Replace GistID with the ID of a GitHub Gist of the GitHub User specified in the first step.
  • Replace IdOfTheHTMLElement with the ID of the HTML Element that you want to put the entry in.
    • For Example, create a HTML div element with an id attribute wherever you want it to be in your HTML file. 
      <div id="ElementId"></div>
      In the above case, replace IdOfTheHTMLElement from the below examples with ElementId.

1. Pin a single GitHub Repository:

<script>
gitpin("https://api.github.com/repos/Username/Reponame", "repo", document.getElementById("IdOfTheHTMLElement"));
</script>

2. Pin a single GitHub Gist:

<script>
gitpin("https://api.github.com/gists/GistID", "gist", document.getElementById("IdOfTheHTMLElement"));
</script>

3. List All GitHub Repositories:

<script>
listrepos("Username", document.getElementById("IdOfTheHTMLElement"), showProfile=true, showPagesHome=true).then(reposcount => {
  // In this section, variable reposcount stores the total number of Repositories.
});
</script>

4. List All GitHub Gists:

<script>
listgists("Username", document.getElementById("IdOfTheHTMLElement")).then(gistscount => {
  // In this section, variable gistscount stores the total number of Gists.
});
</script>

Basic CSS to be used:

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>

Generated HTML Structure

  • 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>