Green Wall：让你的 GitHub 贡献，变成一面会说话的墙

有一阵子，我频繁地打开自己的 GitHub 主页。不是为了看某个项目的 Star 数，也不是为了催促自己 push，而是单纯地盯着那片绿油油的贡献格子看。

那面「草地」，记录了我过去一年的开发轨迹，每一格都是我深夜敲下的一行代码、清晨解决的一个 bug、午后提交的一次 PR。但它始终以一种静默的方式存在着，像一位沉默的记录者，却从不讲述背后的故事。

开始想：如果它能说话，会讲出什么样的自传？如果我能为它设计一张「封面」，是否能更有温度地展示这段旅程？

Green Wall 就是在这个念头下诞生的。

项目的起点：从「自用工具」到「人人适用」

最初，我只是想做一张自己的贡献图：比官方的更美观一点，也更能表达我对编程的热爱。一个页面，输入 GitHub 用户名，挑个主题，点击导出，就能生成一张独一无二的年度图谱。

很快，我发现这个工具有更多的用途。它可以出现在技术简历上，让面试官快速了解一个人的活跃度；可以用在社交媒体，作为程序员的「年度封面」；甚至还能通过插件，把这个功能带到别人的 GitHub 页面。

每个人的贡献图，都是一段值得展示的旅程，而我做的，只是让它「好看一点」。

整个项目基于 Next.js 搭建，配合 Tailwind CSS 实现了极致轻量的 UI 和响应式体验。最具挑战性的部分，是如何从 GitHub 获取高精度的贡献数据，同时又不暴露用户 token、不过度依赖服务端。

最终我选择了 GitHub 的 GraphQL API —— 虽然上手门槛比 REST 高不少，但在控制请求粒度和结构上提供了极大的自由度。我通过 API Routes 做了一层轻服务端封装，既确保了性能，也提升了前端的开发效率。

为了提升生成图片的视觉张力，我借鉴了不少数据可视化平台的设计语言：比如颜色映射方案、文字排布节奏、留白比例控制等。这些设计上的「非功能细节」，其实才是让人愿意分享、愿意保存的关键。

在开发中期，我临时起意写了一个 Tampermonkey 插件，把「生成贡献图」的功能直接集成到了 GitHub 用户主页上。它只是一个按钮，却让整个体验发生了质变。

插件上线后，我看到一些陌生开发者在论坛发帖说「这玩意太上头了，我刷了所有前同事的 GitHub 墙」；还有人给我提 PR，希望支持团队协作的多用户图表。这让我意识到，一个看似小而美的项目，可能拥有远比我想象更广的使用场景。

Green Wall 没有用户系统、没有后台、没有数据库。它甚至没做 SEO 和推广。但就是靠着「点开即用、即用即美」的体验，在没有任何宣传的前提下，被越来越多的开发者分享和使用。

这段经历让我反思了很多。技术人常常被「工程复杂度」所吸引，但真正打动人的，往往是解决一个具体问题的那份「刚刚好」。Green Wall 没有惊天动地的创新，但它做了一件小事——把沉默的数据，变成能讲故事的图。

我还在不断优化这个项目。未来我想加入多语言支持、贡献时间轴、甚至是 GitHub 之外平台的整合（比如 GitLab、Gitee 等），让它变成一个更广泛的开发者可视化工具。

而对我个人来说，这段项目旅程让我深刻理解了「工具即表达」这件事。我们构建的每一个页面、每一个功能，其实都在表达我们对世界的某种理解。如果说 GitHub 是开发者的时间线，那 Green Wall 就是那条时间线上的一张照片，一张有温度的记录。

如果你也曾想过：那些零散的努力是否值得记录？那么或许 Green Wall 能给你一个答案。