Skip to content

Latest commit

 

History

History
517 lines (428 loc) · 14.2 KB

README-CN.md

File metadata and controls

517 lines (428 loc) · 14.2 KB
Raw

English | 简体中文

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

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


实时渲染示例：

在线预览与配置

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

实现原理

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

本地运行

配置

${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 参数传递)

fall | raise
  • animation_duration <Number> 动画持续时长，单位为秒
  • animation_delay <Number> 方块播放的间隔时长，单位为秒
wave
  • 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
      3DBar

主题

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

  • 亮色模式

  • 暗黑模式

使用场景

贴到 Notion 的页面中

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

iPhone 11 Pro

扁平模式

  • flatten=1&format=svg

  • flatten=2&format=svg