AI Created Powered by Qwen3-Coder HooAPI Cline Claude Code

这是一个自动获取您的 GitHub Star 仓库信息并在网页上展示的工具。它包含两个主要部分:

1. 使用 GitHub Actions 定期从 GitHub API 获取您 Star 的仓库信息
2. 前端页面,用于浏览和搜索这些仓库

• 自动每天同步您的 GitHub Star 仓库信息
• 响应式设计,支持移动端浏览
• 强大的搜索功能:
  • 按关键字搜索(仓库名、描述、主题)
  • 按编程语言过滤
  • 多种排序方式(按星数、fork 数、更新时间等)
• 分页显示,提高浏览体验
• 可自定义数据源设置
• 详细的编程语言分布统计
• 无限滚动加载
• 仓库主题标签展示

• 后端: GitHub Actions, Node.js 24, Octokit, GraphQL
• 前端: React 18, Vite, TypeScript, CSS3, FlexSearch
• 部署: GitHub Pages
• 包管理: pnpm

这个项目包含一个可重用的 GitHub Action,可以轻松集成到其他项目中:

- name: Fetch starred repositories
 uses: hugefiver/github-stars-search/action@v1
 with:
 github-token: ${{ secrets.GITHUB_TOKEN }}
 username: ${{ github.actor }}
 output-file: ./data/starred-repos.json
 simple-output-file: ./data/starred-repos-simple.json

前端页面包含一个设置浮窗,允许用户自定义数据文件的位置:

• 点击右上角的"⚙️ Settings"按钮打开设置
• 输入自定义数据文件的 URL
• 默认使用当前网站的 ./data/starred-repos-simple.json 文件

• 关键字搜索:在仓库名、描述和主题标签中搜索(使用 FlexSearch 实现高性能搜索)
• 语言过滤:按编程语言筛选仓库
• 标签过滤:按仓库主题标签筛选
• 多种排序:按星数、fork 数、更新时间、创建时间、星标时间和名称排序
• 排序方向:支持升序和降序排列

• 适配桌面和移动设备
• 在小屏幕上自动调整布局
• 无限滚动加载更多内容

• 仓库基本信息(名称、描述、URL)
• 编程语言分布统计和可视化
• 仓库主题标签
• 统计信息(星数、fork 数、更新时间、星标时间)

git clone https://github.com/hugefiver/github-stars-search.git
cd github-stars-search

进入 action 目录并安装依赖:

cd action
pnpm install
pnpm run build

工作流文件位于 .github/workflows/fetch-starred-repos.yml,默认配置为每天自动运行一次。

工作流现已优化:

• 统一使用 Node.js 24 环境
• 改进了依赖安装和构建过程
• 使用最新的 GitHub Actions 版本
• 自动部署到 GitHub Pages

1. 转到仓库设置 (Settings)
2. 在 "Pages" 部分,选择:
   • Source: Deploy from a branch
   • Branch: gh-pages
3. 保存设置

您可以手动触发工作流来立即获取数据:

1. 转到仓库的 "Actions" 标签
2. 选择 "Fetch Starred Repositories" 工作流
3. 点击 "Run workflow" 按钮

安装依赖:

pnpm install

启动开发服务器:

pnpm run dev

构建生产版本:

pnpm run build

cd action
pnpm install
pnpm run build

获取的仓库信息包括:

• 仓库 ID 和名称
• 完整名称和 URL
• 描述和主要编程语言
• 详细的编程语言分布统计(字节大小和百分比)
• Star 数和 Fork 数
• 创建和更新时间
• 星标时间
• 所有者信息(登录名、头像、URL)
• 仓库主题标签

前端使用的数据格式,包含:

• 基本仓库信息
• 编程语言分布统计
• 主题标签
• 统计信息

数据保存在 docs/data/starred-repos-simple.json 文件中供前端使用。

项目使用 GitHub GraphQL API 获取数据,具有以下特点:

• 使用 nameWithOwner 字段获取完整仓库名
• 正确处理 StarredRepositoryEdge 结构
• 支持分页获取大量数据
• 获取详细的编程语言统计信息
• 获取仓库主题标签

• 由于 GitHub API 的限制,每次最多获取 1000 个 Star 的仓库
• 为了保护隐私,建议将此仓库设为私有
• 前端页面只能访问公开的仓库信息
• 使用 GraphQL API 需要注意速率限制
• 项目完全由 AI 生成,遵循项目的 AI 生成内容政策

github-stars-search/
├── action/ # GitHub Action 源码
│ ├── src/
│ │ ├── index.ts # Action 主要逻辑
│ │ └── types/ # TypeScript 类型定义
│ ├── action.yml # Action 配置
│ └── package.json
├── src/ # 前端源码
│ ├── App.tsx # 主要组件
│ ├── types.ts # 前端类型定义
│ └── ...
├── docs/ # 构建输出和 GitHub Pages
├── .github/workflows/ # GitHub Actions 工作流
└── scripts/ # 测试和模拟脚本