ssr-contributions-img：基于 Nest.js 的服务端渲染 GitHub 贡献墙

ssr-contributions-img：基于 Nest.js 的服务端渲染 GitHub 贡献墙

ssr-contributions-img Server side rendering of Github contribution wall API 项目地址: https://gitcode.com/gh_mirrors/ss/ssr-contributions-img

项目介绍

ssr-contributions-img 是一个基于 Nest.js 的服务端渲染项目，它能够根据 GitHub 用户名生成个性化的贡献墙。用户只需在 URL 路由参数中传入 GitHub 用户名，即可得到一个自定义的 GitHub 贡献墙。该项目支持多种自定义选项，包括输出格式、主题颜色、图像质量以及统计天数等，为用户提供了极高的灵活性。

项目技术分析

项目使用 Nest.js 进行服务端渲染，这是一个流行的 Node.js 框架，提供了强大的类型安全和模块化的特性。通过服务端渲染，ssr-contributions-img 可以快速生成静态图像，并在用户请求时即时呈现，大大提升了性能和用户体验。此外，项目使用了 SVG.js 来绘制图表，这是一个功能强大的 SVG 操作库，可以轻松实现复杂的数据可视化效果。

在配置和参数处理方面，项目使用了ENV文件来管理环境变量，并通过URL参数接收用户自定义的配置，这使得项目易于部署和调整。

项目技术应用场景

ssr-contributions-img 适用于多种场景，例如：

1. 个人博客或简历网站：通过集成贡献墙，展示个人的GitHub活动记录，增强个人品牌形象。
2. 开源项目文档：在项目文档中嵌入贡献墙，展示项目维护者的活跃度和贡献历史。
3. 企业内部平台：企业可以使用该工具来展示员工在开源项目中的贡献，激励内部技术交流与合作。

项目特点

1. 自定义程度高：用户可以自定义输出格式（HTML、SVG、PNG、JPEG）、主题颜色、图表类型（日历或3D柱状图）、图像质量等。
2. 响应式设计：支持暗黑模式，且能够根据用户的系统设置自动切换。
3. 易于部署：项目可以轻松部署到各种Node.js环境，且提供了详细的本地运行指南。
4. 丰富的配置选项：支持多种图表类型和动画效果，用户可以根据需要选择不同的展示方式。
5. 交互式动画：3D柱状图支持动画效果，增加了视觉吸引力。

以下是使用 ssr-contributions-img 生成的一个实时渲染示例：

在线预览与配置

用户可以通过 Playground 在线预览和配置贡献墙。以下是Playground的动图演示：

实现原理

项目的实现原理在 Medium 和 Codepen 上有详细说明，感兴趣的读者可以深入了解。

本地运行

若要在本地运行该项目，需要准备 GitHub OpenAPI 的 Personal Access Token (PAT)，并在根目录下创建 .env 文件进行配置。安装依赖后，可以使用以下命令启动服务：

# npm run start:dev
yarn start:dev

在浏览器中访问 http://localhost:${port}/_/${username} 即可查看效果，其中 port 和 username 需要根据实际情况进行替换。

配置

项目的配置通过URL参数进行，支持多种参数，例如：

• username：GitHub 用户名
• theme：内置主题，可用值包括 random 或具体的主题枚举值
• chart：图表类型，可选 calendar 或 3dbar
• format：输出格式，支持 html、svg、xml、png、jpeg
• quality：图像质量，取值范围为 0.1 到 10
• widget_size、weeks、colors、dark 等参数用于进一步自定义贡献墙的展示效果

通过这些配置，用户可以自由组合出满足不同需求的GitHub贡献墙。

总之，ssr-contributions-img 是一个功能丰富、易于使用且高度可定制的开源项目，适用于各种需要展示GitHub贡献的场景。无论是个人的技术博客还是开源项目的文档，都能从中受益，为用户提供更好的交互体验和视觉效果。

ssr-contributions-img Server side rendering of Github contribution wall API 项目地址: https://gitcode.com/gh_mirrors/ss/ssr-contributions-img