Live Demo · Report Bug · Request Feature
"And the game was over and the player woke up from the dream. And the player began a new dream. And the player dreamed again, dreamed better. And the player was the universe. And the player was love."
—— "End Poem"
| Module | Description |
|---|---|
| 🗺️ Contribution Map | Transforms your annual contribution heatmap into a Minecraft-style isometric terrain map — block height and ore types scale with commit count |
| 🏳️ Banner Hall | Generates achievement banners from your GitHub stats, with drag-to-rotate 3D perspective |
| 🪪 Player Passport | Creates a player passport card with customizable signature quote |
| 📦 Repo Card | Displays repo name, description, language & popularity — supports CJK mixed-text export |
All outputs are in SVG format — infinitely scalable, easy to embed in web pages and READMEs.
This project was originally built with Next.js and planned for deployment on Vercel. Later, considering that Cloudflare Workers offers a much more generous free tier (100k requests/day for free), the project was migrated to vinext (Vite + Next.js on Cloudflare) — keeping the Next.js developer experience while enjoying Cloudflare's free hosting.
Visit the live site and enter:
- GitHub username (e.g.
wjz-p) → generates Contribution Map, Banner Hall & Player Passport - Repo shorthand (e.g.
vercel/next.js) → generates Repo Card - Full repo URL (e.g.
https://github.com/vercel/next.js) → auto-parses and generates Repo Card
Click CRAFT to generate. Each view supports downloading as .SVG and provides a copyable API endpoint for embedding.
Generated SVGs can be embedded in READMEs or web pages via the following API endpoints:
# Contribution Map
https://commit-craft.wjz-p.workers.dev/api/map/{username}.svg
# Contribution Map (with animation — NOT recommended in READMEs: GitHub renders SVGs as <img>, which disables GPU compositing; hundreds of animated elements will cause severe lag)
https://commit-craft.wjz-p.workers.dev/api/map/{username}.svg?animate=true
# Player Passport (with custom quote)
https://commit-craft.wjz-p.workers.dev/api/card/{username}.svg?quote=Your+Quote+Here
# Banner Hall (with rotation angle)
https://commit-craft.wjz-p.workers.dev/api/banner/{username}/{statId}.svg?rotation=30
# Repo Card
https://commit-craft.wjz-p.workers.dev/api/repo/{owner}/{repo}.svg
Embed in Markdown:
- Framework: Next.js (App Router) + React 19
- Build & Deploy: vinext + Cloudflare Workers
- Styling: Tailwind CSS 4
- i18n: next-intl (Chinese / English)
- Pixel Fonts: Minecraft Font + Zpix (Chinese pixel font)
- SVG Generation: Server-side SVG templates + opentype.js font baking
# Clone the repo
git clone https://github.com/WJZ-P/CommitCraft.git
cd CommitCraft
# Install dependencies
npm install
# Set up environment variables (requires a GitHub Token)
echo "GITHUB_TOKEN=your_github_token_here" > .env.local
# Start the dev server
npm run dev💡 You'll need a GitHub Personal Access Token (only
public_reposcope required) to fetch contribution data.
Built on vinext with native Cloudflare Workers support:
# Build
npm run build
# Deploy to Cloudflare Workers
npm run deployBefore deploying, set the GITHUB_TOKEN secret in your Cloudflare Dashboard.
Supports Chinese and English. Toggle via the button in the top-right corner of the page. Language preference is saved in a cookie.
Made with ❤️ by WJZ_P | NOT AN OFFICIAL MINECRAFT PRODUCT.
This project is licensed under CC BY-NC 4.0. See LICENSE for details.
If you like this project, please give it a ⭐!
