https://github.com/catsjuice/ssr-contributions-img
Server side rendering of Github contribution wall API
https://github.com/catsjuice/ssr-contributions-img
contribution-graph contributions-calendar ssr svg
Last synced: 5 days ago
JSON representation
Server side rendering of Github contribution wall API
- Host: GitHub
- URL: https://github.com/catsjuice/ssr-contributions-img
- Owner: CatsJuice
- License: mit
- Created: 2022-03-03T05:54:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-18T02:38:10.000Z (over 2 years ago)
- Last Synced: 2025-04-01T13:51:18.220Z (25 days ago)
- Topics: contribution-graph, contributions-calendar, ssr, svg
- Language: TypeScript
- Homepage: https://contribution.oooo.so
- Size: 9.92 MB
- Stars: 214
- Watchers: 5
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
README
English
|
简体中文
基于 Nest.js 的服务端渲染 GitHub 贡献墙
只需要在路由 参数 中传入 GitHub 用户名，就可以渲染出 GitHub 贡献墙，支持自定义
输出格式,
主题颜色,
导出图像的质量,
统计天数
等等
实时渲染示例：
## 在线预览与配置
现在你可以通过 [Playground](https://ssr-contributions-svg.vercel.app/) 在线预览与配置。
## 实现原理
- 在 [Medium](https://medium.com/@catsjuice/fake-3d-bar-chart-with-svg-js-134684bd5100) 上查看实现原理。
- 在 [Codepen](https://codepen.io/catsjuice/pen/MWVqNdQ) 上查看最小实现。
## 本地运行
- **为 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 小组件，可用值为：
smallmediumlarge
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
```
## 主题
所有可用主题（实时更新）:
- `亮色模式`
- `暗黑模式`
## 使用场景
### 贴到 Notion 的页面中
### 作为 ios 小组件使用 [Scritable](https://apps.apple.com/cn/app/scriptable/id1405459188)
**示例代码:**
```js
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`