SSR-Contribution-Svg

English | 简体中文

基于 Nest.js 的服务端渲染 GitHub 贡献墙

只需要在路由 参数 中传入 GitHub 用户名，就可以渲染出 GitHub 贡献墙，支持自定义 输出格式, 主题颜色, 导出图像的质量, 统计天数 等等

实时渲染示例：

<img alt="" src="https://ssr-contributions-svg.vercel.app/_/CatsJuice?format=svg&weeks=50" max-height="150">

在线预览与配置

现在你可以通过 Playground 在线预览与配置。

实现原理

• 在 Medium 上查看实现原理。
• 在 Codepen 上查看最小实现。

本地运行

• 为 GitHub OpenAPI 准备 PAT:

  https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

• 在根目录下创建 .env 文件， 并参考 .env.example 填写

• 使用以下命令安装依赖: shell # npm install yarn install

• 运行服务: shell # npm run start:dev yarn start:dev
• 在浏览器中查看效果 访问 http://localhost:${port}/_/${username},
• port: .env 文件中的SERVE_PORT 变量 , 默认为 3000
• username: Github 用户名

配置

${host}/_/${username}?${queryString}

• username: Github 用户名
• queryString

公共请求参数:

参数名	类型	描述	默认值
theme	enum	内置主题，可用值： random（使用随机主题） 或 主题枚举值	green
chart	enum	图表类型, 可用图表见： 图表	calendar
format	enum	输出格式: html : 直接返回一个 html 页面 svg : 返回 svg 文件 xml : 返回 xml 格式的svg png : 返回 png 格式的文件(透明背景) jpeg : 返回 jpeg 格式的文件(白色背景)	html
quality	number	图像质量，取值范围为 0.1 到 10. 仅当导出格式（format）为 png or jpeg 时有效	1
widget_size	enum	通过指定这一属性，自动计算周的数量 和 最佳的 ios 小组件，可用值为： small medium large	medium
weeks	number	强制指定周数，取值范围在 1 到 50. 会覆盖 widget_size 计算的 周数	undefined
colors	string | string[]	通过 , 拼接Hex 格式的颜色值 (需要去除 # 前缀) 或者使用多个 colors变量 例如： colors=f00,0f0,00f,0ff,f0f,ff0 colors=f00&colors=0f0 这将会覆盖 theme 属性	undefined
dark	boolean	启用 “暗黑模式”，详见 暗黑模式	false

3D柱状图参数:

参数名	类型	描述	默认值
gap	number	方块之间的间距, 可用值范围为 0 到 20	1.2
scale	number	调整俯视的角度, 允许不小于 1 的数值	2
light	number	调整光照强度, 可用范围为 1 到 60	10
gradient	boolean	为柱子使用渐变色模式	false
flatten	number	使用扁平模式，支持两种样式： 1: 所有方块都扁平化 2: 忽略空值 See 扁平模式示例	0
animation	enum	启用动画, 见 3dbar 动画	undefined

3dbar 动画

3dbar Animation

Enable animation by passing animation property, available values:

• fall (仅入场动画) chart=3dbar&weeks=20&flatten=1&animation=fall

  

• raise (仅入场动画) chart=3dbar&weeks=20&flatten=1&animation=raise

  

• wave (循环播放) chart=3dbar&weeks=20&flatten=1&animation=wave

  

自定义动画细节: (在 url 中作为 query 参数传递)

<code>fall</code> | <code>raise</code>

• animation_duration <Number> 动画持续时长，单位为秒
• animation_delay <Number> 方块播放的间隔时长，单位为秒

<code>wave</code></code>

• animation_amplitude <Number> 方块的移动范围，单位为像素（px）
• animation_frequency <Number> 方块移动频率，范围为 [0.01, 0.5]
• animation_wave_center <Number>_<Number> 波纹动画的中心点， 将坐标点 x, y 以 ${x}_${y} 的格式传递(使用 _ 拼接x, y)。例如：0_0

暗黑模式

实际上，图表的显示由主题（ theme ）决定，而主题会被颜色（ colors ）属性覆盖。在这里启用暗黑模式，影响的是内置主题的配色和输出 jpeg 或 html 时的背景颜色，而其他输出格式下，背景都是透明的，暗黑模式下的主题色可参考 主题

图表

• calendar
• 使用: chart=calendar

• 示例

  https://ssr-contributions-svg.vercel.app/_/CatsJuice?chart=calendar&quality=0.3&format=svg

  

• 3dbar

• 使用: chart=3dbar

• 示例

  https://ssr-contributions-svg.vercel.app/_/CatsJuice?chart=3dbar&quality=0.3&format=svg&gradient=true

  

主题

所有可用主题（实时更新）:

• 亮色模式
  
• 暗黑模式

使用场景

贴到 Notion 的页面中

作为 ios 小组件使用 Scritable

示例代码:

let [chart, widgetSize, theme, weeks] = (args.widgetParameter || "")
  .split(",")
  .map((v) => v.trim());
chart = chart || "calendar";
widgetSize = widgetSize || "midium";
theme = theme || "green";
const darkMode = Device.isUsingDarkAppearance();
let url = `https://ssr-contributions-svg.vercel.app/_/CatsJuice?format=jpeg&quality=2&theme=${theme}&widget_size=${widgetSize}&chart=${chart}&dark=${darkMode}`;

if (weeks) url += `&weeks=${weeks}`;

let w = await createWidget();
Script.setWidget(w);

async function createWidget() {
  let w = new ListWidget();
  let random = (Math.random() * 100000000).toFixed(0);
  let data = await new Request(url + "&random=" + random).load();
  let image = Image.fromData(data);
  w.backgroundImage = image;
  return w;
}

添加 scriptable 小组件到桌面，并在组件设置中选择对应的脚本

注意： 以上脚本依赖于 parameter 参数的输入，依次填入 chart, widgetSize, theme, weeks 使用 , 分割, 以下是一些示例:

• 3dbar,large,,30

chart=3dbar&widgetSize=large&weeks=30 - 3dbar,,yellow_wine,20

chart=3dbar&theme=yellow_wine&weeks=20 - ,,blue

theme=blue - ,small,purple

widgetSize=small&theme=purple

扁平模式

• flatten=1&format=svg

  

• flatten=2&format=svg