CODEWITHSUNDEEP
javascriptreactjsgithubgithub-api
PRR
PRR

Reputation: 183

Github language colour based on repo language in a React App

I am currently building a portfolio website for myself, and I have a section for all my GitHub projects, with public repos fetched automatically from the GitHub API.

What I am interested in doing, is displaying a coloured blob next to each repository, depending on the language used in it. If for example repo.language = 'javascript' then I would like a yellow blob next to it (which is GitHub's colour for JavaScript). I know that GitHub uses a library called linguist, but don't know how the best implementation of it would be with my web app.

I know the simplest way would be to use for example the language fetched for each repo as the className and specify a colour in CSS, but I am looking for a more advanced option that would not require me to manually update my CSS files every time I make a repo with a new language that I have not used before (and clutter up my CSS)

If any of you have ever done it before or have got any ideas, drop them down below ;)

Upvotes: 3

Views: 799

Answers (2)

PRR
PRR

Reputation: 183

For those struggling with the same, this is the absolute simplest way to do it.

Set the CSS classes to be the exact same as the incoming language data coming from the query, e.g if repo.language is 'JavaScript', then the CSS class should be .JavaScript { color: #XXXXXX } where color is the hex value corresponding to that languages (those can be found in the Gist @VonC linked to)

Upvotes: 1

VonC
VonC

Reputation: 1324043

For a given repository, you can list its languages through GitHub API v3

GET /repos/:owner/:repo/languages

That helps on the HTML content generation side.

But that still require an up-to-date CSS file, preferably one with all supported languages, like this one for instance.

The OP PRR adds in the comments:

I just ended up grabbing the top language for each repository, and then storing the hex codes for all the languages I use in a CSS file, so I can then just update it and add more languages when I start using them.

Upvotes: 1

Related Questions