@leereilly: GitHub的星标历史API已发布!我使用Copilot CLI构建了Star Chart,参加#GitHubCopilotDayContest #Sweepstakes活动:s…
摘要
GitHub发布了其星标历史API,开发者Lee Reilly使用Copilot CLI构建了Star Chart,为GitHub仓库生成自更新的星标历史图表。
查看缓存全文
缓存时间: 2026/09/14 21:35
GitHub 的 Star 历史记录 API 来了!⭐ 我使用 Copilot CLI 为 #GitHubCopilotDayContest #Sweepstakes 构建了 Star Chart:为你仓库的 Star 历史记录创建自更新的 README 图表。
https://t.co/v8Azdafjfa
https://t.co/t8IINIaQES
leereilly/star-chart
来源:https://github.com/leereilly/star-chart
Star Chart
为 GitHub README 生成 Star 历史记录图表。输出是独立的 SVG 文件,样式类似于 GitHub 贡献图。
Star Chart 读取仓库的 Star 历史记录,将其渲染为贡献网格或常规图表,并可以按计划提交结果。它无需仪表板、第三方图床或运行时 JavaScript。
- 带可选增长列动画的贡献网格
- 十四种样式:经典图表、平铺网格、里程碑、对比、霓虹灯、终端和手绘
- 亮色、暗色和自动主题,或在一次运行中同时固定两种主题
- 聚合多个仓库或使用分组条形图比较它们的增长
- 仅 CSS 动画,尊重
prefers-reduced-motion - 独立 SVG 输出,无脚本或外部资源
- 可选的动画 GIF 输出,适用于不支持内联 SVG 的场景
30 秒快速设置
使用发布的 v0.3 版本(https://github.com/leereilly/star-chart/releases/tag/v0.3):
uses: leereilly/[email protected]。该标签包含打包好的 action;你的工作流无需单独下载、npm 安装或构建步骤。
添加一个按计划生成图表并提交的工作流:
# .github/workflows/star-chart.yml
name: Star Chart
on:
schedule:
- cron: '17 4 * * *' # 每天,UTC 非高峰时段
workflow_dispatch:
permissions:
contents: read
concurrency:
group: star-chart
cancel-in-progress: true
jobs:
star-chart:
runs-on: ubuntu-latest
permissions:
contents: write # 只有此作业需要写权限,以提交 SVG
steps:
- uses: actions/checkout@v4
- name: Generate star chart
uses: leereilly/[email protected]
with:
token: ${{ github.token }}
repository: ${{ github.repository }}
output: assets/star-chart.svg
animation: once
- name: Commit chart if it changed
run: |
git config user.name 'github-actions[bot]'
git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
git add assets/star-chart.svg
if git diff --cached --quiet; then
echo 'No chart changes to commit.'
else
git commit -m 'chore: update star chart'
git push
fi
然后将其嵌入你的 README:

或使用亮色/暗色源文件——设置 dual_theme: true,action 会写入两个文件(并为你提供此代码片段作为 picture_snippet 输出):
<img src="https://raw.githubusercontent.com/leereilly/star-chart/main/assets/star-chart-light.svg#gh-light-mode-only" width="400" alt="Star history (light)"><img src="https://raw.githubusercontent.com/leereilly/star-chart/main/assets/star-chart-dark.svg#gh-dark-mode-only" width="400" alt="Star history (dark)">
为什么需要单独的提交步骤? 生成图表无需写权限。
actions/checkout以contents: read运行。提交结果是明确授权的独立步骤(contents: write)。action 本身不会提交、推送、强制推送或更改仓库设置。如果你的默认分支受保护,请提交到一个分支并创建 PR,或放宽对机器人的保护。
完整的工作流位于 .github/workflows/update-star-chart.yml。
样式
| 亮色 | 暗色 |
|---|---|
| contributions | contributions dark |
| line | line dark |
| area | area dark |
| bar | bar dark |
| sparkline | sparkline dark |
| grid | grid dark |
| step-line | step-line dark |
| milestone-scatter | milestone-scatter dark |
| milestone-area | milestone-area dark |
| clustered-bar | clustered-bar dark |
| neon-glow | neon-glow dark |
| neon-glow-stream | neon-glow-stream dark |
| ascii-terminal | ascii-terminal dark |
| hand-drawn | hand-drawn dark |
使用 style: <样式名> 选择样式:
| 样式 | 视觉效果 |
|---|---|
contributions | 累积堆叠方块,带有数字 Star 计数的 Y 轴和阴影图例;不是日历活动热力图。 |
line、area、bar、sparkline | 原始累积线、填充区域、条形图和紧凑线条。 |
grid | 带数字轴的累积方形平铺热力图;一列中所有填充的方块共享基于值的强度。 |
step-line | 在区间端点处有水平保持和跳跃的阶梯图,即使对于密集数据也是如此。 |
milestone-scatter | 带有标记里程碑的观测点。 |
milestone-area | 带有相同里程碑标记的阶梯累积区域。 |
clustered-bar | 每个对齐时间区间内相邻、颜色一致的仓库条形图,并带有图例。 |
neon-glow | 清晰的累积线,周围环绕半透明笔触和局部模糊光晕。 |
neon-glow-stream | 发光边界下方渐变的半透明区域。 |
ascii-terminal | 真正的等宽 SVG 文本:# 列、* 尖端以及 ` |
hand-drawn | 确定性的双重草图笔触和对角线填充;观测点仍然是精确的锚点。 |
所有样式支持 light、dark、auto、显式背景和现有的动画输入。新样式使用共享的揭示方式:按时间顺序从左到右或同时从下到上,对于 cascade 则有离散步骤。减少动画的用户始终看到完整图表。原始样式保留其现有动画。
调色板级别为新样式着色;前四个聚系列接受相应的级别覆盖,后续系列使用独特的主题感知颜色。
里程碑使用基于 1/2/5 的确定性间隔,在 源观测端点 处交叉,而不是插值日期或任意合并的显示区间。在单次观测中跨越的多个阈值共享一个标记;重叠的标签被省略,但工具提示保留交叉点和实际记录的总数。平坦数据会收到最近观测的标记。
API 周可能仍然是部分的;这些端点是名义上的周边界,而不是确切的 stargazer 事件时间。grid 和 ascii-terminal 将占用的高度向上舍入到请求的 rows 分辨率。网格遵循 cell_size、cell_gap 和 cell_radius;终端则使用等宽字形大小。
不可能的尺寸会明确失败:减少 rows/columns 或增加 width/height。聚类条形图每个区间每个仓库至少需要 2px;对于比较,从 columns: 12 开始。霓虹灯对稀疏数据保留阶梯插值,草图扰动限制在段中点周围的 1.4px 内。
自定义调色板在亮色和暗色模式下都适用:
auto 主题使用蓝色调色板
配置
所有输入都是可选的。以下是 action 使用的 有效 默认值。
核心
| 输入 | 默认值 | 描述 |
|---|---|---|
token | ${{ github.token }} | 用于 API 请求的令牌。空值 = 未经身份验证的公共访问。 |
repository | ${{ github.repository }} | 要生成图表的仓库(owner/repo)。 |
repositories | (空) | 要聚合的仓库,或使用 clustered-bar 进行比较。 |
output | assets/star-chart.svg | 工作区相对输出路径。使用 .svg(默认)或 .gif 扩展名——参见 GIF 输出。 |
style | contributions | 十四种样式之一,包括 grid、step-line、milestone-scatter、milestone-area、clustered-bar、neon-glow、neon-glow-stream、ascii-terminal 和 hand-drawn。 |
theme | light | light、dark、auto。当 dual_theme 为 true 时忽略。 |
dual_theme | false | 根据 output 生成一个固定的亮色 和 暗色文件。 |
scale | absolute | absolute(Y 轴从零开始)或 visible(Y 轴从窗口基线开始)。 |
多个仓库
repositories 接受以逗号和/或换行符分隔的 owner/repo 值列表,默认情况下生成 单个聚合图表。要改为比较各个仓库,请使用 style: clustered-bar:
with:
style: clustered-bar
columns: 12
repositories: |
octocat/hello-world
octocat/spoon-knife
octocat/octocat.github.io
语义:
- 空白(默认):
repository被绘制图表,与之前完全一样。 - 非空白:
repositories优先。如果同时设置了repository且与之有意义地不同(即不是工作流自己的${{ github.repository }}且不在列表中),action 会警告它未被绘制图表。 - 条目被修剪,空格被删除,重复项被 不区分大小写地 去除,保留第一次出现的拼写,并发出警告。
- 最多 20 个 仓库;更长的列表将无法通过验证。
- 每周添加量按 UTC 日历周 求和,因此 API 周边界不同的仓库仍然可以对齐。累积值从求和后的添加量重新计算,超出仓库自身范围的周贡献为零,间隔用合成零周填充。
clustered-bar在选择尾随窗口 之前 保留每个仓库在该完整周时间线上的添加量。缺少的插槽添加零并继承先前的累积计数;尚未创建的仓库不会触发覆盖率警告。条形图共享一个公共轴:absolute从零开始,而visible从最低的单个窗口基线开始;最大值是最大的单个系列,而不是聚合总和。stars输出和标题总计是当前 Star 计数的 总和。窗口起始使用最早的仓库创建时间。- 对于两个仓库,标题变为
owner/a + owner/b,超过此数量则为owner/a + N more repositories。设置title可以覆盖它。 - 每个仓库都通过相同的 API 流程单独获取,在 单一共享重试和时间预算 下。如果任何仓库失败,整个运行会命名该仓库并失败,在写入任何文件之前,并且在设置任何输出之前。
三个仓库的聚合
亮色和暗色文件(dual_theme)
dual_theme: true 一次 获取和建模数据,渲染两次,写入一个固定的亮色 SVG 和一个固定的暗色 SVG。路径通过在扩展名前插入后缀(保留扩展名的大小写)从 output 派生:
output | 亮色文件 | 暗色文件 |
|---|---|---|
assets/star-chart.svg | assets/star-chart-light.svg | assets/star-chart-dark.svg |
单主题的 output 文件本身 不会 被写入。theme 在双模式下被忽略(如果你设置了它,会发出警告),chart_path 是亮色路径,picture_snippet 输出为你提供即用即贴的标记。参见下面的食谱。
GIF 输出
给 output 一个 .gif 扩展名以渲染 动画 GIF 而不是 SVG。GIF 完全在运行器上生成(无浏览器、无网络):每个图表被渲染为一系列静态 SVG 帧,使用打包的 WebAssembly 渲染器进行光栅化,并编码为动画 GIF。这对于剥离内联 SVG 或 CSS 动画的界面(某些 feed 阅读器、聊天客户端和图片代理)非常方便。
with:
style: contributions
animation: once
output: assets/star-chart.gif
注意事项:
- 任何样式和主题都可以导出,并且动画被保留。 每个动画图表被冻结为一系列静态 SVG 帧,再现 SVG 自身的动画技术——贡献构建、线条的描边绘制、裁剪路径揭示/级联擦除以及条形/区域变换缩放增长——然后逐帧光栅化和编码。
once播放完成并保持最终图表;loop采样一个无缝的构建+暂停周期,并省略一次性延迟(GIF 无法仅延迟第一次播放)。animation: none的图表作为单帧 GIF 的完成图表导出。 - 单个 GIF 不允许使用
theme: auto,因为光栅图像无法响应prefers-color-scheme。请使用显式的light/dark主题,或使用dual_theme: true来生成*-light.gif和*-dark.gif。 - GIF 比等效的 SVG 文件更大。此 README 和项目站点上的所有示例图像故意保持 SVG;仓库的根目录
lee.gif是参考 GIF 示例。
时间窗口
| 输入 | 默认值 | 描述 |
|---|---|---|
period | (空) | 3m、6m、1y、2y、5y、all。优先于 weeks。 |
weeks | (空) | 显式的尾随周数。当设置了 period 时忽略。 |
当两者都为空时,图表范围从 仓库创建到现在,相当于 period: all。对于多个仓库,它从最早的创建日期开始,独立的系列对齐到相同的时间线。仅绘制可用的记录历史——不是保证的终身 Star 账簿。缺失的前导、内部或尾随历史被标记为未知覆盖,并以零添加量显示(将记录的总数向前结转)。显式时段保留其尾随窗口:3m=13、6m=26、1y=52、2y=104、5y=260 个 API 周。显式 weeks 接受 1–3,000。设置两者会发出警告,period 优先。
从零开始或放大(scale)
默认情况下,Star 计数轴从零开始。 显式设置 scale: absolute 以保持该零基线,或选择 scale: visible 以从所选时间窗口之前的累积计数放大。这些示例使用 相同的已验证 Rails 快照和三个月窗口;只有 scale 变化。在两个图表中,线条都从窗口开始时的现有累积 Star 计数开始,而不是从零开始。放大的轴标签使零基线易于比较:
Y 轴从零开始 — scale: absolute(默认) | 窗口基线 — scale: visible |
|---|---|
| 三个月的折线图,其 Star 计数轴从零开始 | 同样的三个月 Star 历史,放大到非零窗口基线 |
在你的工作流中检出后,使用以下任一步骤:
- name: Chart with a zero-based star-count axis
uses: leereilly/[email protected]
with:
token: ${{ github.token }}
repository: ${{ github.repository }}
output: assets/star-chart-zero.svg
style: line
theme: light
period: 3m
scale: absolute # 默认;y 轴从 0 开始
axis_font_size: 20
- name: Chart zoomed to the window baseline
uses: leereilly/[email protected]
with:
token: ${{ github.token }}
repository: ${{ github.repository }}
output: assets/star-chart-visible.svg
style: line
theme: light
period: 3m
scale: visible
axis_font_size: 20
scale 改变垂直范围,而不是历史计数。零基线轴不会强制将第一个绘制点设为零:窗口之前记录的 Star 仍然计入。visible 不会减去该历史或将图表转变为“自窗口开始以来获得的 Star”。除紧凑型 sparkline 外,所有样式默认显示数字 Star 计数轴;使用 show_y_axis 可以覆盖此设置。聚类比较使用最低的单个基线。
布局
| 输入 | 默认值 | 描述 |
|---|---|---|
columns | 52 | 以块为单位的网格宽度(水平显示区间)。 |
rows | 26 | 平铺/终端高度(垂直级别)。 |
width | 900 | SVG 宽度(px)。 |
height | auto | SVG 高度(px),或 auto 以跟随几何形状。 |
cell_size | auto | contributions 和 grid 的单元格边长(px)。 |
cell_gap | auto | 单元格之间的间距(px);影响 grid 和 contributions。 |
相似文章
@leereilly: 虽然迟到了,但我今晚终于试用了 GitHub Copilot 应用……哇。仅用几个提示和几分钟,我就……
@leereilly 分享了他使用 GitHub Copilot 快速构建一个带有动画和 GitHub 贡献图模式的 3D 魔方可视化工具及求解器的体验。
GitHub已限制对星标数据的访问
GitHub已限制对其stargazers API的访问,将星标数据仅限于仓库管理员和协作者,导致许多星标历史图表失效。
Show HN: Gitstock–将您的 GitHub 提交历史转换为 K 线图和动画
Gitstock 将 GitHub 提交历史转换为可分享的 K 线图和动画,让您一目了然地评估仓库的活动和健康状况。
庆祝GitHub Copilot Day,有机会赢得100美元GitHub商店信用额度!参与方式:1. 使用Git…创建内容
GitHub正在为GitHub Copilot Day举办一项竞赛,参与者可以通过使用GitHub Copilot应用或CLI创建和分享项目,赢得100美元的GitHub商店信用额度。
@github: https://x.com/github/status/2098065317083906156
GitHub Copilot Day 活动包含新版本发布和实时编程会议,展示了 GitHub 的 AI 驱动的编码助手的更新。