[Feature] A good way to present Community OpenRank

[tyn1998]

Description

As @frank-zsy mentioned in X-lab2017/open-wonderland#311, now we have access to Community OpenRank of 650k repos, which is so exciting!

This is a huge progress for OpenRank and Hypercrx can't wait to present these data in a good way. This issue is created for discussions, please leave your ideas!

[TieWay59]

A simple idea: find a way to embed this chart into md.

[tyn1998]

Another racing bar for OpenRank is also good. See this: #744 (comment)

[TieWay59]

[TieWay59]

<a href="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors?repo_id=259035151" target="_blank" style="display: block" align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=259035151&image_size=auto&color_scheme=dark" width="380" height="auto">
    <img alt="Top Contributors of hypertrons/hypertrons-crx - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=259035151&image_size=auto&color_scheme=light" width="380" height="auto">
  </picture>
</a>

Wow, they even use <picture> tag, what brilliant engineers. @tyn1998

Details

在 md 内嵌动态 svg 我观察到有两种方案。

本质都是服务器缓存图片，通过 api 的方式分发给客户端。

一种是嵌入 html 的方式，这样的好处是能定制 web 元素的尺寸，并且能获得web标签的辅助优势，但是看起来复杂一些。
另一种是完全按照 md 的格式，比如 anuraghazra/github-readme-stats ，改不了图片尺寸，在外面包装引导连接也是可以的。

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

PS：之所以要包装连接是因为，图片资源连接打开只是图片，跳不到你希望的官方页面。（除非你在服务端做某种根据用户访问的重定向）

[TieWay59]

https://github.com/anuraghazra/github-readme-stats

github-readme-stats is more mature than oss-insight but they calculate data by visit (not ahead).

key feature I see:

• self-host
• custom