tosxin-456/gitgrimoire

## ✨ 你将获得什么 - **一本 3D 魔导书** —— 而非平面的卡片。它出场时是密封的；点击它，封面会翻转打开（CSS 3D + Framer Motion），展示包含你的头像、等级、小队、属性和六项 FIFA 风格数据的跨页图。你可以将其导出为 PNG 并分享。 - **充满电影感的召唤仪式** —— 渐隐至黑、粒子特效、魔法阵、魔导书降临、书页翻动、光芒闪耀屏幕……随后，你的魔导书选中了你。 - **决斗竞技场** —— 让两名 GitHub 用户展开较量。在最终裁决降临之前，他们的封面会蓄力并伴随着属性色彩的灵气、法术弹和撞击火花发生碰撞。胜者完全由真实数据决定，绝无随机性。 - **排行榜** —— 最高魔力、最强团长、魔法帝候选人、综合实力最高、最长连续打卡、最强魔导书。 ## 🧙 我是如何构建它的 整个应用是一个流水线：**GitHub GraphQL → 评分引擎 → SQLite → 主题展示。** ### 1. 无需 OAuth —— 只需一个用户名 访问者无需进行任何授权。仅需一个服务端的 **无权限范围 (no-scope)** GitHub token，即可通过 GraphQL API ([`src/lib/github.ts`](src/lib/github.ts)) 读取公开的资料数据：个人资料、仓库、语言、标签、组织 —— 外加逐年的 `contributionsCollection` 循环，用于计算历史总的 commit 数和连续打卡数（REST API 每次只能获取一年的数据）。 ### 2. 评分引擎 [`src/lib/scoring/`](src/lib/scoring) 将原始统计数据转化为六项 1–99 的卡片数据。每项数据都提取自 GitHub 活动的*不同维度*，因此没有任何单一指标会主导整张卡片： | 数据 | 铸造来源 | | --- | --- | | **Mana（魔力）** | 总 commits (50%) · 当前连续打卡 (30%) · 活跃天数 (20%) | | **Spell Mastery（法术精通）** | 获得的 stars (65%) · 主导语言占比 (35%) | | **Battle Experience（战斗经验）** | 账号年龄 (40%) · PRs + 关闭的 issues (35%) · 公开仓库 (25%) | | **Leadership（领导力）** | followers (50%) · 组织 (30%) · PR 合并率 (20%) | | **Control（掌控力）** | 最长连续打卡 (50%) · 合并率 (30%) · 关闭的 issues (20%) | | **Potential（潜力）** | 每年贡献速度 (60%) · 当前连续打卡 (40%) | 原始数量会经过对数风格的 `scale()` 曲线处理 —— 从 0 → 1,000 次 commits 的提升幅度远大于 10,000 → 11,000，这样新手就不会被大佬们的数据完全碾压。这六项数据的加权混合将构成你的**综合评分 (Overall Rating, 50–99)**，并映射到魔法骑士的阶级体系中： ``` 98+ Wizard King 82+ Captain 93+ Wizard King Candidate 76+ Vice Captain 88+ Grand Magic Knight 69+ Senior Magic Knight …down to Unranked ``` ### 3. 属性、小队和稀有度 - **魔法属性** 源自你实际开发的内容：你的主导语言会映射为一种元素（JavaScript → 闪电，TypeScript → 时间，Rust → 钢铁，Go → 风，Python → 空间……），但仓库的*标签 (topics)* 可以将其覆盖 —— 足够多的安全类仓库会让你成为暗属性魔法使，机器学习相关的工作偏向梦境魔法，游戏开发则是创成魔法。 - **小队** 根据你的开发风格进行分配 —— 规律的连续打卡、纯粹的产出量、社区贡献倾向 —— 每一种风格都会映射到九个魔法骑士小队之一，并拥有专属的颜色和口号。 - **稀有度** 由综合评分驱动 —— 普通 → 青铜 → 白银 → 黄金 → 三叶 → **四叶** —— 且这是上限：即使是王国最强的传说人物也只携带着四叶草。**五叶草** 是无法通过努力、随机抽取或购买获得的。它只选中了一个人 —— 那位毫无魔力的创始人，他唯一的力量就是永不言弃。😈 - **决斗** ([`src/lib/scoring/duel.ts`](src/lib/scoring/duel.ts)) 的胜负判定优先级依次为综合评分 → 综合数据 → stars → commits，因此决斗 URL 的结果总是保持一致，并且在真实数据完全镜像对等的情况下会判定为平局。 ### 4. 展示层 所有视觉效果均采用 **Tailwind CSS v4 + Framer Motion** 手工构建 —— 没有使用任何 UI 库： - 魔导书是 CSS `perspective` 场景中的两个面；封面是一个基于 `rotateY` 旋转的 `motion.button`，并以书脊为变换原点，样式根据稀有度进行定制（四叶草会呈现由野的苔藓水彩画风，五叶草则带有烧焦的皮革质感和余烬光晕）。 - 召唤仪式和决斗都是状态机：由 `setTimeout` 驱动的状态控制着同一共享时间轴上的关键帧数组（突进、屏幕震动、撞击闪光全都共享相同的 `times`），并且支持 `prefers-reduced-motion` 设置，可直接跳过动画显示结果。 - PNG 导出功能通过 [`html-to-image`](https://github.com/bubkoo/html-to-image) 以 2 倍像素比例渲染展开的跨页图。 ### 5. 数据持久化 召唤记录会通过 **Prisma** 以 upsert 方式写入 SQLite ([`prisma/schema.prisma`](prisma/schema.prisma)) —— 开发环境下使用本地文件，生产环境中使用 **Turso (libSQL)** —— 这为排行榜、永久档案 URL (`/grimoire/`) 以及当你以更强的姿态回归时显示的等级晋升消息提供了支持。 ## 🛠 本地运行 **1. 创建服务端 GitHub token** —— 访问 [github.com/settings/tokens](https://github.com/settings/tokens) → *Generate new token (classic)* → 选择**无权限范围 (no scopes)**（仅限公开数据）。 **2. 配置环境变量** —— 将 `.env.example` 复制为 `.env`： ``` GITHUB_TOKEN=your_server_side_token ``` `DATABASE_URL` 已默认指向本地 SQLite 文件。在 Vercel 上，请在项目的环境变量中设置 `GITHUB_TOKEN` 以及 `TURSO_DATABASE_URL` / `TURSO_AUTH_TOKEN`。 **3. 安装并运行：** ``` npm install npx prisma migrate dev # first time only — creates prisma/dev.db npm run dev ``` 打开 [http://localhost:3000](http://localhost:3000) 并召唤某人。 ## 🧰 技术栈 **Next.js 16 (App Router)** · **TypeScript** · **Tailwind CSS v4** · **Framer Motion 12** · **Prisma + SQLite / Turso** · **GitHub GraphQL API** ## ⭐ Star 历史

*由 [@tosxin-456](https://github.com/tosxin-456) 构建 —— 基于真实的 GitHub 事迹驱动。* **[gitgrimoire.vercel.app](https://gitgrimoire.vercel.app)**

标签：3D动画, GitHub统计, GraphQL, 前端, 自动化攻击, 趣味应用