创建一个 Github 统计项目

原理

• 利用 Node 服务发送 Http 请求，对接 Github API 获取 Github 用户相关的信息

实现

• 创建 Node 项目
• 运行以下命令，选择 自定义预选 > node-simple

npm create mine
1

• 安装依赖
  • axios: Http 接口请求
  • dayjs: 时间处理工具

npm i axios dayjs
1

• 封装参数处理函数

/**
 * 获取 Graphql 参数
 */
const getGraphqlParams = (to: string, from: string, name: string) => ({
  query: `
    query userInfo($name: String!, $from: DateTime!, $to: DateTime!) {
      user(login: $name) {
        name
        contributionsCollection(from: $from, to: $to) {
          contributionCalendar {
            weeks {
              contributionDays {
                contributionCount
                date
              }
            }
          }
        }
      }
    }
  `,
  variables: { name, from, to }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 接口请求
• 这里需要一个 Github token, 可以在 Github 设置中生成
• Github API 接口文档

// HTTP POST https://api.github.com/graphql
const res = await graphqlApi.post<GraphqlResponse>(getGraphqlParams(to, from, username as string))
console.log(res)
1
2
3

演示

# 获取近 30 天内的 Github 仓库贡献记录
https://github-statistics-biaov.vercel.app/api/github-statistics?username=biaov

# 根据文本生成 SVG 图片
https://github-statistics-biaov.vercel.app/api/generate-text-image?text=案例
1
2
3
4
5

完整代码

• 源码地址
• 服务部署在 vercel 上

总结

• 就是对接 Github API，获取用户数据，然后根据数据生成 SVG 图片，如果你没有服务器的话，可以使用 vercel 进行部署，免费的，但是有可能需要会魔法才能访问到