创建一个 Github 统计项目

原理

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

实现

  • 创建 Node 项目
  • 运行以下命令,选择 自定义预选 > node-simple
npm create mine
  • 安装依赖
    • axios: Http 接口请求
    • dayjs: 时间处理工具
npm i axios dayjs
  • 封装参数处理函数
/**
 * 获取 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 }
})
  • 接口请求
  • 这里需要一个 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)

演示

# 获取近 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=案例

完整代码

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

总结

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

你可能感兴趣的:(TypeScript,NodeJs,github,node,vite,统计)