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