Github 语言颜色基于 React App 中的 repo 语言

Question

我目前正在为自己建立一个投资组合网站，我有一个部分用于我所有的 GitHub 项目，public 回购自动从 GitHub API.

我感兴趣的是在每个存储库旁边显示一个彩色斑点，具体取决于其中使用的语言。例如，如果 repo.language = 'javascript' 那么我想要它旁边有一个黄色斑点（这是 GitHub 对 JavaScript 的颜色）。我知道 GitHub 使用一个名为 linguist 的库，但不知道我的网络应用程序如何最好地实现它。

我知道最简单的方法是使用例如为每个 repo 获取的语言作为类名并在 CSS 中指定颜色，但我正在寻找不需要我的更高级选项每次我使用以前从未使用过的新语言创建回购时手动更新我的 CSS 文件（并弄乱我的 CSS）

如果你们中的任何人以前做过或有任何想法，请将它们放在下面 ;)

Answer 1

对于给定的存储库，您可以通过 GitHub API v3

列出其语言

GET /repos/:owner/:repo/languages

这有助于 HTML 内容生成。

但这仍然需要一个最新的 CSS 文件，最好是带有 all supported languages, like this one for instance.

的文件

OP PRR adds :

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.

Answer 2

对于那些遇到同样问题的人来说，这绝对是最简单的方法。

将 CSS class 设置为与来自查询的传入语言数据完全相同，例如，如果 repo.language 是 'JavaScript'，则 CSS class 应该是 .JavaScript { color: #XXXXXX } 其中 color 是与该语言对应的十六进制值（可以在链接到的 Gist @VonC 中找到）

Github 语言颜色基于 React App 中的 repo 语言

Github language colour based on repo language in a React App

javascript

github

github-api

reactjs