开发工具数据可视化【免费下载链接】star-historyThe de facto GitHub star history graph.项目地址https://gitcode.com/gh_mirrors/st/star-history点击查看免费下载star-history 是 GitHub 上用于可视化仓库 Star 增长历史的项目本指南基于仓库根目录的 CLAUDE.md 开发文档结合源码深入解析其工程架构包括 monorepo 目录划分、前端路由与状态流、后端/svg图表服务、gh/数据管道以及 CI/CD 部署编排。读完本文你将掌握该仓库的开发命令、代码组织方式、核心模块的调用链与实现细节能够直接上手二次开发或独立部署其中的任意模块。技术栈与依赖管理总览统一使用 pnpm 作为包管理器仓库明确规定所有命令一律使用pnpm而非 npm/yarnpnpm install、pnpm run dev、pnpm run build等。该约束在根目录 package.json 的packageManager字段中也得到了印证pnpm9.15.4。前端技术栈根据 CLAUDE.md 的 Tech Stack 一节前端采用Next.js ^14.1.0Pages Router 静态导出output: exportReact ^18.2.0TypeScript ^4.9.5Tailwind CSS ^3.4.0UI 样式D3.jsaxis、scale、selection、shape 子模块用于图表绘制Axios ^1.8.2GitHub API 请求FontAwesome ^6.5.1、Lodash ^4.17.21、Dayjs ^1.11.10Gray-matter ^4.0.3、Marked ^9.1.6博客 Markdown 解析这些依赖可在 frontend/package.json 中逐一核对。后端技术栈后端是独立的 Hono 服务部署为api.star-history.com用于生成 Star 历史 SVG 图表和 OG 卡片图Hono ^4.7.4hono/node-serverHTTP 框架TypeScript ^5.7.0D3.js服务端 SVG 渲染JSDOM 20.0.2在 Node 中模拟 DOM 绘制 SVGSVGO ^3.2.0SVG 体积优化Satori ^0.12.0OG 卡片图像渲染LRU cache 7.14.1多级缓存根目录共享依赖根目录 package.json 声明了shared/代码的共享依赖axios、d3-axis、d3-scale、d3-selection、d3-shape、dayjs、lodash前端通过shared/*tsconfig 别名导入后端通过../shared/相对路径导入避免两处重复维护。仓库目录结构与分层设计仓库划分为四个主要目录shared/、frontend/、backend/和gh/。shared/前后端共享代码目录用途common/utils.tsx跨平台工具函数日期格式化、剪贴板等common/api.tsxGitHub API 客户端Star 历史拉取、分页、Token 鉴权common/chart.tsx图表数据转换支持insertZeroPoint选项packages/xy-chart.tsxD3 XY 折线图渲染器lobster emoji 仅在envType: browser时启用packages/radar-svg.ts纯数学计算的雷达图 SVG 字符串生成器无 D3 依赖供 Satori/OG 卡片使用packages/card-landscape1.tsxOG 卡片布局构建器packages/types.tsxD3 图表类型、配色colors、darkColors、colorsCompactpackages/components/ToolTip 组件packages/utils/D3 绘制工具坐标轴、标签、图例、水印、滤镜、字体types/chart.tsxTypeScript 类型定义ChartMode、RepoData、StarRecord 等这种设计让同一套图表逻辑既能在浏览器端运行前端交互图表也能在 Node 服务端运行生成 SVG 图片是仓库实现一套图表、两种输出的关键。frontend/Next.js 前端目录用途pages/Next.js 页面路由Pages Routercomponents/React UI 组件store/React Context 状态管理 URL hash 同步helpers/工具函数storage、toast、格式化、常量及静态数据 JSONstyles/Tailwind 配置、全局 CSS、字体Inter 字体族server/仓库 Star 数据的 LRU 缓存scripts/博客 JSON 生成脚本public/静态资源与博客图片plugins/构建脚本与工具backend/图表 API 服务文件用途main.tsHono 服务提供/svg端点query 参数repos、type、style、size、themeog-card.ts基于 Satori 的 OG 卡片渲染stylecard→ 1200×630 PNGcache.tsLRU 缓存1 万个仓库、1GB、24h TTLtoken.tsGitHub Token 轮换utils.tsSVG 处理、图片转换辅助函数assets/OG 卡片渲染所需字体xkcd.ttf、Inter.ttf与 Logogh/数据管道gh/目录包含两条管道star前端排行榜数据和eventGitHub 事件归档分析。前端路由与页面组织仓库采用 Next.jsPages Router并配置output: export静态站点生成。路由与页面文件对应关系如下路由文件frontend/pages/说明/index.tsx首页 — 图表查看器仓库输入 侧边栏/blogblog/index.tsx博客列表页/blog/[slug]blog/[slug].tsx单篇博客基于 Markdown/:owner/:repo...slug.tsx仓库详情页catch-all 路由404404.tsx自定义 404带上下文感知提示布局包装位于 _app.tsx采用 per-pagegetLayout模式与 _document.tsx。从 pages/[...slug].tsx 的实现可以看到仓库详情页会基于shared/common/repo-data加载的排行榜数据渲染 1200×630 的 OG 风格卡片并支持一键下载 PNG 与分享链接。状态管理与数据流URL hash 驱动的状态同步前端状态通过URL hash与浏览器地址栏双向同步这是 star-history 允许复制链接即可分享图表的关键机制。状态格式为#repo1repo2typedatelogscalestore/index.tsx 中的 hash 解析逻辑支持以下参数typedate/typetimeline切换图表模式同时兼容裸参数date/timeline的旧格式logscale开启对数坐标legendtop-left/legendbottom-right图例位置其余 token 一律视为仓库名owner/repo形式router.events.on(hashChangeComplete)监听 hash 变化并重新解析实现改 URL 即改图表。完整数据流调用链URL hash#repo1repo2typedatelogscale→ 在 store/index.tsx 中解析RepoInputer管理仓库列表 → 触发StarChartViewershared/common/api.tsx从 GitHub API 拉取 Star 历史支持分页与 Token 鉴权shared/common/chart.tsx将数据转换为 D3 兼容格式前端传入{ insertZeroPoint: true }shared/packages/xy-chart.tsx通过 D3 渲染 SVG 图表GitHub API 拉取与采样策略shared/common/api.tsx 中的getRepoStarRecords是数据拉取的核心实现每页固定API_PER_PAGE 100条超时REQUEST_TIMEOUT_MS 15000通过首请求响应的Linkheader 解析总页数pageCount采样策略若pageCount maxRequestAmount前端默认 15见 chart.tsx全量请求否则按round(i * pageCount / maxRequestAmount) - 1均匀抽取页码控制请求总量最后调用getRepoStargazersCount获取当前精确 Star 数作为曲线终点数据按日期去重存入Mapdate, count再转换为{ date, count }数组图表数据转换与 insertZeroPointshared/common/chart.tsx 提供两种模式的转换Date 模式x为Date对象y为 Star 数Timeline 模式x为相对首个 Star 日期的天数差insertZeroPoint选项会在曲线起点插入零点Date 模式在首条记录前一天补(x: 首日-1, y: 0)Timeline 模式直接补(x: -1, y: 0)让曲线从原点开始视觉上更符合从 0 增长的直觉。后端在 main.ts 渲染时同样复用convertDataToChartData保证前后端图表数据语义一致。视觉风格指南xkcd 手绘风仓库图表与卡片 UI 采用统一的xkcd / hand-drawn 手绘美学所有叠加层和图表 UI 元素必须遵循以下约定。Tooltip 规范参考实现shared/packages/components/ToolTip.tsx白色背景 90% 不透明度黑色 2px 描边5px 圆角背景矩形应用xkcdifySVG 滤镜feTurbulencefractalNoise feDisplacementMap scale5制造抖动效果字体font-family: xkcd, cursive标题 15px 加粗颜色指示器8×8 矩形、2px 圆角颜色与数据系列一致任何新增的 hover/交互元素都必须沿用同一 Tooltip 风格边框 / 描边规范边框与轮廓统一使用xkcdifySVG 滤镜呈现草图式的抖动线条描边浅色主题用黑色#000深色主题用白色#fff2px 宽度圆角5pxrx5 ry5图表或卡片 UI 上禁止使用干净笔直的边框一律应用 xkcdify 滤镜这些约定在 shared/packages/xy-chart.tsx 的默认配置中同样得到体现默认fontFamily: xkcd、浅色主题strokeColor: black、深色主题#0d1117背景使用strokeColor: white并支持transparent透明背景。常见改动涉及的 Key FilesCLAUDE.md 给出了高频改动场景对应的核心文件清单图表渲染shared/packages/xy-chart.tsx、components/StarChartViewer.tsx、components/Charts/StarXYChart.tsxGitHub APIshared/common/api.tsx状态管理store/index.tsx仓库详情页pages/[...slug].tsx、components/PageShell.tsx博客系统pages/blog/[slug].tsx、scripts/generateBlogJson.mts布局与导航components/header.tsx、components/footer.tsx、components/LeftSidebar.tsx、components/RightSidebar.tsx样式tailwind.config.js、global.css后端 API 服务详解开发与构建cd backend pnpm dev # 开发模式tsx main.ts cd backend pnpm build # 构建tsc --project ./后端必须提供token.env文件每行一个 GitHub Token否则启动时进程直接退出。本地开发可通过环境变量指定路径ENVPATH/path/to/token.env pnpm devDocker 部署配置见 backend/Dockerfile基于node:20-alpine使用 corepack 启用 pnpm9服务监听8080端口。/svg 端点与查询参数main.ts 实现了核心/svg端点支持参数如下参数取值默认值说明reposowner/repo逗号分隔必填仓库列表最多 20 个MAX_REPOS_PER_REQUESTtypedate/timelinedate图表模式兼容裸参数timeline/datestylelandscape1等无卡片风格landscape1返回 1200×630 OG 卡片 SVGsizemobile/laptop/desktoplaptop图表尺寸themedarklight深色/浅色主题transparenttruefalse透明背景logscale任意值关闭对数坐标false显式关闭legendtop-left/bottom-righttop-left图例位置参数常量化定义在 backend/const.tsCHART_TYPES [Date, Timeline]、CHART_SIZES [mobile, laptop, desktop]、MAX_REQUEST_AMOUNT 16、MAX_REPOS_PER_REQUEST 20。一个典型请求示例来自源码注释/svg?reposstar-history/star-historytypetimelinelogscalelegendbottom-right两个值得关注的工程细节CDN 缓存归一化/svg会先将repos参数统一小写GitHub 仓库名大小写不敏感若与原值不同则 301 重定向到规范化 URLmain.ts这样 Cloudflare 对同一图表只缓存一个条目。响应头SVG 响应携带Content-Type: image/svgxml;charsetutf-8与Cache-Control: public, s-maxage86400, max-age86400配合 CDN 做一天粒度的公开缓存。渲染流程从 main.ts 可以看到完整渲染链路先查 starData 缓存 → 未命中则通过getRepoData拉取 GitHub 数据并回填缓存 → 并行拉取仓库 Logo 转 base64 → 用 JSDOM 构造 SVG DOM → 调用XYChart绘制 →fixJsdomSvgCasing修复属性大小写 → SVGOmultipass优化压缩 → 写入 svgChart 缓存后返回。多级 LRU 缓存backend/cache.ts 定义了三级缓存缓存上限说明cachestarData10000 条目 / 1GB / 24h TTL按仓库存储 Star 记录与 LogosvgCache渲染后的图表 SVG2000 条目 / 400MB / 24h TTL以规范化查询字符串为 keyogCardCacheOG 卡片 SVG1000 条目 / 200MB / 24h TTL以仓库名为 key缓存命中/未命中计数recordCacheHit/recordCacheMiss会通过/healthz端点暴露包括条目数、内存占用人类可读格式与命中率便于监控缓存效率。GitHub Token 轮换token.ts 实现了 Token 池管理启动时从token.env读取全部 Token并逐个调用 GitHub API 验证可用性不可用的直接剔除getNextToken采用轮询round-robin方式选取下一个可用 Token命中限流403的 Token 通过markTokenExhausted进入15 分钟冷却期期间被跳过若所有 Token 均在冷却中接口返回 503 All GitHub API tokens are rate-limitedGH 数据管道排行榜与事件分析Star 管道Star 管道负责拉取仓库数据并导出前端消费的 JSON 文件。cd gh pnpm run star:fetch # 完整运行GitHub API BigQuery → SQLite → JSON cd gh pnpm run star:generate # 仅从已有 star.db 重新生成 JSON代码改动后常用关键设计DB 是临时的createDatabase()每次运行都会删除并重建star.dbSQLite 库始终可以从源 API 重新生成因此star.db可以放心提交而gh/data/下的 JSON 文件被 gitignore由部署工作流按需生成导出的 JSON写入gh/data/前端通过gh-data/*别名导入leaderboard.json、weekly-ranking.json、repos.json、star-count.json文件用途star-fetch.ts主入口 — 编排整条管道star-generate.ts从现有star.db生成 JSONgithub.tsGitHub API 客户端发现符合条件仓库、Token 轮换bigquery.tsBigQuery 客户端拉取周活动统计db.tsSQLite schema、插入、JSON 导出、日期格式化star-count.ts按 Star 阈值从 GitHub Search API 拉取仓库数量types.ts共享 TypeScript 类型从 star-fetch.ts 源码可以看到周区间的校验与扩展逻辑周格式必须为YYYY-Wnn如2026-W08支持单周参数与start..end区间展开自动处理 52/53 周跨年边界缺省参数时自动计算上一个完整的周周一回溯逻辑。Event 管道Event 管道将 GitHub Archive 小时级数据下载到本地 SQLite按事件类型建表共 16 种用于 schema 探索与分析。cd gh pnpm run event [YYYY-MM-DD] [hour] # 默认昨天 0 点DBevent.db每种事件独立建表如push_events、pull_request_events公共字段actor、repo、org 事件特有 payload 列数据源https://data.gharchive.org/{date}-{hour}.json.gz核心实现event.ts下载 → 解压 → 加载入库CI/CD 工作流与部署设计仓库在.github/workflows/下配置了三个 GitHub Actions 工作流工作流触发条件职责gh-fetch.yml每周一 18:00 UTC cron 手动触发运行gh/管道fetch → SQLite → JSON提交star.db并显式触发两个部署工作流deploy-frontend.yml推送frontend/**、shared/**、工作流文件PR 预览workflow_dispatch在gh/运行pnpm run star:generate构建前端部署到 Cloudflare Pagesdeploy-backend.yml推送backend/**、shared/**、工作流文件workflow_dispatch运行pnpm run star:generate构建 Docker 镜像部署到 GKE两个关键设计决策CLAUDE.md 明确记录gh/data/被 gitignore —— JSON 文件由部署工作流通过pnpm run star:generate现场生成而非提交到仓库只有gh/star.db被提交由gh-fetch.yml负责—— 且部署工作流不会因star.db变化而触发gh-fetch.yml通过workflow_dispatch显式触发它们以避免双重部署。开发约定与注意事项Plans 目录所有设计文档与实施计划统一保存到仓库根目录的plans/目录该目录被 gitignore不随代码提交。自动生成文件禁止提交以下文件均为自动生成且被 gitignore禁止使用git add -f强制添加frontend/helpers/blog.json— 由博客 Markdown frontmatter 生成对应 scripts/generateBlogJson.mts前端pnpm run generate:blog触发sitemap*.xml、robots.txt— Next.js 构建时生成配合 next-sitemap 配置见 next-sitemap.config.jsnext-env.d.ts、*.tsbuildinfo— TypeScript 构建产物前后端共享代码的正确导入姿势由于shared/被前后端同时引用导入路径有严格要求前端通过 tsconfig 中的shared/*别名导入后端通过../shared/相对路径导入新增共享代码时务必遵循这一约定避免打包或类型解析问题。总结star-history 是一个小而完整的全栈开源项目范本shared/用一套 D3 图表代码同时驱动浏览器交互与服务器 SVG 渲染frontend/通过 URL hash 实现可分享的图表状态backend/以 Hono 提供带三级 LRU 缓存、Token 轮换和 CDN 归一化的/svg图表服务gh/用可再生的 SQLite JSON 管道支撑排行榜数据CI/CD 则将数据生成与前端/后端部署解耦避免重复构建。无论是学习 Next.js 静态导出 服务端 SVG 渲染、D3 图表复用架构还是研究 GitHub API 限流下的数据采样策略本仓库的 CLAUDE.md 文档与其对应源码都提供了可以直接对照阅读的完整范例。赞分享开发工具数据可视化【免费下载链接】star-historyThe de facto GitHub star history graph.项目地址https://gitcode.com/gh_mirrors/st/star-history点击查看免费下载相关推荐Codex-X Star History Worker基于 Cloudflare Worker 的仓库 Star 历史 SVG 图表服务实战指南Codex X Star History Worker基于 Cloudflare Worker 的仓库 Star 历史 SVG 图表服务实战指南 本文以仓库中桌面应用开发者工具AI 应用star-history部署架构详解静态前端与API服务的完美结合star history部署架构详解静态前端与API服务的完美结合 一、整体架构概览 star history采用前后端分离架构通过静态资源与API服务的解开发工具数据可视化最完整的Star-History API服务器指南从SVG生成到企业级部署最完整的Star History API服务器指南从SVG生成到企业级部署 你是否还在为GitHub仓库Stars数据可视化烦恼是否需要一个稳定、高效的SV开发工具数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考