Is there a way to fetch the number of contribution of GitHub profile in Javascript?

Question

Is there a way to fetch the number of contributions in the last year using Javascript (client-side)? Note that number is for the public and private repository

I suggest using `got` and the GitHub API located at https://docs.github.com/en/rest. — RedYetiDev, Feb 05 '22 at 00:27
I'm creating a page on blogger and I don't think that service gives you the ability to use anything like that. @awesomemaker3000 — Murtada Altarouti, Feb 05 '22 at 00:33
Possible duplicate of: https://stackoverflow.com/q/18262288/9157799 — M Imam Pratama, Feb 05 '22 at 00:52

score 1 · Answer 1 · answered Feb 05 '22 at 00:39

Use a GraphQL query (GitHub API v4) and a ContributionsCollection object.

Define from by now minus one year, and to by now.

   var to = new Date();
   var year  = to.getFullYear();
   var month = to.getMonth();
   var day   = to.getDate();
   var from = new Date(year - 1, month, day);

Use graphql.js to then call, as in here:

query ContributionsView($username: String!, $from: DateTime!, $to: DateTime!) {
  user(login: $username) {
    contributionsCollection(from: $from, to: $to) {
      totalCommitContributions
      totalIssueContributions
      totalPullRequestContributions
      totalPullRequestReviewContributions
    }
  }
}

Once the script works outside your Blogger page, you can include it with a <script src=...> element.

it requires me to add my credentials, which isn't the best when it comes to putting something like that on the client side, am I right? — Murtada Altarouti, Feb 05 '22 at 01:34
Indeed, unless you can fetch the token at runtime from an external vault. — VonC, Feb 05 '22 at 01:41

score 0 · Accepted Answer · answered Feb 05 '22 at 12:19

I've tried many solutions and I improved one to get the following which works the best for me:

Create a function in Javascript

function get_contribution() {
    profile_url = "https://cors-anywhere.herokuapp.com/https://github.com/users/USERNAME/contributions";

    var xhr = new XMLHttpRequest();
    xhr.responseType = 'document';

    xhr.open('GET', profile_url, true);
    xhr.onload = function () {
        if (this.status == 200) {
            var response = xhr.responseXML.getElementsByClassName('f4 text-normal mb-2')[0].innerText;
            // get only the numbers in response
            contribution = response.replace(/[^0-9]/g, '');
            
            // The number of contributions is now saved in the contribution variable
        }
    };
    xhr.send();
}

Change USERNAME to the GitHub username you want
Note that you have to use "cors" or it won't work

Now you can use that function anywhere but in my case, I will call it on page load and set it somewhere in the HTML:

onload = function(){
    get_contribution();
  }

score 0 · Answer 3 · answered Feb 05 '22 at 15:09

I suggest using the unofficial Github Contributions API located at this site

Here is an example

async function getContributions(username) {
  var data = await (await fetch(`https://corsanywhere.herokuapp.com/https://github-contributions-api.deno.dev/${username}.json`)).json();
  console.log(data.totalContributions)
}
getContributions("octocat") // Returns 0, as Octocat has zero contributions

Is there a way to fetch the number of contribution of GitHub profile in Javascript?

3 Answers3