CODEWITHSUNDEEP
javascriptrestapigithub
Murtaza JAFARI
Murtaza JAFARI

Reputation: 734

Add Language colors for the repositories using REST API

I wanted to display all repositories of a username using REST API, so I want to get the language color as it is showing on Github.

e.g

enter image description here

I did display the total stars, forks, and language. But I want to display the language badges as well. I hope I explained enough to understand.

var request = new XMLHttpRequest();
    request.open('GET','https://api.github.com/users/murtazajafari/repos?per_page=3' , 
    true)
    request.onload = function() {
        var data = JSON.parse(this.response);
        console.log(data);
        var statusHTML = '';
        $.each(data, function(i, status){
            statusHTML += '<div class="card"> \
                <a href=""> \
                    <div class="col-auto"> \
                        <i class="fa fa-github"></i> \
                    </div> \
                    <h4>' + status.name +  '</h4> \
                    <div class="state"> \
                        <span class="mr-4"><i class="fa fa-star mr-2"></i>' + status.stargazers_count +  '</span> \
                        <span class="mr-4"><i class="fa fa-code-fork mr-2"></i>' + status.forks_count + '</span> \
                        <span class="repo-language-color mr-1" style="background-color:' + site.data.colors[status.language]["color"] + '"></span><span itemprop="programmingLanguage">' + repository.language + '</span> \
                    </div> \
                </a> \
            </div>';
        });
        $('.repositories').html(statusHTML);
    }
    request.send();

Upvotes: 0

Views: 1046

Answers (2)

Sabesan
Sabesan

Reputation: 702

I created a repo with the data you want. It fetches from GitHub Lingustic. fetch the data from this API and use it. If you are trying to show your GitHub cards in Reactjs watch this repository made by me.

Upvotes: 0

balexandre
balexandre

Reputation: 75073

a simple Google search returns several repos with the data you want, the one I selected was https://github.com/ozh/github-colors and the source code has a simple JSON file that you can load, just the way you're loading the GitHub API...

I will use fetch as it's simpler and as I stated to hate writing HTML as well... here's a simple solution:

.color {
  display: inline-block;
  background-color: transparent;
  width: 10px;
  height: 10px;
}

  <div id="app">
    <ul>
      <li v-for="(repo, idx) in repos" :key="idx">
        <span class="color" :style="{ background: languageColor(repo.language) }">&nbsp;</span>
        {{ repo.language }} | 
        <a :href="`https://github.com/${repo.full_name}`">{{ repo.name }}</a> | 
        {{ repo.stargazers_count }} | 
        {{ repo.forks_count }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: function() {
    return {
      repos: null,
      colors: null
    }
  },
  created() {
    var _ = this
    var urlApi = 'https://api.github.com/users/murtazajafari/repos?per_page=10'
    var urlColors = 'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json'

    fetch(urlApi)                    // fetch API data
      .then(res => res.json())
      .then(json => _.repos = json)  // append to repos
    fetch(urlColors)                 // fetch colors data
      .then(res => res.json())
      .then(json => _.colors = json) // append to colors
  },
  methods: {
    languageColor(language) {
      return this.colors[language].color // pick up the right color by language
    }
  }
})

live on JsBin and using Veutify on CodePen

Upvotes: 1

Related Questions